플러터16 [Flutter] Animation을 사용하여 ListView 선택 효과 만들기(AnimatedPositioned) 몇 번의 리스트를 만들어 봤지만, UI를 고려할 때, Row의 간격이나 선택 시 색깔변경 등 단순하게 보여지는 부분외에 큰 고민을 해본 적이 없는 것 같아 이번에는 나름대로 Animation을 활용한 list를 만들어 보기로 하였다. 내가 원하는 효과는 리스트 아이템 클릭을 하면, 해당 아이템이 최상단으로 올라가고, 아래쪽에 선택한 아이템에 대한 디테일이 나오게 하는 것이다. 효과를 만들기 위해 검색을해보니 Flutter codelabs에 유사한 기능을 소개하고 있었다. Container Transformation Example by Flutter.dev Animation 패키지의 OpenContainer를 활용하는 방법인데, 위젯 하나로 손쉽게 위와 같은 효과들을 만들어 낼 수 있었다. 이 위젯을 조금.. 2024. 7. 21. [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. [Flutter] UI(4) - ExpansionTile, Listile 아이콘 앞에 위치시키기(animation) ExpansionTile Widget을 이용해서 ui를 만들던 중 tailing에 위치한 아이콘을 leading 위치로 옮겨서 표현해야 하는 일이 생겼다. 애니메이션 효과 없이 단순히 위치를 옮기려면 ExpansionTile의 tailing에 SizedBox()를 넣어주고, leading에 아이콘을 넣어주면 끝이나지만, 기존에 tailing이 갖고 있던 회전 에니메이션을 그대로 추가해주기 위해서는 다른 위젯들의 활용이 필요하다. 코드 class TreeView extends StatefulWidget { final String node; final List? children; final bool initiallyExpanded; const TreeView({ Key? key, required this.n.. 2023. 12. 25. 이전 1 2 3 4 다음
