이 글에서는 Flutter를 처음부터 빠르게 복습할 수 있도록, 가장 핵심적인 내용을 간단하게 정리해드릴게요!
🐣 Flutter란?
Flutter는 Dart 언어로 개발하는 크로스 플랫폼 프레임워크입니다.
하나의 코드로 iOS, Android, 웹, 데스크탑까지 모두 만들 수 있다는 게 가장 큰 장점이에요!
🔨 기본 구조
1. main() 함수
Flutter 앱의 진입점입니다.
void main() {
runApp(MyApp());
}runApp()은 앱을 실행시키는 함수이고, MyApp이라는 루트 위젯을 호출합니다.
2. StatelessWidget vs StatefulWidget
| 구분 | 설명 |
|---|---|
| StatelessWidget | 상태(state)가 없는 정적인 UI |
| StatefulWidget | 상태에 따라 UI가 바뀌는 동적인 UI |
예:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}3. MaterialApp & Scaffold
• MaterialApp: 앱 전체의 테마, 라우팅 등을 담당하는 위젯
• Scaffold: 실제 화면 구조를 만드는 틀 (앱바, 바디 등)
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('홈 화면')),
body: Center(child: Text('안녕하세요!')),
);
}
}🧱 주요 위젯 한눈에 보기
| 위젯 | 설명 |
|---|---|
| Text | 텍스트 출력 |
| Container | 레이아웃 박스 (색상, 크기, 정렬 등) |
| Column / Row | 세로 / 가로 정렬 |
| ElevatedButton | 버튼 위젯 |
| Image.asset / Image.network | 이미지 출력 |
🔥 Hot Reload란?
Flutter는 코드를 수정하고 저장하면 앱이 즉시 반영됩니다!
이걸 **핫리로드(Hot Reload)**라고 부르며, 강의할 때 매우 유용한 기능입니다.
🎓 예제: Flutter 기본 화면 만들기
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Flutter 강의')),
body: Center(child: Text('반가워요!')),
);
}
}✍️ 강의 꿀팁
• stl → StatelessWidget 자동완성
• stf → StatefulWidget 자동완성
• 실습은 작은 예제부터 시작해서 점점 응용해 나가는 방식 추천!
• 중간중간 Hot Reload로 결과 확인해보면서 흥미 유도하기
✅ 마무리
Flutter를 가르칠 때 가장 중요한 건 **‘직접 손으로 만들어보는 것’**이에요.
이 글이 기억을 되살리고 강의 준비에 도움이 되었기를 바랍니다 💙
필요하면 StatefulWidget, 버튼 클릭, 상태 업데이트, 페이지 이동 등도 다음 글로 정리해줄 수 있어!