[기초] Flutter Widget, Layout

Widget

Flutter UI 는 매우 중요하다

Flutter UI의 구성은 Widget으로 구성한다

Widget Tree

Widget을 블록과도 같기 때문에 

수평, 수직 관계를 나타내는데 중요한 개념이다

Stateless / Stateful Widget

상태관리는 프론트엔드에서 중요한 요소이다

Flutter에서는 이를 Stateless / Stateful Widget으로 나누었다

말그대로 less에서는 정적페이지 구성, ful에서는 동적페이지 구성에 쓰인다

 

기본 위젯

MaterialApp

꼭대기 위젯

최상위 위젯

앱의 전반적인 구조와 동작을 정의

 

Scaffold

앱 구조

appBar

body 등.. 시각적 레이아웃 구조 배치

 

Layout

Container

기본 박스형 위젯

 

Column

여러개의 위젯을 top down 형식으로 배치

Row

여러개의 위젯을 left right 형식으로 배치

 

Flexible

여러개의 위젯을 비율로 배치 가능한 위젯

자식 위젯이 필요한 만큼의 공간만 차지

Expanded

여러개의 위젯을 비율로 배치 가능한 위젯

사용 가능한 모든 공간 차지

 

Stack

여러개의 위젯을 겹겹이 쌓는 위젯

뒤에 있는 위젯일 수록 맨 앞에 위치한다

 

Constraint

제약조건

보통 위젯은 부모위젯의 조건을 따라간다

Constraint 로 제약조건 부여

minWidth

maxWidth

minHeight

MaxHeight

https://docs.flutter.dev/ui/layout/constraints

Understanding constraints

 

 

 

 

 

Flutter는 많은 위젯을 알고 있으면 개발하기 쉬워진다.

 

많은 위젯 보기

https://docs.flutter.dev/ui/widgets

Widget catalog