위젯이라 함은 UI를 묘사하는 다트의 클래스로서, 화면에 나타날 요소를 결정하는 데이터와 설정이다. 플러터에서는 모든 요소가 전부 위젯이다.
- 레이아웃: Scaffold, Stack, Row, Column
- 구조: Button, Toast, MenuDrawer
- 스타일: TextStyle, Color
- 애니메이션: FadeInPhoto, Transform
- 위치와 정렬: Center, Padding
각 위젯들을 Tree처럼 쌓아서 원하는 앱을 구현할 수 있다.
개인적으로 백엔드로써 이 부분이 가장 어렵다.. 위젯을 조립해서 앱의 한 화면을 그린다는게 굉장히 복잡하게 느껴진다.
노마드코더의 Flutter lecture를 듣고 있는데, 그 중 UI Challenge 강의에서 나오는 Widget들을 짚고 넘어가려고 한다.
StatelessWidget
상태를 관리할 필요가 없는 위젯. 위젯의 트리거 시점이 외부로부터 결정됨.
StatelessWidget을 상속하는 순간 build라는 메서드를 오버라이드해야하는데, 이는 위젯을 리턴하는 함수이다.
MaterialApp
그리게 될 모든 하위 페이지나 구성요소를 최상단에서 담는 그릇
return MaterialApp(
home: Scaffold()
);At least one of [home], [routes], [onGenerateRoute], or [builder] must be non-null.
Scaffold
앱의 최상위에서 주로 사용하며 전역적인 UI Layout을 구성하는데 사용한다.
발판이라는 뜻인데 찐으로 발판 역할을 해주는 것 같음. Title과 Button등 다양한 위젯을 넣을 수 있다.
SingleChildScrollView
자식을 하나만 갖는 스크롤 가능한 뷰
나의 경우엔 아래처럼 구성했었는데,
return MaterialApp(
home: Scaffold(
backgroundColor: const Color(0xFF181818),
body: SingleChildScrollView(Scaffold body에 들어가는 모든 요소가 스크롤 가능해지는 것 같았다.
Padding
안쪽 여백을 표현할 때 사용하는 위젯이다.
여기서 EdgeInsets가 함께 사용되는데, 다음과 같다.
EdgeInsets.all
네 방향 모두 같은 값 지정EdgeInsets.only
상하좌우 중 원하는 방향에만 값 지정 (default 0.0)EdgeInsets.fromLTRB
네 방향의 값을 각각 지정EdgeInsets.symmetric
상하와 좌우의 값 지정
Container
Single-child layout widget의 일종이다. child가 없는 경우 페이지 내에서 가능한 최대한의 공간을 차지한다.
Column
- mainAxisAlignment (세로 정렬)
- crossAxisAlignment(가로 정렬)
-> Row는 이 반대다.
Transform
child를 변환하는 위젯을 만든다.
Transform.flip
위젯의 중심점에 대해 child를 미러링하는 위젯을 만든다.Transform.rotate
중심을 기준으로 child를 회전시킨다.Transform.scale
2차원 축을 기준으로 scaling한다.Transform.translate
말 그대로 변환함. Offset을 넣어주는데 Offset(dx, dy) 기준으로 위치를 냅다 이동시킴.
Text
기본적으로 Text(String) 가장 많이 사용하며, TextStyle 위젯을 활용해 속성을 변경할 수 있다.
SizedBox
- child의 위젯 크기를 강제하기 위해
- row와 column 사이에 빈 공간을 넣기 위해
사용되는 아이이다.
