[flutter-03] 기본 코드 이해하기

1. Flutter 프로젝트 폴더의 구성

• pubspec.yaml : 앱을 만들 때 필요한 기능 및 의존성을 관리하는 파일
• android, ios 폴더 : 앱에 맞게 변환시켜 주는 폴더
• test 폴더 : 테스트 코드를 작성하기 위한 폴더
• lib 폴더 : dart 파일이 위치한 폴더로 모든 소스는 이 폴더에서 작동

2. 코드 기본 내용 이해하기 / 앱 페이지 기본 구성 공식화 해보기

• import 'package:flutter/material.dart'; : 구글에서 정의 한 디자인 가이드라인이 들어 있는 라이브러리입니다.
• void main() => runApp(MyApp()); : 기본적으로 실행하기 위해 꼭 필요한 runApp(커스텀 args)가 필요합니다. 위젯 트리의 첫 번째에 위치해 있습니다.
• class MyApp extends StatelessWidget { : 기본적으로 StatelessWidget이나 StatefullWidget을 상속 받은 클래스를 있어야 하며 앱의 뼈대가 되는 역할을 하는 클래스로 변화가 없는 StatelessWidget으로 정적인 위젯으로 만듭니다.
• 클래스명과 함수명 구분
  • main(), runApp() : 함수로 첫 글자는 소문자로 시작합니다.
  • MyApp() : 클래스로 첫 글자를 대문자로 시작합니다.
• ; : 세미콜론은 꼭 붙여주어야 합니다.
• return MaterialApp( : import 했던 flutter/material 을 사용할 수 있는 위젯으로 flutter 프레임워크가 제공하는 모든 기본 위젯과 디자인 테마를 사용할 수 있는 준비가 완료됩니다. 위젯트리는 두 번째에 위치하고 모든 위젯을 감싸는 위치에 있습니다.
• home: MyHomePage() : 정상적으로 실행되면 보여지는 경로
• class MyHomePage extends StatelessWidget { : 장적인 페이지를 만들기 위해 StatelessWidget을 상속한 MyHomePage()를 만듭니다.
• return Scaffold( : 앱 화면에 다양항 요소를 배치할 수 있는 빈 도화지 같은 역할을 하고 Scaffold가 없으면 어떤 요소도 배치할 수 없어서 꼭 필요한 위젯입니다.
• appBar: AppBar(), : 화면 상단에 있는 앱바를 생성할 수 있습니다.
• title: Text('First app'), : MaterialApp의 title는 앱의 총칭을 의미하고 AppBar의 title은 앱바에 표시할 내용입니다.
• child: Column( : 세로로 줄 세우기 위한 위젯입니다.

3. 첫 번째 Flutter 앱 만들기

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: MyHomePage(), // 정상적으로 실행되면 보여지는 경로
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First app'),
      ),
      body: Center(
        child: Column(
          children: [
            Text('Hello'),
            Text('Hello'),
            Text('Hello'),
            Text('Hello'),
          ],
        ),
      ),
    );
  }
}