반응형 개발/Flutter20 Flutter - 8. TodoList App (1) 기본 UI 구성하기 이전 포스팅에서 예고했던 대로, Flutter로 간단한 TodoList App을 만들어 볼 것이다. 이번 포스팅은 TodoListApp의 기본 UI를 구성해보도록 하겠다. 위와 같은 UI를 작성할 것이며, BottomNavigationBar의 아이템을 클릭하면 현재의 아이템도 변경되도록 작업 할 것이다. 위 UI를 기반으로 기능을 붙여나가는 방식으로 진행 할 것이다. 1. 루트 페이지 만들기 class TabItem { String _title; IconData _icon; TabItem(String title, IconData icon) { _title = title; _icon = icon; } String getTitle() => _title; IconData getIcon() => _icon; }.. 2021. 1. 18. Flutter - 7. Widget? Scaffold(AppBar, BottomNavigationBar, FloatingActionButton, Drawer) 전부는 아니지만, 많은 모바일 앱이 공통으로 띄는 형태가 있다. (주관적입니다.) 앱의 상단에 제목, 뒤로가기, 검색 등의 옵션이 있는 AppBar 앱의 하단에 페이지를 이동할 수 있는 BottomNavigationBar 앱 혹은 앱의 현재 페이지의 대표적인 행동을 할 수 있는 FloatingActionButton 그리고 앱의 컨텐츠 위 네 가지의 형태가 가장 많이 보이는 형태가 아닐까 싶다. 대충 이런느낌?! (카카오 Oven을 사용해서 이해를 돕기 위해 만들었다. 프로토타이핑은 어렵다 ㅠㅠ) 위의 형태를 Flutter에서는 아주 손쉽게 구현할 수 있도록 제공하고 있다. 제목에도 쓰여있듯, Scaffold가 바로 그것이다. 이 포스팅 전 까지 몇 개의 Widget을 보면서 Scaffold가 쓰였었는데,.. 2021. 1. 17. Flutter - 6. Widget? GridView 이번 포스팅은 ListView와 유사하지만 격자 형태로 Widget을 표현할 수 있는 GridView를 알아보자. 1. GridView를 생성하는 5개의 방법 GirdView를 생성하는 방법은 5가지가 있다. GridView GridView.builder GridView.count GridView.extent GridView.custom 이번 포스팅에서 다룰 것은 1~4번의 방법이다. 2. GridView 생성자 사용 GridView의 생성자의 파라미터는 ListView의 생성자와 거의 유사하다. 추가로, ListView와 GridView는 동일한 부모를 상속하고 있다. class GridView extends BoxScrollView { ... } class ListView extends BoxScro.. 2021. 1. 13. Flutter - 5. Widget? ListView 이전 포스팅에서 다양한 Widget들을 배치하기 위해 Row와 Coulmn을 다뤄보았다. Row, Column에 많은 Widget을 배치하게 되어 화면을 넘어가게 되었을 때, 스크롤이 되지 않고 잘리는 모습을 확인할 수 있다. 이번 포스팅은 많은 Widget을 리스트 형식으로 배치하고 스크롤이 가능한 Widget인 ListView에 대해 알아 볼 것이다. 1. ListView를 생성하는 4개의 방법 우선, ListView를 생성하는 방법은 4개이다. ListView ListView.builder ListView.separated ListView.custom 이 포스팅에서 다룰 것은 1~3번의 방법이며, 4번은 Delegate란 개념이 포함되어 있어 추후 포스팅으로 미루겠다. 1번은 명시적으로 ListVi.. 2021. 1. 12. 이전 1 2 3 4 5 다음
