본문 바로가기

Flutter27

[Flutter] Constraints를 이해하고 layout만들기 나 같은 플러터 초보자들이 UI를 그릴 때 가장 에러를 많이 일으키는 가장 큰 원인은 잘못된 constraints의 사용일 것이다. 처음 플러터를 학습할 때는 Container, Text, Column 그리고 Row같은 위젯을 사용하여 단순한 layout을 만들어 보게 된다. 직관적인 선언형UI 덕분에 처음에는 빠르게 플러터에 적응하여 화면을 그려나갔을 것이다. 하지만 점점 위젯들이 중첩되고, 스크롤 위젯 등 다양한 위젯들을 활용하게 되었을 때, 어디서 부터 잘못된 것인지 파악하기도 힘든 상황들이 발생하게 된다. 대부분의 위젯 관련 에러는 Flutter의 Widget constraints에 대한 이해의 부족으로 발생한다. constraints에 대한 이해가 부족한 채 개발을 진행하게 되면, 쓸모 없는 위.. 2024. 1. 13.
[Flutter] flutter 3.3 ShaderCompilerException ink_sparkle.frag failed with exit code -1073740791 에러 해결 개발 장비를 바꾼 뒤, 프로젝트를 실행시켰을 때 Target web_release_bundle failed: ShaderCompilerException: Shader compilation of "C:\flutter\packages\flutter\lib\src\material\shaders\ink_sparkle.frag" to "build\web\assets\shaders/ink_sparkle.frag" failed with exit code -1073740791. Compiling lib\main.dart for the Web... 52,1s Exception: Failed to compile application for the Web. 위와 같은 에러가 발생했다. 참고로 위 에러 문구는 저장해둔 에러메.. 2024. 1. 6.
[Flutter] UI(5) - ExpansionTile을 활용하여 TreeView 만들기 flutter에서 기본 위젯으로 TreeView를 지원하지는 않는다. 하지만 pub.dev에 검색해보면 flutter_fancy_tree_view와 같이 잘 만들어진 패키지들을 찾아볼 수 있다. 하지만 학습의 차원에서 직접 TreeView를 만들어 보았다. 처음 만들자고 생각했을 때 부터 쉽지는 않을 것 같다고 생각했지만, 실제로 해보니 훨씬 복잡하다고 생각 되었다. 우선 TreeView를 만들기 위해서는 1. 재귀로 위젯 호출 2. ExpansionTile 위젯 (optional) 3. CustomPaint 위젯 세 가지 개념을 알고 있어야 한다. 1. 재귀로 위젯 호출 만약 내가 TreeView를 현업에서 만든다면, 무조건 재귀를 통해서 하위 데이터들을 불러올 것이다. 트리구조가 변경 될 때에도 수정.. 2024. 1. 2.
[Flutter] Widget(8) - ListTile에서 leading, tailing에 위젯 여러개 넣는 법 ListTile을 사용하면 leading과 tailing에 손쉽게 아이콘과 같은 위젯들을 추가할 수 있다. 이런 장점때문에 UI를 그릴 때 자주 사용되게 되는데, Leading에 아이콘을 여러게 넣고 싶어지는 경우가 있을 것이다. 이를 위해 leading에 Row위젯을 사용하여 두개의 아이콘을 넣어보자. 만약 ListTile( title: Text("This is my ListTile"), trailing: Row( children: [ Icon(Icons.call), // icon-1 Icon(Icons.message), // icon-2 ], ), ) 이렇게 Row를 사용해서 Icon을 여러개 넣어주면 "Leading widget consumes entire tile width. Please use .. 2023. 12. 26.