flutter에서 중요한 개념 중 하나인 widget에 대해 설명하고자 한다.

1. 2. Widget

2. 목차
2.1. Flutter에서의 Widget
2.2. Widget 종류 및 동작 과정
2.3. 프로젝트 기본 코드
2.4. 자주 쓰는 Widget 정리
2.5. 프로젝트 수정 및 Hot reload

3. • 목 적 : Widget의 개념을 확인하고 스스로 만들어 볼 수 있다.

4. 2.1. Flutter에서의 Widget
- 독립적으로 실행되는 작은 프로그램
2.1.1. 일반적인 Widget
- 그래픽이나 데이터 요소를 처리하는 함수
- UI를 만들고 구성하는 모든 기본 단위 요소
2.1.2. Flutter에서의 Widget
- 눈에 보이지 않는 레이아웃 구성
e.g., Column(), Center()
≈ 𝒄𝒐𝒎𝒑𝒐𝒏𝒆𝒏𝒕

5. 2.2. Widget 종류 및 동작 과정
- 상태가 없는 위젯
2.2.1. Stateless Widget
- 이전 상호작용의 어떠한 값도 저장하지 않음
→ build 메서드는 한 번만 호출
- 변화가 필요 없는 화면을 구성할 때 사용
- 스크린 상에 존재만 할 뿐 아무것도 하지 않음
- 어떠한 변화를 유발시키는 value 값이 없음
e.g., 레이아웃
단축키: ‘stl’ + Enter

6. 2.2. Widget 종류 및 동작 과정
- State라는 데이터 변화를 감지하고, state가 변할 시 위젯을 rebuild 하는 위젯
2.2.2. Stateful Widget
- value 값을 지속적으로 추적 보존
- 사용자의 interaction에 따라서 모양이 바뀜
e.g., 버튼
단축키: ‘stf’ + Enter
- 주로 setState() {} 를 통해 state 변화를 감지
- immutable class와 mutable class 로 이루어져 있음

7. 2.2. Widget 종류 및 동작 과정
- 모든 것이 widget으로 구성되어 있기 때문에 tree 구조로 정리될 수 있음 (설계도)
2.2.3. widget tree
- 한 widget 내 다른 widget들이 포함될 수 있음
- 부모 위젯(parent widget) 과 자식 위젯으로 구성
- 부모 위젯을 widget container라고 부르기도 함

8. 2.2. Widget 종류 및 동작 과정
- Widget tree: 코드를 통해 구현한 tree
2.2.4. Flutter의 3개 tree
- Render tree: 실제로 그려진 화면에 대한 tree
Widget tree Element tree
- Element tree: Widget tree와 Render tree를 1대 1로 대응
Flutter 내에서 알아서 관리
build를 다시 해도, 객체만 만들어 질 뿐 화면을 다시 구성하는
데에는 큰 영향을 주지 않음
Flutter가 빠르고 효율적인 이유
코드를 통해 관리
Render tree

9. 2.3. 프로젝트 기본 코드
- 함수 명: main(), runApp() → 앞에 소문자
2.3.1. 코드 작성시 제목 대소문자 구별
- 클래스 명: MyApp(), Widget → 앞에 대문자
- 파일 명: main.dart, color_slider() → underbar
→ 안 지켜도 실행은 되지만 weak warning이 발생한다

10. 2.3. 프로젝트 기본 코드
2.3.2. 코드 분석 (1 / 2)
import 'package:flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'First App’,
theme: ThemeData(
primarySwatch: Colors.blue
),
home: MyHomePage(),
);
}
}
main함수가 run App()을 호출
모든 하위 페이지나 구성요소를
최 상단에서 담는 그릇
내용물 옵션

11. 2.3. 프로젝트 기본 코드
2.3.2. 코드 분석 (2 / 2)
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('첫 어플리케이션'),
),
body: Center(
child: Column(
children: [
Text('hello'),
Text('hello'),
Text('hello')
],
),
),
);
}
}
[] 안에 위젯 배치
페이지 위젯

12. 2.4. 자주 쓰는 위젯 정리
2.4.1. 위젯 분류
- Scaffold ***
- Container ***
- MaterialApp ***
- Column, Row ***
- AppBar ***
Basic
- Padding *
- SizedBox *
- Spacer *
- PageView *
- ListView/ListTile **
- Slider *
- Expanded ***
- Material *
View
- RaisedButton ***
- TextButton **
- OutlineButton **
- DropdownButton **
- IconButton **
- GestureDetector ***
- Navigator ***
- ElevatedButton ***
- Drawer **
- TextField ***
Action
- Text ***
- SelectableText *
- TextStyle **
- Image **
- Icon *
- BoxDecoration *
- ThemeData *
Style
*: 자주 사용하는 정도(주관적)

13. 2.4. 자주 쓰는 위젯 정리
2.4.2.1. Container Widget
2.4.2. 위젯 세부 정리
- 하위로 위젯을 하나만 넣을 수 있는 child를 속성으로 갖는다
(↔ Row, Column, ListView, Stack)
- child가 없을 경우 최대한의 공간을 차지하려고 한다
- Container가 child를 가지게 되면 그 크기로 줄어든다

