01. flutter 프로젝트 생성 & hello world

1. 개요

• 노마드코더 tooflix 강의를 수강하고, 해당 내용을 기록

2. 프로젝트 생성

$ flutter create [프로제트 명]

3. vscode 설정

• 효율적인 개발을 위해 아래 내용을 적용한다.

• command > open user setting 진입

• 아래 2가지 내용을 설정한다.

  • editor.codeActionsOnSave
  • dart.previewFlutterUiGuides

• 적용전

• 적용후 (save 할때마다 lint 적용 및 fix 내용을 자동적용해 준다.)

• flutterUiGuide 적용후 (위젯의 계층 구조를 editor 상에서 보여준다.)

4. hello world

1. flutter app 시작점

• lib/main.dart의 메인함수에서 시작된다.

• runApp의 메소드를 통해 루트 위젯을 실행한다.

• 루트 위젯은 아래 2가지가 있다

  • 머터리얼 : 구글의 머터리얼 디자인 가이드를 구현한 App
  • 쿠퍼치노 : 애플 iOS 디자인 가이드를 구현한 App

2. root App 구동

• runApp을 통해 실행될 클래스를 지정

• 실행될 클래스는 StatelessWidget, StatefulWidget등을 상속해야 한다.

• 상속한 클래스는 build 메소드를 override 해야 한다.

3. App 클래스 구조

• 루트 위젯 MaterialApp을 리턴한다.

• MaterialApp은 home 속성으로 Scaffold를 받는다.

• Scaffold는 머터리얼 디자인에 대한 개략적인 구조이다.

• 현재 구성은 아래와 같다.

  • appBar : 앱의 상단에 앱에 대한 설명을 나타낸다.

  • body: 실제 앱의 영역으로 현재 'Hello World' 텍스트를 출력한다.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

5. 소스

• 링크