Flutter의 기본흐름 구조

1. 앱 시작점: main() 함수

• 모든 Flutter 앱은 main() 함수에서 시작
• 여기서 runApp()을 호출해 최상위 위젯을 실행

 

void main() { runApp(MyApp()); }

---

2. 최상위 위젯: MaterialApp / CupertinoApp

• 앱의 전반적인 설정(테마, 라우팅, 네비게이션 등)을 담당
• 보통 MaterialApp(안드로이드 스타일)을 많이 쓴다

class MyApp extends StatelessWidget { 

@override Widget build(BuildContext context) 

{ return MaterialApp

( title: "Flutter Demo", theme: ThemeData(primarySwatch: Colors.blue), home: HomeScreen(), ); } }

 

 

3. 화면 구조: Scaffold

• 실제 화면을 구성하는 뼈대 역할.
• AppBar, body, floatingActionButton 같은 영역 제공.

Scaffold( appBar: AppBar(title: Text("홈 면")),

body: Center(child: Text("Hello Flutter")),

floatingActionButton: FloatingActionButton( onPressed: () {}, child: Icon(Icons.add), ), );

 

---

4. 위젯 트리 (Widget Tree)

• Flutter의 UI는 트리 구조로 이루어짐
• 모든 요소가 위젯이며, 부모-자식 관계로 연결

예시 트리:

 

MaterialApp └── Scaffold ├── AppBar └── Body └── Center └── Text

---

5. Stateless vs Stateful

• StatelessWidget
  • 상태 변화가 없는 정적 UI
  • 예: 단순한 텍스트, 아이콘
• StatefulWidget
  • 상태(State)에 따라 UI가 바뀌는 동적 UI
  • setState() 호출 시 build()가 다시 실행되어 UI 갱신

class CounterApp extends StatefulWidget 

{ @override _CounterAppState createState() => _CounterAppState(); } 

 

class _CounterAppState extends State<CounterApp> 

{ int count = 0; void _increment() { setState(() { count++; }); } 

 

@override Widget build(BuildContext context) 

{ return Scaffold( body: Center(child: Text("카운트: $count")), 

floatingActionButton: FloatingActionButton( onPressed: _increment, child: Icon(Icons.add), ), ); } }

 

---

6. 상태 변화 흐름

1. 사용자가 버튼을 누름
2. onPressed 같은 이벤트 핸들러 실행
3. 내부 변수 변경 (count++)
4. setState() 호출 → Flutter가 UI를 다시 그림 (rebuild)
5. 화면이 새로운 값으로 갱신됨

---

7. 전체 실행 흐름 요약

1. main() → runApp() 실행
2. MaterialApp → 앱 전체 설정 (테마, 라우팅)
3. Scaffold → 화면 뼈대(AppBar, body 등)
4. build() 함수 실행 → 위젯 트리 구성
5. 상태(State)가 변하면 → setState() → build() 재실행 → UI 업데이트

---

정리

• 앱 시작: main() → runApp()
• 앱 전체 설정: MaterialApp
• 화면 구조: Scaffold
• UI 구성: 위젯 트리
• 상태 변화 처리: StatefulWidget + setState