14. 2.4. 자주 쓰는 위젯 정리
2.4.2.2. Column Widget & Row Widget (1 / 2)
2.4.2. 위젯 세부 정리
- 각각 세로, 가로축 방향으로 가능한 모든 공간을 차지함
- 하지만 반대 방향으로는 children의 가로축 길이에 맞춤
레이아웃 학습 사이트:
https://medium.com/flutter-community/flutter-layout-cheat-sheet-
5363348d037e

15. 2.4. 자주 쓰는 위젯 정리
2.4.2.2. Column Widget & Row Widget (2 / 2)
2.4.2. 위젯 세부 정리
아래서부터 쌓기 높이 맞추기
child: Column(
verticalDirection:
VerticalDirection.up,
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,

16. 2.4. 자주 쓰는 위젯 정리
2.4.2.3. Button Widget
2.4.2. 위젯 세부 정리
- 자주 쓰는 위젯으로 “TextButton”, “ElevatedButton”, “OutlinedButton”이 있음
- 플러터 이전에 쓰였던 “FlatButton”, “RaisedButton”, “OutlineButton”이 바뀐 위젯임
- 기존 버튼들은 각각 스타일을 변경해주어야 했지만 이제는 ButtonStyle 단일개체를
변경시켜주면 됨
- 아이콘 버튼을 만들고 싶을 때는 “IconButton”을 사용하면 됨
- 버튼 위젯은 버튼을 누른 후의 행동을 나타내는 “onPressed: (){}” 요소가 포함 됨

17. 2.4. 자주 쓰는 위젯 정리
2.4.2.4. Navigator Widget (1 / 3)
2.4.2. 위젯 세부 정리
- Route: 스마트폰상에서 보여지는 하나의 화면
- Stack이라는 자료구조 형식으로 모든 Route를 관리
→ 모든 Route는 Material App 안에 위치해야 실행이 된다.
SecondPage 처럼 제대로 포함 시키지
않을 경우 위젯이 동떨어져 있다

18. 2.4. 자주 쓰는 위젯 정리
2.4.2.4. Navigator Widget (2 / 3)
2.4.2. 위젯 세부 정리
- Stack을 관리하기 위해 Navigator.push와 Navigator.pop을 제공함
- 화면을 이동을 할 때 이전 화면을 없애고 새로운 화면이 나타나는 형식이 아니라 새로운 화면이
기존 화면에 덧씌워지는 형식임
- App bar를 생성하게 되면 이동한 화면에 자동으로 뒤로 가기 버튼이 생김

19. 2.4. 자주 쓰는 위젯 정리
2.4.2.4. Navigator Widget (3 / 3)
2.4.2. 위젯 세부 정리
import 'package:flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(title: 'Navigator’, home:
FirstPage(),);
}
}
class FirstPage extends StatelessWidget {
const FirstPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context2) {
return Scaffold(
appBar: AppBar(title: Text('First page'),),
body: Center(
child: RaisedButton(
child: Text('Go to the Second page'),
onPressed: (){
Navigator.push(context2, MaterialPageRoute(
builder: (context) => SecondPage()));
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext ctx) {
return Scaffold(
appBar: AppBar(
title: Text('Second page'),
),
body: Center(
child: ElevatedButton(
child: Text('Go to the First page'),
onPressed: (){
Navigator.pop(ctx);
},
),
),
);
}
}

20. 2.4. 자주 쓰는 위젯 정리
- widget tree에서 위젯의 위치를 다루는 것
2.4.3. Build Context란
-모든 위젯은 build method를 가지고 있음
- 그 build method의 타입은 Widget이고 인자 값으로 BuildContext를 가짐
Widget build(BuildContext context2) {
︙
onPressed: (){
Navigator.push(context2, MaterialPageRoute(
builder: (context) => SecondPage()));
},
︙
}
현재 위치

21. 2.5. 프로젝트 수정 및 Hot reload
- Hot reload: 앱의 state는 유지하되 Widget Tree만 재구성한다
2.5.1. Hot reload, Hot restart, Full restart
- Hot restart: 앱을 새로 시작하며 기존의 State를 잃게 된다
- Full restart: 전체 Swift, Kotlin 등을 모두 다시 컴파일 및 실행한다

22. 2.5. 프로젝트 수정 및 Hot reload
2.5.2. Hot reload 실행 방법
1 2
Ctrl + S
3
그냥 Chrome 화면을
클릭만 해도 된다...
4

23. 2.5. 프로젝트 수정 및 Hot reload
- 폰트 변경
2.5.3. Hot reload를 사용할 수 없는 경우
- Swift, Kotlin, Java 등의 Native Code를 수정할 경우
- 앱이 백그라운드에 너무 오래 있어 죽었을 때
- 컴파일 에러가 떴을 때
- Enumerated types을 클래스로 변경하거나 그 반대의 상황
- Generic types의 선언을 수정한 경우