[Flutter] main.dart 구조 분석

기본 프로젝트를 생성하면

lib/main.dart 파일이 생성되어있음을 확인할 수 있다.

 

이 main.dart 파일을 확인해보자.

 

main 함수 

 

Line 1

flutter/material.dart 는 flutter UI를 구성하는 material design 위젯의 대부분 클래스가 포함되어있는 패키지로

main.dart 파일에서 사용하기 위해 import 하고 있다. 

 

 

 

Line 3 ~ 5

Flutter 앱을 실행하면 main() 함수를 가장 먼저 실행하게 된다. 

 

main 함수 내부에서는 

runApp함수에 화면에 표시할 위젯인 MyApp 클래스를 함께 전달한다. 

 

 

 

 

runApp 함수

 

runApp함수는 실행할 위젯을 전달받으며

전달받은 위젯을 화면에 연결하는 역할을 한다. 

 

main 함수는 Dart 언어에서 진입점인 것이고,

runApp 함수는 Flutter 에서 진입점이라고 이해하면 된다. 

 

 

 

 

MyApp 클래스 

Line 7

MyApp 클래스는 StatelessWidget을 상속하고 있다. 

상태를 변경할 수 없다는 의미로 한번 UI가 그려지면 변하지 않는다. 

 

 

Line 8

Navigator를 이용한 화면 전환을 위한 키가 명시되어있다.

 

 

Line 11 ~ 12

모든 위젯은 또 다른 위젯을 리턴하는 build 함수를 가지고 있으며, 

이 함수를 통해 리턴된 위젯을 그려준다.

 

 

Line 13 ~ 20

MaterialApp()은 일반적으로 최상단에 사용하여 앱의 전체적인 테마, 초기화면 등을 설정한다.

• title
  • web인 경우, 탭에 나타나는 글자
  • app인 경우, 사용 앱이나 최근 앱을 누를 때 표시되는 글자
• theme : 프로젝트의 전체 테마 설정 
  • primaryColor : elements의 기본 색상 
• home : 초기 화면 으로 현재 MyHomePage를 초기화면을 설정하고 있다. 

 

 

 

 

MyHomePage 클래스

 

Line 23

MyHomePage 클래스는 StatefulWidget을 상속하고 있다. 

state에 따라 화면이 변화하는 위젯이다. 

 

 

Line 29

StatefulWidget이 빌드되면 즉시 createState함수가 호출된다. 

 

createState함수는 위젯 클래스와 state클래스를 연결하는 함수로

반드시 State 타입의 객체를 리턴받아야하기 때문에

_MyHomePageState 클래스를 통해 State<MyHomePage>를 리턴받는다.

 

갑자기 _MyHomePageState 클래스가 등장하여 생소할텐데

Flutter에서 StatefulWidget은 위젯클래스와 state클래스가 나눠져있다.

현재 보고 있는 MyHomePage이 위젯클래스이고, createState를 통해 생성되는 _MyHomePageState가 state클래스이다.

 

 

 

 

_MyHomePageState 클래스

 

Line 41

_MyHomePageState 클래스는 State객체인 State<MyHomePage>을 상속하고 있다. 

 

 

Line 64

Text 위젯에 _counter 변수 값을 넣기 위해 앞에 $를 붙여야 한다. 

 

 

Line 45 ~ 47

버튼을 누르게 되면 71번 줄에 의해 _incrementCounter 함수가 호출된다.

내부의 setState함수를 통해 _counter 값이 변화하고

이 변화가 감지되어 화면이 변경됨을 확인할 수 있다.