2.0 Installation

---

시뮬레이터 설치하기

https://flutter-ko.dev/docs/get-started/install/macos#ios-설정

위에서 그냥 따라하면 된다..!

2.1 Dart Pad

---

그냥..웹에서도 할 수있다 플러터

2.2 Running Flutter

---

• code . 으로 terminal 에서 vsc 열기
  • https://www.freecodecamp.org/korean/news/how-to-open-visual-studio-code-from-your-terminal/

Extension 설치

• dart
• flutter

lib 폴더에 main.dart 가 있다.

widget Inspector

어느환경에서든 다 실행 잘된다..

완전 신기하다!!

2.3 Hello World

---

runApp(Widget)

widget : 블럭

위젯들을 합치는 방식으로 앱을 만듬

위젯겁나 많은데.. 다 외울 필요없이 그냥 필요할때 사용하면 됨

https://docs.flutter.dev/development/ui/widgets

레고 블럭같은 거라고 보면ㄴ 됨

그냥 class를 만드는거라고 보면됨

class App extends StatelessWidget{

}

이렇게 해야지 이제 클래스가 위젯이 된거임!

build : 화면에 보여줌

widget의 UI를 만듬

class App extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

build를 작성하면 된다.

Google : Material ⇒ 구글꺼니깐 이게 더 보기 나음
iOS : Cupertino

재료 선택을 위해서..!
위는 rootWidget이다.

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text("Hello World!"),
    );
  }
}

위와 같이 별로 안예쁜 화면이 나온다.

이는 하나의 규칙때문인데

그 규칙은 화면이 scaffold라고 하는 걸 가져야 된다는 것 = 화면 구조..!

모든 화면은 저게 필요함!!!

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Text("Hello World!"),
    ));
  }
}

위와같이 해주면..
이렇게 나온다

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

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: Text("Hello Flutter"),
          ),
          body: Center(
            child: Text("Hello World!"),
          )),
    );
  }
}

가운데 정렬까지 완료!

2.4 Recap

---

App은 그냥 Class였는데 위젯되기 위해서 Flutter Core Widget인 StatelessWidget을 상속받음

StatelessWidget

• 그냥 화면에 무엇인가를 띄어줌

Widget → Build Method를 구현해야함

Material

모든게 위젯이지만 Dart class를 사용하고 있다고 생각하면된다!!

역시 앱 개발은 이미 만들어져있는걸 가지고와서 사용하는 능력인것같다..

2.5 Classes Recap

---

• Widget부를때마다 인스턴스화 해줌!!
  • new쓰든 안쓰든 똑같음
• 생성자

class Player {
  String name;
  Player({required this.name});
}

void main() {
  var nico = Player(name: "Potato");
  runApp(App());
}

위와같이 named Parameter를 사용해준다.

required면 ?가 없음!!

• 에러뜰때마다 에러 코드 읽을줄아는 실력이 중요하다.