Flutter Basic

main()에서 시작하기

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

위 함수는 나의 플러터 앱의 시작을 담당하는 메인 함수이다. 이 함수는 App이라는 위젯을 실행시킬 것이고, App 위젯을 이 앱의 root로 삼고 있다.

Widget

위젯은 레고 블럭과 같은 것이다. React로 따지면 컴포넌트 같은 것일까...
플러터에서는 이 위젯들을 합쳐서 앱을 빌딩하는 것이다.

세상에 정말 위젯들이 많고 개발자들이 만들어 둔 커뮤니티 위젯도 많다. 그러나 이걸 다 기억할 필요는 없고 필요할 때 찾아 쓰면 된다.

프로그래밍 언어의 입장에서 위젯은 class를 만드는 것과 같다.
위젯 메소드는 프로그램 UI에 보여줄 수 있도록 build 함수를 가져야 한다. build는 flutter가 실행하는 함수이다.

class App extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return 
  }

}

이것은 App 위젯의 코드이다. 이렇게 만들어진 위젯은 material 혹은 cuptertino라는 두 가지 선택지 중 하나를 리턴해야 하는데, material은 구글의 디자인 시스템, cupertino는 애플의 디자인 시스템이다.

플러터 자체가 구글이 만들었기 때문에 material 을 골라서 리턴해보겠다.

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

home은 material app의 위젯의 한 종류이다.
이렇게 하면 개끔찍 UI가 생성된다.

flutter의 다른 중요한 요소가 하나 있는데 바로 scaffold이다.scaffold는 내비게이션 구성을 도와주고, 버튼, 중앙 정렬 등 앱의 구조를 잡는 걸 도와준다.

따라서 home 안에 또 다른 위젯인 scaffold가 필요하다.

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

코드를 이렇게 바꾸면 좀 볼만해진다.
Scaffold를 써서 이 앱을 구조화 시킨 것이다.

여기에 appBar, Center 등의 위젯, 즉 클래스를 더해주면 리액트마냥 앱을 쌓아올릴 수 있다.

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으로 이루어져있고, 이것은 일종의 dart class이다.
위젯을 Scaffold로 구조화 시킬 수 있고, 이 구조에 widget을 넣고 쌓으면서 앱을 구성하게 된다.