플러터(Flutter) 입문

1. 앱 구동의 시작 main 함수

 

메인함수

main.dart 라는 다트 파일 제일 상단에 보시면

 

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

 

라고 적혀있는걸 보실수 있습니다.

이 함수가 플러터 앱실행의 시초입니다.

 

main 이라는 것은 함수의 이름인데

이건 우리가 지은것도 아니고, 플러터에서 이렇게 지정한겁니다.

내장함수라고 하죠. 

앱을 실행하면 main 이라는 함수를 찾아 실행합니다.

 

 

어쨋든 main 함수의 내부를 보시면 runApp이라는 또다른 내장함수가 나옵니다.

main이라는 함수가 실행되면 runApp이라는것이 실행되는거죠,

그안에보면 MyApp() 이라고 적혀있습니다.

여기서 MyApp() 은 클래스 이름입니다. 이건 바꿔줄수 있습니다.

 

2.MaterialApp

 

MyApp 이라는 클래스를 찾으려고하니 마침 바로 아래에 있네요.

 

거기 내용을 보니 

 

return MaterialApp 이라고 적혀있고 무슨 내용들이 적혀있습니다.

 

무슨내용인지 몰라도 대략 영어를 보면

MyApp 이라는 클레스는 MaterialApp 이라는 형태가 된다. 라고 이해할수 있습니다.

MaterialApp 이라는 것은 우리가 앞으로 짜게될 모든 하위 페이지나 구성요소를 최 상단에서 담는 그릇 입니다.

 

마치 어떤 봉지에 

장난감, 공책, 시계 등등을 다 담아두고

봉지 앞면에 '내물건' 이라고 적어두는 겁니다.

 

 

MaterialApp은 여러가지 옵션을 가지고있습니다.

내물건 이라고 이름을 지을수있는 title

그리고 내용물 옵션이 home 

이런것들이 있는데

필수가 내용물입니다.

 

예제앱에서는 MaterialApp에 3가지 옵션이 들어가 있습니다.

 

title

theme

home 

 

이렇게 들어있네요.

여기서 필수적으로 필요한 옵션이 내용물인 home 입니다.

 

home에 들어갈 내용은 페이지 입니다. 제일 먼저나오는 페이지 이죠.

 

 

이 페이지 라는것은 Scaffold 라는 형태를 가집니다.

 

예제앱에 home 옵션 부분을 보면 MyHomePage 라고 적혀있습니다.

 MyHomePage라는 클래스를 home으로 쓰겠다는 겁니다.

제일 첫페이지 인것이죠. 페이지는 Scaffold 라는 형태를 가진다고 했으니,

한번 확인해보겠습니다.

 

맨 아래에 보니 return Scaffold 라고 적혀 있는게 보입니다.

그런데 이상합니다. 맨아래에 return Scaffold 라고 적혀있긴하지만

 

이 return Scaffold 를 가지고 있는 클래스의 이름은 MyHomePage 가 아니라 _MyHomePageState 라는 놈인것이죠.

하지만 MyHomePage 라는 class의 내용을 보면  _MyHomePageState라는 놈이랑 무슨 관계가 있다 라는 이해하기 힘들지만 어쨋든 그런내용들이 있습니다.

 

어쨋든 우리가 알아야 하는 내용은

 

1. 앱을 가장 상단에서 감싸고 있는 봉지는 MaterialApp 이다.

2. MaterialApp에서 가장먼저 나오는 페이지는 home 이다.

3. 페이지는 Scaffold 라는 형태를 가진다.

 

라는 것입니다.

 

그리고 앞으로 우리는 이런것들을 위젯 이라고 부릅니다.

뭘요?

MaterialApp 

Scaffold 

뭐 이런것들이요.

하나의 개념덩어리 들이죠.