[Flutter 개념] 03. main.dart 작성하는 법

 

 

 

 

 

🙆‍♂️main.dart 작성

---

텅 비어있는 main.dart입니다. 먼저 dart를 import 해줘야 합니다.

 

🚀import

---

1. i를 누르고 import ' ';를 소환

 

2. 작은따옴표 안에 fm을 작성 후 package:flutter/material.dart 를 자동완성 (그냥 입력해도 상관없습니다.)

 

완성

 

 

🚀main()

---

1. 함수가 끝나면 다른 값을 반환하지 않는다고 main()함수를 void로 선언합니다.

 

2. fat arrow(=>)를 사용해서 runApp 함수를 호출합니다.

 

3. runApp()함수는 인자값으로 MyApp()이라는 클래스를 호출해서 실행합니다.

 

 

🚀stateless widget

---

1. stl을 눌러서 Flutter Stateless Widget을 자동완성 되도록 합니다.

 

이렇게 자동완성이 됩니다. 이제 저 class 와 extends 사이의 공간에 class 이름을 작성해줘야 합니다.

 

3. class 이름은 앞에 runApp함수로 호출한 MyApp으로 설정하면 됩니다.

만약 호출한 class이름을 다른 이름으로 하고 싶다면 다른 이름으로 하고 이 stateless 위젯 class 이름도 맞춰주면 됩니다.

 

 

마지막으로 return 위젯은 MaterialApp으로 설정해줘서 MaterialApp에서 제공하는 기능을 사용할 수 있게 합니다.

 

 

🚀MaterialApp

---

먼저 title 속성으로 title을 지정해줍니다.

 

 

그리고 theme 속성으로 앱의 전반적인 테마를 지정할 수 있습니다.

ThemeData()로 감싸고 primarySwatch를 통해서 이 색을 위주로 하겠다는 것을 정의합니다.

 

home 속성을 통해서 홈페이지를 정의합니다.

 

 

 

🚀MyHomePage

---

 

위에서 홈페이지로 사용하겠다고 한 MyHomePage위젯을 stateless 위젯으로 선언합니다.

이제 여기서 레이아웃을 구성하면 홈페이지로 구성한 레이아웃이 나오게 됩니다.

 

return 위젯으로 Scaffold 위젯을 사용합니다.

Scaffold 위젯은 이 게시물에 한번 정리해서 따로 정리하지 않겠습니다. 

 

여기서도 title을 사용하느데 위에서 MaterialApp에서 사용한 title과 다릅니다.

MaterialApp에서 사용한 title은 어플의 이름이고

Scafoold의 AppBar title은 앱 상단 바에 나오는 글자를 표시하는 것입니다.

 

 

확인해보면 이렇습니다. 자세한 내용은 생략하겠습니다.