시작하기

windows에 설치하기

• chocolatey를 이용해 다음 순서대로 실행한다.

1. 아래 주소로 가서 chocolatey를 다운로드한다.

   • https://chocolatey.org/install#individual

2. powerShell을 관리자 권한을 이용해 실행한다.

3. Get-ExecutionPolicy을 입력한다.

   • 넘어가지 않고 restricted 라는 결과가 반환된다면 chocolatey에 있는대로 Set-ExecutionPolicy AllSigned 혹은 Set-ExecutionPolicy Bypass -Scope Process를 입력한다.

4. 이후 다음 명령어를 입력한다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Dart Pad 접속하기

• 아래 주소로 접속한다.
  - https://dartpad.dev/

실행하기

기본 코드

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
	// (1) runApp
  runApp(App());
}

// (2) widget
class App extends StatelessWidget {
  @override
  (3) build
  Widget build(BuildContext context) {
  	(4) 디자인 시스템
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(S
        title: Text('Hello Flutter!'),
      ),
      body: Center(
        child: Text('Hello World'),
      ),
    ));
  }
}

코드 해설

(1) runApp

runApp은 내장 패키지 함수로 반환값이 없고, widget을 받는다.

(2) Widget

widget

• widget은 화면을 구성하는 요소로 화면을 구성하는 모든 요소를 widget이라고 한다.
• widget을 조합하여 화면을 구성하고, widget을 조합하여 화면을 구성하는 것을 widget tree라고 한다.

statelessWidget

• stateless widget은 상태를 가지지 않는 core widget으로, 기본적인 widget이다.

Scaffold

• Scaffold는 우리 화면의 기본 구조를 제공하는 widget이다.
• Scaffold는 AppBar, Body, BottomNavigationBar, FloatingActionButton, Drawer 등을 제공한다.
• 모바일앱은 대부분 Scaffold를 사용하여 화면을 구성한다.

center

• child를 가운데 정렬해주는 Widget
• 상단에서는 child로 Text 위젯을 줬다.

  	```

  Center (
  child : Text("중앙정렬할 텍스트")
  ),

(3) build 메소드

• widget에는 build 메소드가 있고, 이를 이용해 다른 Widget 혹은 Widget tree를 반환한다.

(4) MaterialApp, cupertinoApp

디자인 시스템

• Material과 Cupertino는 모두 위젯 트리의 최상단에 위치해야 한다.
• 두 디자인 시스템 모두 'home' 속성을 가지며, 화면에 표시할 위젯을 지정한다.

Material App

• Material은 구글에서 제공하는 디자인 시스템이다.
• Material App은 Material 디자인을 사용하는 앱을 만들 때 사용하는 위젯이다.

  	```

  return MaterialApp(
  home: Text('Hello World'),
  );

Cupertino App

• Cupertino은 애플에서 제공하는 디자인 시스템이다.
• Cupertino App은 Cupertino 디자인을 사용하는 앱을 만들 때 사용하는 위젯이다.

나만의 디자인 시스템

• 나만의 디자인 시스템을 갖고 싶더라도 일단은 테마를 선택해야 한다.
• 즉, 앱의 시작점을 만들어서 기본 UI 설정과 재료를 넣어야 한다.
• Flutter는 구글이 만들었기에 Material이 기본이 더 어울릴 것이다.
• 그래서 많은 강의에서 Material을 사용한다.