Flutter #3 | Hello World ! ( +기초개념)

HyeonWooGa·2023년 10월 10일

flutter 입문

Flutter

목록 보기

3/4

Hellow World !

설치, 온라인 패널 소개, 실행, 기초적인 플러터 구현 방식까지

설치

Homebrew(Mac), Chocoalatey(Window)

본인은 Mac 이기 때문에 Homebrew 로 설치했습니다.
- Flutter 공식 홈페이지에 나와있는 방식보다 훨씬 간단하고 정확합니다.
그 외 안드로이드 스튜디오나 XCode, Simulator 는 React Native 학습시 설치 해둔 것이 있어서 이번엔 따로 설치하지 않았습니다.

온라인 패널 (Dart Pad)

개꿀

코드샌드박스나 여타 온라인 코딩 서비스와 다르게 다트, 플러터의 개발사인 구글에서 공식적으로 지원해주니 만족도가 훨씬 좋다.
다만 여러개의 파일을 생성하지 못 해서 한 파일에 모든 코드를 작성해야 한다.
- 클래스 내부코드 접기/펴기 기능으로 살짝 극복

실행

콘솔에서 프로젝트 생성 명령어는 flutter create <프로젝트 이름> 이다.

우선 VSCode 에 다트와 플러터 익스텐션을 설치한다.
Desktop(Mac/Window), iOS, Android, 브라우저(Chrome) 중에 원하는 실행환경을 선택한다.
- iOS, Android 실행환경의 경우 각각의 시뮬레이터들이 잘 설치 되어있어야한다.
코드를 작성한 후 VScode 익스텐션의 버튼 Start Debugging 을 클릭하면 디버깅, 컴파일, 빌드, 실행까지 지정한 실행환경에서 실행된다.
- 실행이 된 상태에서 코드를 수정한 후 저장하면 바로 실행환경(시뮬레이터)에 적용된다.
- 콘솔에 명령어를 입력할 필요가 없다. (개발자 친화적)
코드 작성 후 인자들에 반점을 잘 찍어주면 예쁜 포매팅과 간단한 주석까지 제공된다... (Crazy... 개발자 친화적)

Hello World 예시

코드

import 'package:flutter/material.dart';

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

// App 클래스; 우리 앱의 root Widget
// root Widget 은 두 개의 옵션 중 하나를 return 해야함
// 1. MaterialApp 이라는 Widget을 return
// 2. CupertinoApp 이라는 Widget을 return
//// material 과 cupertino 는 각각 구글과 애플의 디자인 시스템이다.
// 어떤 family 스타일을 사용할 지 flutter 에게 알려주는 것
// 추후 커스터마이징 해서 우리만의 스타일을 만들 것이지만
// root Widget 에서는 단순히 테마(family style) 을 위해 하나의 Widget을 선택 해야한다.
//// Flutter 는 구글에서 만든 것이기 때문에 일반적으로 MaterialApp 이 더 낫다.
// MaterialApp, Scaffold, AppBar, Text, Benter, TextStyle 은 전부 클래스(위젯)이고
// 아래서 코드를 작성할때 생성자를 Named Constructor Parameters 방식으로 사용한것이다
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Center(
          child: Text(
            'Hello World!',
          ),
        ),
      ),
    );
  }
}

실행 화면

기초 개념

Widget, Scaffold, Class, 반점

계약사항이 있다, build 메소드를 꼭 구현해야 한다.

Scaffold (비계)

화면의 구성 및 구조에 관한 것들을 가지고 있는 아주 멋진 Widget.
- 이번 Hello World 에선 appBar 와 body 사용

void main() 함수

root Widget(class) 을 실행하는 함수

Widget 의 여러 종류 중에 core Widget(s)을 상속 받는 자식 Widget
- core Widget 을 상속받기 전에는 그저 Class 이다.
- 보통 Hello World 시에는 가장 기본적이고 간단한 StatelessWidget 을 상속받는다.
- 필요한 메서드(대표적으로 build) 를 @Override 해서 작성한다.
기본 스타일 패밀리(테마)를 선택하는 것이 강제된다.
- MaterialApp(안드로이드), CuppertinoApp(iOS) 을 root Widget build 메소드의 반환 값으로 지정해야한다.
- 플러터 자체가 구글이 만든 크로스 플랫폼이다보니 MaterialApp 을 선택하는 것이 일반적으로 퀄리티가 좋다.
- 테마를 정하더라도 앱 마다 개성있게 커스터마이징 하는 것은 당연히 가능하다.