[노마드코더: Flutter 로 웹툰 앱 만들기] #2.3 Hello World

 

Everything in flutter is widget.

위젯을 이용해서 어플을 만들고

Flutter 웹사이트에 가면 이렇게 위젯 카탈로그도 확인해볼 수 있다

외울 필요 없이 뭐가 있는 지 확인하면 된다 
사람들이 만든 위젯을 98.9프로 거의 다 찾을 수 있다

기억해야할 필요 없다. 

위젯이 되기 위해서는 StatelessWidget을 extend 해야 한다.
지금은 BuildContext context 무시하자, 나중에 설명해주겠음

플러터 관점에서 위젯은 UI를 구성하는 블럭 같은 것이다 

프로그래밍 관점에서는 클래스  

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return C

    // 두 가지의 return이 있을 수 있는데  
    //1) material application - 구글
    // - MaterialApplication must be better because degooglifize your application
    // Widget을 시작하는 포인트가 필요하기 때문에 MaterialApp을 사용하도록 하자  
    //2) cupertino application - ios 
    // 커스터마이즈 디자인을 원한다면 starting point로 
    // 

  }
}
// 위젯이 되기 위해서는 StatelessWidget을 extend 해야 한다. 
// 지금은 BuildContext context 무시하자, 나중에 설명해주겠음

Cupertino / Material 두 가지를 return 할 수 있는데

두 가지의 return이 있을 수 있는데
    1) material application - 구글
    - MaterialApplication must be better because degooglifize your application
    Widget을 시작하는 포인트가 필요하기 때문에 MaterialApp을 사용하도록 하자
    2) cupertino application - ios
    커스터마이즈 디자인을 원한다면 starting point로

Cupertino와 Material의 차이는 보다시피 이렇다고 한다.

 

MaterialApp에 마우스를 올리면 이러한 정보들을 확인할 수 있다 그리고 그 중에서 우리는 home이라는 <위젯>을 작성해본다. 

home: Text('Hello world'), 를 작성하는데 
파란 줄은 조금 있다가 고쳐볼 예정이다.

아주 밋밋하다

이러한 코드에 구조화시키고 싶을 때 
Scaffold를 이용해야 하는데 Scaffold는 아래 그림과 같은 구조체를 의미한다. 

return MaterialApp(
        home: Scaffold(
      // appBar: AppBar(),
      body: Text('Hello world!'),
    ));

이제 Scaffold 안에 body Text 입력하니 이런 모습이 보인다

그리고 AppBar에 title Text 입력하면 아래와 같이 앱 상단의 바가 위치하는 것을 볼 수 있다

 return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('Hello Flutter!'),
      ),
      body: Text('Hello world!'),
    ));

body 안의 Hello world!를 가운데 정렬하고 싶을 때는 그저 

Center() 위젯으로 감싸기만 하면 된다! (child: 는 덤)

---