Flutter 튜토리얼 4편: Widget 개념과 기본 위젯

Why#

NOTE

UI 요소마다 다른 클래스와 패턴을 사용하면 어떻게 될까요?
배워야 할 것이 너무 많아집니다.
그래서 Flutter는 “모든 것을 Widget 하나로 표현”합니다.

1
// 전통적 방식: 요소마다 다른 클래스
2
TextView textView = new TextView();
3
LinearLayout layout = new LinearLayout();
4
Animation animation = new Animation();

What#

NOTE

Widget은 Flutter에서 UI를 표현하는 기본 단위입니다.
화면에 보이는 모든 것이 Widget입니다.
심지어 보이지 않는 레이아웃과 패딩도 Widget이에요.

How#

TIP

Widget은 UI의 설계도라고 생각하면 됩니다.
한번 만든 Widget은 변경할 수 없습니다.
상태가 바뀌면 새로운 Widget을 만들어야 합니다.

1
// 모든 것이 Widget
2
Text('Hello')           // 텍스트도 Widget
3
Icon(Icons.star)        // 아이콘도 Widget
4
Padding(...)            // 패딩도 Widget
5
Center(...)             // 정렬도 Widget
6
ElevatedButton(...)     // 버튼도 Widget

Widget은 계층 구조를 이룹니다.

graph TD A[MaterialApp] --> B[Scaffold] B --> C[AppBar] B --> D[body: Center] C --> E[Text: 제목] D --> F[Column] F --> G[Text: 내용] F --> H[ElevatedButton]

Watch out#

WARNING

Widget은 한번 만들면 변경할 수 없습니다.
그래서 UI를 바꾸고 싶으면 새로운 Widget을 만들어야 합니다.
이게 Flutter의 핵심 개념입니다.

1
// 잘못된 방식: Widget 속성 직접 변경 시도
2
// text.value = '새 텍스트';  // 불가능
3

4
// 올바른 방식: 새 Widget 생성
5
Text('새 텍스트')

결론: Flutter에서 모든 UI 요소는 Widget이며, 불변 객체로 UI를 선언합니다.

Why#

NOTE

대부분의 UI는 한 번 그려지면 변경되지 않습니다.
예를 들어 앱 이름이나 아이콘은 바뀌지 않죠.
이런 경우에는 상태 관리가 필요 없습니다.

1
정적 텍스트, 아이콘, 레이아웃 → 상태 불필요
2
카운터, 입력 필드, 체크박스 → 상태 필요

What#

NOTE

StatelessWidget은 상태가 없는 Widget입니다.
생성자로 받은 값만으로 UI가 결정됩니다.
시간이 지나도 스스로 변하지 않아요.

How#

TIP

StatelessWidget은 build 메서드만 구현하면 됩니다.

1
class Greeting extends StatelessWidget {
2
  final String name;
3

4
  const Greeting({super.key, required this.name});
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return Text('안녕하세요, $name님!');
9
  }
10
}
11

12
// 사용
13
Greeting(name: 'Flutter')

build 메서드가 호출되는 시점은 다음과 같습니다.

시점	설명
최초 렌더링	Widget이 화면에 처음 그려질 때
부모 재빌드	부모 Widget이 재빌드될 때
의존성 변경	InheritedWidget 등 의존성이 바뀔 때

Watch out#

WARNING

build 메서드는 자주 호출될 수 있으므로 부작용(side effect)이 없어야 합니다.

1
@override
2
Widget build(BuildContext context) {
3
  // 잘못된 예: build에서 네트워크 호출
4
  // fetchData();  // 매번 호출됨!
5

6
  // 올바른 예: 순수하게 Widget만 반환
7
  return Text('Hello');
8
}

결론: 변경되지 않는 UI는 StatelessWidget으로 간단하게 구현합니다.

Why#

NOTE

카운터, 체크박스, 텍스트 입력 필드를 생각해보세요.
사용자가 뭔가를 하면 UI가 바뀌어야 합니다.
이런 경우에는 상태를 저장하고 관리해야 합니다.

1
// 버튼을 누르면 숫자가 증가해야 함
2
int count = 0;  // 이 상태를 어디에 저장?

What#

NOTE

StatefulWidget은 상태를 가지는 Widget입니다.
Widget과 State가 따로 분리되어 있습니다.
Widget이 다시 만들어져도 State는 그대로 유지됩니다.

