본문 바로가기
반응형

전체 글91

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.
Flutter - 3. Widget? Container, Text, Image, Button 앱의 UI를 구현할 때 가장 기본적인 것은 무엇일까? 개인적인 의견이지만, 텍스트, 이미지, 버튼이라고 생각한다. 앱은 사용자의 상태에 따라 적절한 문구와 이미지를 보여주고 버튼을 통해 액션을 유도하기 때문이다. Flutter에서 기본적인 UI를 구현하기 위한 Text, Image, Button에 대하여 알아보고, 이들을 담을 수 있는 Container에 대하여도 알아보자. 1. Container class BasicPage extends StatelessWidget { @override Widget build(BuildContext context) { return Container( ) } } StatelessWidget을 상속받는 BasicPage를 만들고 Container를 생성해본다. 꼭 Basi.. 2021. 1. 10.
Flutter - 2. Widget? StatelessWidget, StatefulWidget Flutter는 Widget으로 앱의 화면을 구성한다. Flutter는 데이터 또는 상태를 Widget으로 표현하는 어플리케이션이라고 보면 될 것 같다. (지극히 개인적인 이해) Widget은 크게 StatelessWidget과 StatefulWidget으로 나뉘며, Flutter 프로젝트를 생성하면 자동으로 만들어지는 main.dart를 보며 가볍게 이해해보도록 하겠다. 여기서 프로젝트 생성 시 작성되어 있는 주석은 모두 삭제하였다. 1. main.dart의 void main()과 MyApp void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. .. 2021. 1. 3.

티스토리툴바