Flutter 강의 준비 2편 — StatefulWidget과 상태 관리 💡
지난 글에서는 Flutter의 기본 구조와 StatelessWidget에 대해 알아봤습니다.
이번 글에서는 StatefulWidget, 즉 상태가 있는 위젯을 사용해서 UI가 변하는 앱을 만들어볼 거예요.
🧠 StatefulWidget이란?
StatefulWidget은 화면에 변화가 생길 수 있을 때 사용하는 위젯이에요.
예를 들어, 버튼을 눌렀을 때 숫자가 올라가는 카운터 앱은 StatefulWidget으로 만들어야 해요.
✅ 기본 구조
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
@override
Widget build(BuildContext context) {
return Container();
}
}✨ 꿀팁: stf라고 입력하면 이 구조가 자동완성돼요!
🎯 실습 예제: 버튼 클릭하면 숫자 증가
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _count = 0; // 상태 값
void _increaseCount() {
setState(() {
_count++; // 상태 변경
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('StatefulWidget 예제')),
body: Center(
child: Text(
'$_count',
style: TextStyle(fontSize: 40),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _increaseCount,
child: Icon(Icons.add),
),
);
}
}🔍 설명
| 코드 | 설명 |
|---|---|
| int _count = 0; | 상태(state)로 사용할 변수 선언 |
| setState(() { … }) | 이 함수 안에서 상태를 바꾸면 UI가 다시 그려짐 |
| FloatingActionButton | 플로팅 버튼 (하단에 뜨는 동그란 버튼) |
🤓 상태 관리에서 중요한 포인트
• setState()를 호출해야만 화면이 갱신됨!
• 상태 변수는 State<T> 클래스 안에 선언해야 함
• 상태는 변경되지만, Widget은 기본적으로 불변(immutable)임
✍️ 강의 팁
• 직접 _count를 0에서 10까지 눌러보게 하면서 변화를 체험하게 해주기
• 상태 변경 없이 눌렀을 때 아무 일도 안 일어나게 해보고 setState()의 중요성 설명
• Text에 다른 문구를 넣어보며 다양한 응용 유도
📦 확장 아이디어
• 숫자 말고 텍스트 바꾸기
• 버튼 2개 만들어서 + / – 기능 만들기
• 상태를 기반으로 색상, 이미지, 아이콘 변경해보기
✅ 마무리
StatefulWidget은 사용자와 상호작용하는 Flutter 앱을 만들 때 꼭 필요한 개념이에요.
setState()만 잘 이해해도 앱 만들기의 50%는 배운 거예요!
다음 편에서는 페이지 이동(Navigation), 간단한 입력 받기(TextField),
앱의 구조를 더 깔끔하게 구성하는 방법까지 이어서 소개해볼게요.