[노마드코더] #2 Hello Flutter

Installation

• Flutter 설치 = SDK 설치 (공통) + 시뮬레이터 설치 (목적에 따라 다양)
• 공식문서에 나오는 방법보다 chocolatey 패키지 매니저를 사용하면 더 편리함
• chocolatery 설치 후 관리자 권한 powershell에 choco install flutter 입력
• Windows의 경우 Android / Windows / Web 시뮬레이터 설치 가능

 

chocolatery 설치 (Windows 기준 / for Individual)🔽

Installing Chocolatey

 

SDK 설치 성공!

powershell 재시작 후 flutter doctor 입력 시 Flutter 개발 환경 진단 가능

Android 시뮬레이터 설치🔽

Windows install

 

DartPad로 SDK 설치 없이 웹에서 Flutter 실행 가능 (+ Samples 코드)🔽

DartPad

 

Running Flutter

터미널에 flutter create [프로젝트 이름] 입력해 프로젝트 생성

유용한 VS Code Extensions 설치

• Dart: 에디터에 Dart 언어 및 디버깅 환경을 지원 (필수)
• Flutter: 에디터에 Flutter 프레임워크 및 디버깅 환경을 지원 (필수)
• Error Lens: 에러가 발생한 경우 코드 상에 시각적으로 표현

 

.dart 파일 선택 시 우측 하단에 {}Dart와 시뮬레이터가 뜬다면 성공!

시뮬레이터를 선택하고 lib/main.dart 경로에서 우측 상단 Start Debugging 실행

Hello World

• Flutter는 Widget(= 레고 블록)을 합치는 방식으로 개발
• Widget을 다 외우려 하지 말고 필요에 따라 찾아보며 사용

 

Flutter 공식 Widget catalog🔽

Widget catalog

 

[lib/main.dart]

import 'package:flutter/material.dart';

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

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

• flutter SDK의 3가지 core Widget 중 하나를 extends해 class를 Widget으로 사용
• core Widget을 상속받은 class는 UI를 반환하는 build 메소드의 override 구현이 강제됨
• MaterialApp(구글) or CupertinoApp(애플) 디자인 시스템 중 Widget의 기본 UI 선택
• UI는 필수적으로 Scaffold(= 구조)를 가져야 하며 Widget은 또 다른 Widget을 포함 가능
• Widget 클래스 Named Parameter의 인수로 new를 생략한 Widget 클래스 인스턴스 삽입
• Text와 같은 일부 Widget은 Positional Parameter를 함께 사용해 인수 처리

 

본 내용은 노마드코더의 'Dart 시작하기'를 바탕으로 작성되었습니다