hello

runApp 은 import 'package:flutter/material.dart';
이 패키지에 있는 함수로 아무것도 리턴하지 않는다
Widget 타입의 매개변수가 필요하다

widget

리액트의 컴포넌트 같은 느낌이다
모든 것은 위젯으로 이루어져 있고
각 위젯을 합쳐서 화면을 구성한다

플러터는 기본으로 제공하는 위젯이 많다

하나의 위젯을 생성하는 것은
하나의 클래스를 만드는 것과 같다
class 를 이용하여 위젯을 생성하는데
위젯으로 만들 클래스는 flutter SDK에 있는
3개의 코어 위젯중에 하나를 상속받아야 한다

StatelessWidget

플러터의 가장 기본적인 위젯이다
상태가 없는 위젯이니까 UI 그림만 그려주는 위젯이 아닐까 생각된다

import 'package:flutter/material.dart';

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


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

위젯은 build 메소드를 꼭 구현해야 한다
build 메소드는 해당 클래스가 리턴하는 것을 UI로 그려주어 위젯을 만드는 역할을 한다
build 메소드는 Widget을 리턴해야 한다

main 함수의 runApp 에 넘겨주는 위젯은 해당 앱의 root 위젯이 된다

root widget

root 위젯은 두 개의 return 을 해야한다
1. material app: 구글의 디자인 앱
2. cupertino app: 애플의 디자인 앱

어떤 패밀리 스타일을 지정할지

만약 커스터마이징 된 디자인의 앱을 선보이고 싶더라도
둘 중 하나의 디자인 테마를 선택해야만 한다
해당 테마에는 기본 설정된 UI 디자인이 들어있다

플러터는 구글에서 만들었기 때문에
material 스타일이 조금 더 보기 좋게 구성되어있다
테마에서 구글 느낌을 빼는 것은 그리 오래 걸리지 않는다

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Text('hello world'));
  }
}

MaterialApp() 메소드에는 home 페이지에 대한 부분이 설정되어야 한다

플러터 개발의 또 다른 룰은
화면이 sacffold 를 가져야 한다는 것이다
화면 구조를 가져야 한다는 것
네비게이션 바, 중앙 정렬 등
바디 등 모두 위젯이다

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'),
      ),
    );
  }
}

MaterialApp 은 home을 받는데
home에는 Scaffold 클래스(위젯) 넣어준다
Scaffold 위젯은 appBar, body 등의 영역을 갖는데
appBar 는 위젯으로 또 다른 위젯을 받고
body도 위젯을 받는다

만약 text를 가운데에 배치하고 싶다면
또 다른 위젯을 사용해야 한다

컴포넌트 합성 같은 느낌이랄까..

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'),
      )
          ,
      ),
    );
  }
}