Flutter 앱은 어떻게 시작될까?

 

"어...? 제가 아직 Flutter 앱이 어떻게 시작되는지 설명을 안 드렸네요?"
하지만 오히려 잘됐습니다.

 

본격적으로 setState()를 파고들기 전에,

Flutter 앱이 어떤 순서로 시작되고 화면이 만들어지는지부터 짚고 가겠습니다.

main() → runApp() → MaterialApp → Scaffold로 이어지는 기본 흐름을 이해하면,

이후의 상태 변경과 리빌드 타이밍이 훨씬 선명해집니다.

 

이미 여러분은 StatelessWidget, StatefulWidget을 익히셨기 때문에,
이제 앱이 어떻게 시작되고, 어디서 이 위젯들이 등장하는지 더 편하게 이해하실 수 있을 거예요.

 

그럼 시작해볼까요?

 

 

 

 

 

---

1. 앱의 시작은 항상 main()부터

모든 Flutter 앱은 아래 코드처럼 main()에서 시작됩니다.

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

• main() 함수는 앱의 진입점입니다.
• runApp()은 위젯 트리의 루트를 설정하는 함수로, 우리가 만든 MyApp을 렌더링합니다.

 

 

 

 

 

2. MyApp은 왜 StatelessWidget일까?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

• MyApp은 앱 전체를 감싸는 껍데기(Wrapper) 역할이므로,
  스스로는 상태를 가지지 않는 StatelessWidget으로 구성합니다.
• home으로 지정한 HomePage()에서부터 진짜 인터랙션이 시작되는 거죠.

 

 

 

 

3. MaterialApp의 역할

MaterialApp은 앱 전체에서 공통적으로 사용하는 테마, 라우팅, 로케일 등을 설정하는 컨테이너입니다.

주요 속성 요약:

속성	설명
title	앱 제목
theme	테마 정보 (ThemeData)
home	시작 화면 위젯
routes	이름 기반 라우팅 테이블
initialRoute	앱 실행 시 시작할 라우트 지정

 

대부분의 앱은 MaterialApp을 사용하며,
특별한 목적이 있을 때만 CupertinoApp을 씁니다.

자세한 내용은 뒤에서 더 설명드릴게요.

 

 

4. 앱의 실행 구조 정리

지금까지 설명한 내용을 한눈에 도식화하면 아래와 같습니다.

main()
└─ runApp()
    └─ MyApp
        └─ MaterialApp
            └─ home: HomePage()

→ 앱의 시작 흐름이 이렇게 이어지며, HomePage()부터 실제 유저 인터랙션이 시작됩니다.

 

 

 

5. 실무에서 자주 쓰이는 초기화 패턴들

5-1. 비동기 초기화

Firebase, SharedPreferences 등 외부 리소스가 필요한 경우 main()을 async로 선언하고 초기화 과정을 먼저 수행합니다.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

 

 

 

 

 

 

5-2. Build Flavor 구분

개발/운영/테스트 환경을 나누고 싶다면 main.dart 파일을 환경별로 나누거나 아래처럼 const 설정을 통해 분기합니다.

const String environment = 'dev'; // or 'prod'

👉 Build Flavor Setup Guide 참고

 

 

6. MaterialApp vs CupertinoApp

그렇다면 CupertinoApp은 언제 쓰일까요?

• 앱 전체를 iOS 스타일로 구성하고자 할 때 사용합니다.
• 대표적으로 CupertinoPageScaffold, CupertinoNavigationBar 등이 등장합니다.

하지만 요즘은 대부분 MaterialApp을 기본으로 사용하고,
내부에 필요한 UI만 Cupertino 스타일로 적용하는 방식이 일반적입니다.

→ 즉, iOS 앱도 MaterialApp으로 충분히 구현 가능합니다.

 

 

 

정리

• 앱은 main()에서 시작 → runApp() → MaterialApp → home 화면으로 흐름이 이어집니다.
• 앱 껍데기는 StatelessWidget, 실제 기능은 그 내부에서 StatefulWidget을 활용합니다.
• 실무에서는 비동기 초기화, 환경별 세팅 등도 함께 고려해야 합니다.

 

Flutter 앱이 처음 실행되는 구조를 이해했다면, 이제 더 복잡한 구조도 두려움 없이 마주할 수 있어요!

---