Flutter APP의 구조

Widget Tree

Flutter는 위젯을 트리구조로 엮어 하나의 App을 완성시킨다.

위젯 내부에서 다른 위젯(child widget)을 위치시키고 그 위젯 내부에서 또 다른 위젯이 존재한다.

이렇게 WIdget이 서로 부모, 자식 관계를 가지며 UI를 만들어 간다.

Flutter가 App을 구성하기 위해서는 몇 가지 필 수 WIdget이 존재하는데, 이는 위젯트리 내에서 최상단에 존재하며 이 위에서 위젯을 구성하고 만들어간다.

1. Custom App

기본적으로 Flutter를 처음 시작할 때 MyApp으로 제공하는 전체 앱을 감싸는 껍데기이며 이 클래스에서 Material App (안드로이드) OR Cupertino App (iOS)를 리턴해준다.

2. Material App과 Cupertino App

Flutter에서 지원해주는 두 개의 디자인(안드로이드, iOS) 중 어느 디자인을 사용할지 지정한다.

1. Material App과 Cupertino App은 Flutter SDK에서 지원하며 이름은 커스텀 불가능
2. CustomApp이 이름이 있는 껍데기라면 Material App과 Cupertino App은 Flutter 앱에서 UI를 그릴 수 있도록 지원
3. Material App과 Cupertino App안에서 Flutter SDK에서 제공하는 위젯들을 전부 사용가능

3. Custom Page App

앱 내에서도 웹처럼 화면에 보이는 각각의 페이지가 존재한다.

1. 각 페이지의 이름을 정하고, class에서 Scaffold를 리턴
2. 한 페이지 내에서 환경과 이름을 정하는 역할 (모듈화)

4. 전체 구조(Tree구조)

Scaffold 내에서 위젯들을 부모, 자식 관계로 엮어가며 UI를 만들어 간다.

(View, Button, Slide 등 UI를 제작)