Flutter version : 1.22.6
VSCode version : 1.59.0
이 게시글은 상기한 버전을 기준으로 작성되었습니다.

머리글

새로 생성된 Flutter Project를 VSCode로 로드하면이런 화면이 나온다. (주석이 삭제된 상태)
이번 게시물에서는 Flutter Project의 Main.dart파일과 pubspec.yaml파일의 의미를 간단하게 설명한다.

1. Main.dart 설명

기본적으로 설치된 Android Emulator를 통해 Project를 실행하면,
이런 화면이 출력된다.
Main.dart 파일의 코드와 함께 분석해보자.

코드의 가장 상단부터

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

해당 프로젝트에서 별다른 설정을 하지 않는 이상, Main.dart파일의 main()함수가 시작점이며 MyApp()을 호출한다.

---

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  
  // Material디자인을 사용한 앱
    return MaterialApp(
      title: 'Flutter Demo',
      
	// ThemeData() 앱 전역에서 사용될 기본적인 테마 Data 설정
      theme: ThemeData(
      
	// primarySwatch 앱 전역에서 사용할 기본적인 색.
	// AppBar, Floating Button등의 Widget은 색상을 지정하지 않으면 견본색으로 대체됨.
        primarySwatch: Colors.blue,
        
        // visualDensity 모든 UI 요소의 시각적 밀도를 정의
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      
	// home은 이 앱의 가장 첫 페이지에 출력할 자식(MyHomePage)을 의미
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

---

// Widget은 무조건 StatelessWidget 혹은 StatefulWidget 둘 중 하나를 상속받는다.
// StatelessWidget는 화면의 변화가 없는 정적인 페이지를 표현할 때,
// StatefulWidget는 화면의 변화가 있는 동적인 페이지를 표현할 때 사용한다.
class MyHomePage extends StatefulWidget {

    // 부모 MyApp의 title을 상속받는다. 대신, {}안에서 인자를 받으면
    // (title: 'Flutter Demo Home Page')형식으로 인자의 이름을 통일해 전달해야 한다.
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
  // 동적인 페이지 표현을 위해 페이지에 변화가 있음을 알리는 setState()를 사용한다.
    setState(() {
      _counter++;
    });
  }
  
...
...

}

---

@override
  Widget build(BuildContext context) {
  
  // Scaffold는 Widget의 토대를 쌓는 요소로, Widget의 화면을 AppBar, Body, Bottom등으로 분할한다.
  // Scaffold가 없으면 어떤 Widget도 정상적으로 랜더링되지 않는다.
    return Scaffold(
    
    // AppBar 페이지에서 출력할 상단 제목 줄을 의미한다.
    // MyHomePage에서 받은 인자를 호출할 때는 widget.을 붙인다.
      appBar: AppBar(
        title: Text(widget.title),
      ),
      
      // Body는 AppBar밑의 앱의 내용을 표시할 부분을 의미하며, child를 통해 하나의 자식Tree를 가질 수 있다.
      body: Center(	// Center는 'child'안의 '자식'을 중앙정렬한다.
        child: Column(	// Column은 'children'안의 '자식들'을 세로로 배치한다.
          
      // 자식을 세로배치하는 Column의 Main(세로열) Alignment(정렬)를 center로 설정한다.
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[	// children이 Widget형식을 담은 List라는것을 암시.
          			// dart 제네릭에 의해 더는 <Widget>을 사용하지 않는다.
                    
      // Text는 String이나 int를 인자로 받아 페이지에 문자열로 표현한다.
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      // floatingActionButton은 페이지의 맨 앞의 레이어, 우측하단에 위치할 요소를 의미한다.
      floatingActionButton: FloatingActionButton(
      
      // onPressed는 floatingActionButton이 클릭되었을때 실행할 Function을 의미한다.
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        
        // floatingActionButton은 child를 통해 Button안에 Widget을 포함할 수 있다.
        child: Icon(Icons.add),
      ),
    );
  }

---

2. pubspec.yaml 설명

name: flutter_untitle
description: A new Flutter project.

# pub.dev에 패키지 배포 여부를 지정하는 부분.
publish_to: 'none'

# 패키지의 version을 의미한다.
# 앞의 1.0.0 부분은 개발자가 임의로 지정하는 앱의 version이며,
# 뒤의 +1 부분은 이 앱이 정식으로 build된 몇 번째 version인지 명시한다.
version: 1.0.0+1

# 앱에 사용된 dart의 sdk버전을 의미한다.
environment:
  sdk: ">=2.7.0 <3.0.0"

# 패키지 의존성을 명시하는 부분.
# 주로 pub.dev에서 외부 패키지의 의존성을 추가하기 위해 사용한다.
dependencies:
  flutter:
    sdk: flutter

  # cupertino_icons라는 외부패키지의 명시된 version과 호환되는 모든 version을 사용한다는 의미이다.
  cupertino_icons: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  # 앱에 커스텀 assets를 사용할지에 대한 유무
  uses-material-design: true

  # 앱에 사용할 커스텀 assets의 위치를 의미한다.
  # images/ 와 같이 폴더를 지정해도 되지만, 폴더에 파일이 존재하지 않는다면 build 과정에서 error가 발생한다.
  # 띄어쓰기 개수가 정확하지 않아도 error가 발생한다.
  
#ex)
#^^assets:
#^^^^-^images/
#^^^^-^logo/logo.png

  assets:
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg

  # 앱에 사용할 커스텀 font family assets를 설정한다.
  fonts:
    - family: Schyler
      fonts:
        - asset: fonts/Schyler-Regular.ttf
        - asset: fonts/Schyler-Italic.ttf
          style: italic
    - family: Trajan Pro
      fonts:
        - asset: fonts/TrajanPro.ttf
        - asset: fonts/TrajanPro_Bold.ttf
          weight: 700