How#

TIP

StatefulWidget은 두 개의 클래스로 구성됩니다.

1
// 1. StatefulWidget 클래스 (불변)
2
class Counter extends StatefulWidget {
3
  const Counter({super.key});
4

5
  @override
6
  State<Counter> createState() => _CounterState();
7
}
8

9
// 2. State 클래스 (상태 보관)
10
class _CounterState extends State<Counter> {
11
  int _count = 0;  // 상태 변수
12

13
  void _increment() {
14
    setState(() {
15
      _count++;  // 상태 변경
16
    });
17
  }
18

19
  @override
20
  Widget build(BuildContext context) {
21
    return Column(
22
      children: [
23
        Text('카운트: $_count'),
24
        ElevatedButton(
25
          onPressed: _increment,
26
          child: Text('증가'),
27
        ),
28
      ],
29
    );
30
  }
31
}

setState()⁴의 역할은 다음과 같습니다.

sequenceDiagram participant User as 사용자 participant Button as 버튼 participant State as State participant Framework as Flutter User->>Button: 클릭 Button->>State: _increment() State->>State: setState(() { _count++ }) State->>Framework: 재빌드 요청 Framework->>State: build() 호출 State->>Framework: 새 Widget 반환

Watch out#

WARNING

setState() 없이 상태를 변경하면 UI가 업데이트되지 않습니다.

1
void _increment() {
2
  // 잘못된 예: setState 없이 변경
3
  _count++;  // UI 업데이트 안 됨!
4

5
  // 올바른 예: setState로 감싸기
6
  setState(() {
7
    _count++;
8
  });
9
}

결론: 변경되는 상태가 필요하면 StatefulWidget을 사용하고, 반드시 setState()로 변경을 알립니다.

Why#

NOTE

StatelessWidget과 StatefulWidget 중 뭘 선택해야 할까요?
명확한 기준이 필요합니다.
잘못 선택하면 코드가 복잡해지거나 버그가 생길 수 있습니다.

What#

NOTE

선택 기준은 간단합니다. “시간이 지나면서 변하는 데이터가 있는가?”입니다.

How#

TIP

상황	선택	예시
고정된 텍스트, 아이콘	StatelessWidget	라벨, 로고, 헤더
사용자 입력 반응	StatefulWidget	버튼 클릭 카운터, 폼
애니메이션	StatefulWidget	로딩 스피너, 전환 효과
외부 데이터 표시만	StatelessWidget	API 데이터 표시 (상태는 부모에서)
내부 상태 관리	StatefulWidget	탭 선택, 확장/축소

결정 흐름도

flowchart TD A[Widget 생성] --> B{내부에서 변하는 데이터가 있는가?} B -->|없음| C[StatelessWidget] B -->|있음| D{상태를 이 Widget이 관리해야 하는가?} D -->|예| E[StatefulWidget] D -->|아니오| F[StatelessWidget + 부모에서 상태 전달]

Watch out#

WARNING

무조건 StatefulWidget을 사용하면 안 됩니다.
성능과 유지보수에 불리합니다.
가능하면 StatelessWidget을 사용하세요.

1
// 권장: 상태를 부모에서 관리
2
class Parent extends StatefulWidget { ... }
3

4
class Child extends StatelessWidget {
5
  final int count;  // 부모에서 전달받음
6
  const Child({required this.count});
7
  ...
8
}

결론: 기본적으로 StatelessWidget을 선택하고, 내부 상태가 필요할 때만 StatefulWidget을 사용합니다.

Why#

NOTE

Flutter에는 수백 개의 Widget이 있습니다.
하지만 자주 사용하는 기본 Widget만 알면 됩니다.
이것들을 조합하면 대부분의 UI를 만들 수 있습니다.

What#

NOTE

기본 Widget은 구조, 레이아웃, 표시, 입력의 네 가지 역할로 분류할 수 있습니다.

How#

TIP

구조 Widget

Widget	용도	주요 속성
Scaffold5	Material Design 기본 구조	appBar, body, drawer
AppBar	상단 앱 바	title, actions, leading
Container6	다목적 컨테이너	padding, margin, color, decoration

