Flutter - 2.3 Hello World

나는 flutter 설치 하는게 생각보다 조금 복잡해서, 설치할 때마다 강의를 찾아서 따라하는 편이다(2.0, 2.2)... 편하다...
만약 설치하기 귀찮다면, dartpad.dev에 들어가면 설치 없이도 할 수 있다.(하지만, 새 파일을 만들 수 없다.)

완전히 기초부터 시작할 것이다.

flutter는 Widget들로 이루어져 있다.
여기서 Widget은 레고 블럭이라고 생각하면 되는데, flutter에서는 이 Widget들을 합치는 방식으로 앱을 만든다.
그래서 flutter를 보면 알겠지만 전부 Widget 떡칠이다.

아래는 main 함수로 App이라는 이름의 Widget을 run한다는 뜻이다.
그래서 'App'은 우리 앱의 'root Widget'이다. -근본 위젯-

void main() {

  runApp(App());

}

그럼 이제 App이라는 이름의 Widget을 만들어야 한다.
그런데, 우리는 dart를 공부하면서 Widget을 들어본 적도 없다.
어떻게 만들까?

class App extends StatelessWidget {

}

이렇게 하면 된다. 그러니까, class로 선언한 다음에 StatelessWidget  을 상속받으면 되는 것이다.
정확히는, flutter sdk에 있는 3개의 core Widget중에서 하나를 extends로 상속 받아야 한다.

그리고 모든 Widget은 build 메소드를 구현해야 한다.
build는 Widget의 UI를 build(만드는) 것이다.(그냥 실행하는 역할이라고 생각하면 될듯?)

build를 치고 탭을 하면 자동완성이 된다. 다음과 같이 말이다.

class App extends StatelessWidget{

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    throw UnimplementedError();

  }

}

override는 dart 포스팅을 참고하자.
https://want-to-work-life-balance.tistory.com/entry/Dart-Inheritance%EC%83%81%EC%86%8D

Dart - 4.8 Inheritance(상속)

이제 build를 살펴보자.
build도 Widget을 return해야 한다.
그리고, build는 BuildContext 타입의 context라는 parameter를 받아온다. 하지만, 일단 지금은 무시하자.

앱의 root Widget은 두 개의 옵션 중 하나를 return해야 함.(기본 UI 설정과 같은 재료를 선택해야 함.)

1. MaterialApp -> 구글의 디자인 시스템
2. CupertinoApp -> 애플의 디자인 시스템(iOS)

flutter는 구글꺼라서 보통 MaterialApp이 더 이쁘다고 한다...

그러면 MaterialApp을 사용한다고 하고... 
flutter에는 Scaffold가 있어야 한다는 규칙이 있다고 한다.
Scaffold는 구글에 검색하면 볼 수 있다시피, 그냥 '틀'이다.
그 틀을 flutter에도 적용한다고 생각하면 될 듯 하다

참고로, 각 class위에 마우스를 올리면 어떤 것으로 구성할 수 있는지 확인할 수 있다.
MaterialApp안에는 'home'이 대표적이다. 그냥 앱 딱 들어가면 보이는 홈이라고 생각하면 될 듯 하다.
그 홈을 Scaffold로 틀을 만들고, 'Scaffold' 안에는 'appBar'와 'body'가 대표적이다.
(참고로, Scaffold안써도 flutter는 돌아가긴 한다. 그런데 진짜 못생겼다.)

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('Hello flutter!'),

        ),

        body: Center(

          child: Text('Hello world!'),

        ),

      ),

    );

class 하나 쓸 때마다 comma를 적어주자. 그러면 VSCode가 이쁘게 정리해준다.
title은 앱 위쪽에 표현하고, body는 중앙에 표시한다.
참고로, Text는 말 그대로 Text표현하는 거고, Center는 중앙배치 한다는 뜻이다.

아래는 내가 강의를 들으면서 적은 모든 것들이다.

import 'package:flutter/material.dart';

void main() {

  // 아래 runApp은 import 'package:flutter/material.dart'; 에서 import 된 것임

  // void runApp(Widget app)

  // Widget이란? -> 레고 블럭

  // Widget들을 합치는 방식으로 앱을 만듦.

  // 앱의 UI를 만드는 레고 블럭

  runApp(App());

  // 모든 화면, 버튼 등등 모든 것들이 App이라는 이름을 갖는 Widget으로부터 올 것임.

  // 이 말은 즉 'App' Widget은 우리 앱의 root라는 것임.

}

// Widget으로 만들기 위해서는...?

// flutter SDK에 있는 3개의 core Widget중에 하나를 extends(상속)받아야 함.

// 여기서는 StatelessWidget을 상속받음.

 

 

// 모든 Widget은 build 메소드를 구현해야 함.

// build 메소드가 뭐임? -> Widget의 UI를 build(만드는) 것

class App extends StatelessWidget {

  // @override : 부모 class에 이미 있는 method를 override(덮어씌우는 것)

  // 부모 class에 있는 이미 있는 method 없애버림 -> 아래에 있는 함수로 대체

  @override

  // build도 Widget을 return해야 함.

  // build는 BuildContext 타입의 context라는 parameter를 받아옴. -> 일단 지금은 무시하자.

  Widget build(BuildContext context) {

    // 앱의 root Widget은 두 개의 옵션 중 하나를 return해야 함.(기본 UI 설정과 같은 재료를 선택해야 함.)

    // 1. MaterialApp -> 구글의 디자인 시스템

    // 2. CupertinoApp -> 애플의 디자인 시스템(iOS)

    // flutter는 구글꺼라서 보통 MaterialApp이 더 이쁘다고 한다...

    return MaterialApp(

      // flutter에는 scaffold가 있어야 한다는 규칙이 있음.

      // 이 앱의 홈에다가 scaffold를 넣자.

      home: Scaffold(

        // class 하나 쓸 때마다 comma를 적어주자. 그러면 VSCode가 이쁘게 정리해준다.

        appBar: AppBar(

          title: Text('Hello flutter!'),

        ),

        body: Center(

          child: Text('Hello world!'),

        ),

      ),

    );

  }

}