Flutter는 선언형 UI를 갖는다.
'Everthing is a Widget' 구글에서 플러터를 소개하는 문구입니다. 플러터에서 화면에 보여지는 UI와 관련된 모든 요소는 위젯으로 구성되어 있습니다. 위젯은 현재 주어진 상태를 기반으로 어떤 UI를 구현할지를 정의합니다. 즉, 플러터는 선언형 UI로 구성되어 있습니다.
명령형 UI 와 다르게 선언형 UI의 경우 View를 실행 중 생성하지 않습니다. 처음 생성된(선언한) UI에 대하여 값에 따른 변화를 주는 방식으로 구성되어 있습니다. 그래서 값에 따른 변화로 인해 View의 오버헤드를 신경쓰지 않아도 되니 생산성이 올라갑니다. 제가 생각하는 선언형 UI는 다음과 같습니다. "미리 선언을 해두어 형태가 정해져 있고, 상태(값, State)에 따른 형태 변화가 일어난다."
목차
- 알아두면 좋은 지식
- Text 관련 Widget
- Button 관련 Widget
- Gesture 관련 Widget (모든 제스처를 매개변수로 제공)
- Design 관련 Widget
- Alignment(배치) 관련 Widget (가로 또는 세로로 배치, 겹치기, 나열)
정리 방법
A Widget (property, property)
- property
- property: 설정방법
- 설명
알아두면 좋은 지식
- 선언형 UI는 트리 구조이다. 자식 한 개를 갖는 child와 여러 명을 갖는 children이 존재한다.
- 플러터는 Material Design을 사용하기 때문에 프로젝트 위젯트리 상단에 MaterialApp 위젯을 사용한다. MaterialApp은 debugShowCheckedModeBanner 와 같은 기본 설정을 지정하는 최상단 위젯이다.
- Scaffold 위젯은 화면 전체를 차지하며 레이아웃을 도와주고 UI 관련 특수 기능을 제공하는 위젯이다. (MaterialApp의 골격을 잡아주는 위젯으로 AppBar, SnackBar, floatingActionButton 등의 기능을 사용 가능하다.)
- children의 리스트에 입력된 순서대로 화면에 그려진다.
Text 관련 Widget
- Text Widget (일반 텍스트)
- style: TextStyle(fontSize 크기, fontWeight 굵기, color 색)
- RichText Widget (회원이 아니신가요? Sign In)
- Paragraph class
Button 관련 Widget
- TextButton(onPressed, style, child): 텍스트만 있는 버튼
- OutlinedButton(onPressed, style, child): 테두리가 있는 버튼
- style: OutlinedButton.styleForm(foregroundColor: Colors.red, backgroundColor: ),
- FilledButton(onPressed, style, child): 속이 채워진 타원 버튼
- ElevatedButton(onPressed, style, child): 입체적으로 튀어나온 느낌의 버튼, 속이 채워진 네모 버튼, radius 조금 적용 됨
- IconButton(onPressed, icon): (글리프[glyph] 기반 아이콘 https://fonts.google.com/icons) 에 존재하는 icon들 사용가능.
- FloatingActionButton(onPressed, child): Material Design에서 추구하는 버튼 형태, Scaffold와 같이 사용
Gesture 관련 Widget: 모든 제스처를 매개변수로 제공, 특정 제스처가 입력됐을때 인지하고 콜백함수를 실행
- GestureDetector: 제스처 기능을 자식 위젯에서 인식하는 위젯
- onTap: 한 번 탭했을 때
- onDoubleTap: 두 번 연속 탭했을 때
- onLongPress: 길게 누르기
- onPanStart: 수평 또는 수직으로 드래그가 시작됐을 때
- onPanUpdate: 수평 또는 수직으로 드래그가 업데이트 될 때마다
- onPanEnd: 수평 또는 수직으로 드래그가 끝났을 때
- onHorizontalDragStart: 수평으로 드래그가 시작됐을 때
- onHorizontalDragUpdate: : 수평으로 드래그가 업데이트 될 때마다
- onHorizontalDragEnd: 수평으로 드래그가 끝났을 때
- onVerticalDragStart: 수직으로 드래그가 시작됐을 때
- onVerticalDragUpdate: 수직으로 드래그가 업데이트 될 때마다
- onVerticalDragEnd: 수직으로 드래그가 끝났을 때
- onScaleStart: 확대가 시작됐을 때
- onScaleUpdate: 확대가 업데이트 될 때마다
- onScaleEnd: 확대가 끝났을 때
디자인 관련 Widget
- Container: 자식을 담는 컨테이너 역할의 위젯 (배경색, 높이와 너비, 테두리 등의 디자인을 지정 가능)
- 배경 관련 UI를 변경할 때 Container 위젯을 가장 많이 사용한다.
- decoration: BoxDecoration( 스타일 적용
color: 배경 색상,
border: Border.all(width: 테두리 굵기, color: 테두리 색상),
borderRadius: BorderRadius.circular(16.0), )
- width: 너비
- height: 높이
- margin: EdgeInsets.all(16.0) // 위젯 바깥의 간격을 추가해주는 기능, 잘 사용되지는 않는다.
- SizedBox: 일반적으로 일정 크기의 공간을 공백으로 둘 때 사용 (높이와 너비를 지정하는 위젯, 디자인적 요소는 적용 불가능, const 생성자로 선언할 수 있어서 퍼포먼스 측면에서 효율적) - 지정을 하지 않은 속성은 0이 된다.
- height: , width: , child:
- Padding: child 위젯에 여백을 제공할 때 사용
- child:
- padding: EdgeInsets.all(16.0)
- EdgeInsets.all()
- EdgeInsets.symmetric(horizontal: , vertical: )
- EdgeInsets.only(top: , bottom: , left: , right: )
- EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0)
- SafeArea: 아이폰의 노치에 컨텐츠가 겹치지 않도록 지정하는 위젯, 기기별로 예외처리를 하지 않고도 안전한 화면에서만 위젯 그리기 가능
- top: true, bottom: true, left: true, right: true, child: Container()
배치 관련 Widget: 가로 또는 세로로 배치, 겹치기, 나열
- Row: 모든 위젯들을 가로로 배치
- Column: 모든 위젯들을 세로로 배치
- mainAxisAlignment: start, center, end, spaceBetween(사이만 간격 균등), spaceAround(사이 간격의 반만큼 왼쪽 오른쪽 배정), spaceEvenly(왼쪽 오른쪽도 전체 간격 고르게)
- crossAxisAlignment: start, center, end, stretch(뻣기, 과장: 반대축 최대한으로 늘리기)
- children: []
- Row는 가로를 최대, 세로를 최소로 사용
- Column은 세로를 최대, 가로를 최소로 사용
- 최대는 double.infinity, 최소는 하위위젯의 크기만큼 을 의미
- Flexible(유연한, 구부리기 쉬운): (flex: 1 (default value), fit: , child: )
- Row와 Column에서 사용하는 위젯이다.
- 제공된 child가 크기를 최소한으로 차지할 수 있게 한다.
- flex 매개변수를 이용해 각 Flexible 위젯이 얼만큼의 비율로 공간을 차지할지 지정한다. 비율만큼 공간을 차지한다.
- Expanded(확장된): (child: )
- Flexible 위젯을 상속한다. Flexible(fit: FlexFit.tight)
- FlexFit.loose: 자식 위젯이 필요한 만큼의 공간만 차지한다.
- FlexFit.tight: 자식 위젯이 차지하는 공간과 상관없이 남은 공간을 모두 차지한다. 최대한의 공간을 차지한다.
- Stack: 위젯을 Z축으로 쌓는 것처럼 겹치게 해준다.
- 플러터의 그래픽 엔진인 스키아 엔진은 2D 엔진이기 때문에 겹친 두께를 표현하지 못한다.
- 실제 Z축에 대한 정보는 없기 때문에 Stack에서 Flexible 은 사용할 수 없다.
- ListView: 리스트를 구현할때 사용, 입력된 위젯이 화면을 벗어나게 되면 스크롤이 가능
'Flutter > UI Widget' 카테고리의 다른 글
| [Flutter] PageView class (scrollable page list) (0) | 2023.04.06 |
|---|---|
| [Flutter] SystemChrome class (SystemUI Control) (0) | 2023.04.06 |
| [Flutter] BoxFit enum (0) | 2023.04.06 |
| [Flutter] StatelessWidget vs StatefulWidget (0) | 2023.04.06 |
| [Flutter] 로딩 위젯(ProgressIndicator) (0) | 2023.03.27 |