[Flutter] 위젯의 구조화

위젯(Widget)

플러터에서 위젯은 UI의 기본이라 할 수 있다.

위젯별로 클래스를 만들고 위젯 안에 위젯을 만들고 쌓아가며 디자인을 하는 것이다.

 

MaterialApp(= Material Widget)

- Flutter 앱의 최상단에 선언해 사용

- 앱의 기본적인 구조와 디자인을 잡아주는 위젯

- MaterialApp 의 home 속성에 Scaffold 위젯을 넣어 페이지를 보여줌

- 테마를 지정할 수 있음

 

CupertinoApp

- MaterialApp 처럼 앱의 최상단에 선언해 사용

- iOS 디자인을 사용하는 위젯

- Android 환경에서는 일부 동작하지 않는 부분이 있거나 다르게 동작하는 게 있기 때문에 확인할 필요가 있음

 

MatrialApp vs CupertinoApp

- MatrialApp => Google 의 디자인

- CupertinoApp => Apple 의 디자인

 

Scaffold

- 각 페이지의 구조를 잡아주는 위젯(페이지 그 자체라고 보면 됨)

- AppBar, ButtonNavigation, FloatingActionButton 등의 구조를 제공

- 페이지의 주 요소는 body 속성에 선언해 사용함

- Scaffold 내에서 Row 나 Column, Container 등의 위젯으로 구조를 만들고 배치하면 됨

 

위젯의 구조도를 보자면 이런 느낌