본문 바로가기
반응형

Android57

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.
Flutter - 4. Widget? Row, Column 이전 포스팅에서 Text, Image, Button, Container에 대해 알아보았다. Container는 하나의 child를 가질 수 있어서 하나의 Text, Image, Button만을 표현할 수 있었다. 하지만 앱은 많은 Text, Image, Button들을 조합하여 개발된다. 이번 포스팅에서 Row, Column을 활용하여 다양한 구성요소로 화면을 구현 해 보자. 1. Row vs Column Row는 행 방향으로 Widget을 나열하며, Column은 열 방향으로 Widget을 나열한다. 각각의 생성자를 확인해보자. 생성자 파라미터의 구성을 보면 거의 동일한 것을 알 수 있다. 이 포스팅에서 다룰 파라미터는 세 가지다. MainAxisAlignment mainAxisAlignment Cro.. 2021. 1. 11.

티스토리툴바