1
Scaffold(
2
  appBar: AppBar(title: Text('제목')),
3
  body: Container(
4
    padding: EdgeInsets.all(16),
5
    color: Colors.white,
6
    child: Text('내용'),
7
  ),
8
)

레이아웃 Widget

Widget	용도	주요 속성
Row7	가로 배치	mainAxisAlignment, children
Column8	세로 배치	crossAxisAlignment, children
Center	중앙 정렬	child
Padding	여백 추가	padding, child

1
Column(
2
  mainAxisAlignment: MainAxisAlignment.center,
3
  children: [
4
    Row(
5
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
6
      children: [
7
        Icon(Icons.star),
8
        Icon(Icons.star),
9
        Icon(Icons.star),
10
      ],
11
    ),
12
    Padding(
13
      padding: EdgeInsets.all(8),
14
      child: Text('별점'),
15
    ),
16
  ],
17
)

표시 Widget

Widget	용도	주요 속성
Text	텍스트 표시	style, textAlign, maxLines
Icon	아이콘 표시	size, color
Image	이미지 표시	fit, width, height

1
Column(
2
  children: [
3
    Image.network('https://example.com/image.png'),
4
    Text(
5
      '제목',
6
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
7
    ),
8
    Icon(Icons.favorite, color: Colors.red, size: 32),
9
  ],
10
)

입력 Widget

Widget	용도	주요 속성
ElevatedButton	돌출 버튼	onPressed, child
TextButton	텍스트 버튼	onPressed, child
IconButton	아이콘 버튼	onPressed, icon
TextField	텍스트 입력	controller, decoration

1
Column(
2
  children: [
3
    ElevatedButton(
4
      onPressed: () { print('클릭!'); },
5
      child: Text('확인'),
6
    ),
7
    TextField(
8
      decoration: InputDecoration(labelText: '이름'),
9
    ),
10
  ],
11
)

Watch out#

WARNING

Widget 카탈로그에는 수백 개의 Widget이 있습니다.
처음부터 다 외우려고 하지 마세요.
필요할 때 공식 문서를 찾아보면 됩니다.

1
자주 쓰는 Widget → 먼저 익히기
2
특수한 Widget → 필요할 때 찾아보기

결론: Scaffold, Container, Row, Column, Text 등 기본 Widget을 먼저 익히고, 나머지는 필요할 때 학습합니다.

Why#

NOTE

Flutter는 공식적으로 수백 개의 Widget을 제공합니다.
어떤 Widget이 있는지 알아야 직접 만들 필요가 없습니다.
카탈로그를 잘 활용하면 개발 시간을 크게 줄일 수 있습니다.

What#

NOTE

Widget 카탈로그는 용도별로 분류된 공식 Widget 목록입니다.
Material Design(Android)과 Cupertino(iOS) 스타일로 나뉘어 있습니다.
각각의 기능별로 세분화되어 있어서 찾기 쉽습니다.

How#

TIP

디자인 시스템별 분류

시스템	설명	예시
Material	Google Material Design 3	AppBar, FloatingActionButton
Cupertino	Apple iOS 스타일	CupertinoButton, CupertinoNavigationBar

기능별 분류

카테고리	설명	주요 Widget
Basics	필수 기본 Widget	Container, Row, Column, Text
Layout	배치와 정렬	Stack, GridView, ListView
Input	사용자 입력	TextField, Checkbox, Slider
Scrolling	스크롤 기능	ListView, SingleChildScrollView
Animation	애니메이션	AnimatedContainer, Hero
Styling	테마와 스타일	Theme, MediaQuery

Widget 찾는 방법

1. 공식 문서의 Widget catalog 검색
2. Widget of the Week 영상 시리즈 시청
3. Flutter DevTools의 Widget Inspector 활용

Watch out#

WARNING

같은 기능을 하는 Widget이 여러 개 있을 수 있습니다.
Android용과 iOS용이 따로 있기 때문입니다.
플랫폼에 맞는 Widget을 선택해야 일관된 UX를 제공할 수 있습니다.

1
// Android 스타일
2
ElevatedButton(onPressed: () {}, child: Text('확인'))
3

4
// iOS 스타일
5
CupertinoButton(onPressed: () {}, child: Text('확인'))

결론: Widget 카탈로그를 활용해서 필요한 Widget을 찾고, 플랫폼에 맞게 선택합니다.