[ Flutter ] main() 코드 살펴보기

1. 프로젝트 구조

프로젝트의 구조를 살펴보면 여러 폴더들이 존재하는데 우리는 lib 폴더와  pubspec.yaml를 가장 많이 고칠 것이다.

---

2. pubspec.yaml

pubspec.yaml 은 gradle이나 maven처럼 패키지 모듈을 설치하고, 버전에 의존성 등을  관리해주는 설정 파일이다. 우리가 배포하는 앱의 패키지, 의존하는 외부 라이브러리, 개발용 라이브러리, 플러터 안에서 사용되는 assetsassets을 사용하고 관리해준다.

해당 파일에 dependencies에 외부 모듈 사용을 작성하고 난 후, 프로젝트 안에서 사용하기 위해서는 반드시 pub get을 하여 수정사항을 반영해 주어야 한다.

---

3. main.dart

초기 프로젝트에서 앱의 전체적인 동작 내용이 코딩된 부분이다. main.dart 는 크게 main메소드, stful 위젯,  stless 위젯 이렇게 세 가지 부분으로 나눌 수 있다.

1)  main 메소드

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

앱이 실행되면 가장 먼저  main() 메소드가 실행되며, 아래 작성된  MyApp() 클래스를 기동 한다.

---

2) MyApp (메인 앱)

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);		// Navigator 화면의 전환을 위해 약속된 Key 부분
  @override
  Widget build(BuildContext context) {		// UI코드가 작성되는 부분
    return MaterialApp(		//앱 테마와 home 화면에 연결
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

초기 프로젝트의 UI에 최상단에는 일반적으로 MaterialApp Widget이 사용된다.
가장 최상단인 해당 위젯에 앱의 전체적인 테마도 지정하며, 화면의 구성과, 라우팅, 초기화면을 연결합니다.
여기서는 home 옵션에 MyHomePage가 연결되어 있습니다.

---

3) MyHomePage 

이 부분에선 앱의 상태 관리에 대한 것이 명시되어 있어서 매우 중요하다.
앱의 상태 관리란 사용자의 행동에 따라 값, UI, 화면 등의 변화를 관리하는 것을 상태 관리라 한다.

그 상태를 즉각적으로 반영시켜 주는 기본적인 방법으로  StateFulWidget + setState()라는 메소드가 있으며, StateFulWidget 하위에서 setState 메소드에 의해 변화된 부분은 즉각적으로 rebuild되어 앱의 상태변화를 반영해준다.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Floation버튼을 누르면 연결된 _incrementCounter 메소드가 호출된다.  
_incrementCounter 메소드안을 보면 setState가 있고,
setState 메소드가 호출되면, 변화를 감지하여 앱의 화면이 순식간에 rebuild 되므로 앱 화면 사용자에 클릭에 바로 변경됨을 확인할 수 있다.