플러터 신규 프로젝트 파일 분석하기

플러터 프로젝트를 생성하면, 버튼을 누르면 누른 횟수가 메인화면에 뜨는 프로젝트가 생성이 됩니다.

 

저는 이 버튼 기능을 제거하고 우선 어떤 순서대로 코드가 실행되는지부터 알아보기 위하여

 

버튼 기능은 제거하였습니다. 

 

 

아래 코드가 버튼기능을 제거한 전체 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'main page',
            ),
          ],
        ),
      ),
    );
  }
}

 

 

 

1.  import 'package:flutter/material.dart'; 

-> Flutter 의 Material 라이브러리를 가져옵니다. 

Material 디자인은 구글이 개발한 디자인 시스템입니다, 플러터에서 표준으로 사용된다고 합니다. 

Material 디자인을 사용하지 않고 다른 방법으로도 (Cupertino 디자인으로) 개발이 가능하다고 하지만 표준 디자인을 사용하겠습니다.

 

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

-> 앱의 진입점 입니다. runApp 함수는 주어진 위젯을 앱의 루트 위젯으로 설정합니다. 

Myapp 위젯을 루트 위젯으로 설정.

 

3. class MyApp extends StatelessWidget {...} 

-> MyApp 클래스는 StatelessWidget을 상속하는 위젯입니다.

StatelessWidget는 상태를 가지지 않고, 한 번 그려진 후에는 변하지 않습니다.  (final 같은 느낌이네요)

 

4. Widget build(BuildContext context) {... }

-> build 메서드는 위젯을 생성하는 메서드입니다. 

이 메서드에서 렌더링되어야 하는 위젯의 구조를 정의. (앱 화면의 디자인과 구조를 만드는 부분)

 

5. MaterialApp 

-> Material 디자인을 사용하는 앱을 생성하는 위젯, 앱의 제목과 테마를 설정하고, 홈 화면으로 MyHomePage 위젯을 설정.

 

6. class MyHomePage extends StatefulWidget {... } 

-> StatefulWidget 을 상속합니다. 상태를 가지는 위젯으로, 상태가 변경될 때마다 UI가 업데이트가 됩니다.  3번과 정 반대되는 클래스입니다.

 

7. _MyHomePageState : '_MyHomePageState' 클래스
-> MyHomePage 위젯의 상태를 나타냅니다. State <MyHomePage>를 상속합니다.

 

8. Widget build(BuildContext context) {... }

-> _MyHomePageState 클래스의 build 메서드는 홈 화면을 생성하는 역할을 합니다. Scaffold를 사용하여 앱의 기본 뼈대를 구성하고, AppBar와 Center 위젯을 사용하여 화면을 구성합니다.

4번에서 Widget build를 하였는데 여기서 또 하는 건,  StatefulWidget과 StatelessWidget는 각각 별도의 클래스에 정의되어야 하기 때문에 그렇습니다. 

 

Scaffold는 Fultter에서 사용되는 Material 디자인의 레이아웃 구성 요소 중 하나입니다. 

앱의 기본적인 레이아웃 구조를 제공하며, 일반적으로 앱의 화면에 사용된다고 합니다.

 

 

 

이렇게 각 코드가 어떤 작업을 하는지 분석해 보았고 이제 실행순서를 알아보겠습니다.

 

 

1. main() 함수가 실행됩니다.  앱의 진입점이며 runApp() 함수를 호출하여 MyApp 위젯을 실행합니다.

 

2. MyApp 위젯의 build() 메서드가 호출됩니다. 이 메서드는 MaterialApp을 반환하고, MaterialApp은 홈 화면으로 MyHomePage 위젯을 가지고 있습니다.

 

3. MyHomePage 위젯 생성자가 호출되어 MyHomePage 위젯이 생성됩니다.

 

4. MyHomePage 위젯의 createState() 메서드가 호출되어 _MyHomePageState 객체를 생성하고 반환합니다.

 

5. _MyHomePageState 객체의 build() 메서드가 호출되어 홈 화면의 UI가 생성됩니다. 

-> Scaffold 와 AppBar, Center 위젯 등이 생성됩니다.

 

6. 홈 화면이 렌더링되고 앱이 화면에 나타납니다.