Flutter의 기본 구조를 알아보자

플러터 앱을 만들 때 거의 모든 작업은 lib폴더 아래에서 진행된다.

제일 먼저 실행되는 파일은 lib/main.dart이다

 

main.dart파일의 구조를 처음부터 하나씩 살펴보자

 

1. Flutter material 라이브러리

import 'package:flutter/material.dart';

 

Flutter metarial 라이브러리를 import 하는 일이 가장 우선이다

이를 가져와야만 플러터 프레임워크에 포함된 모든 기본 위젯과 metarial 디자인 테마 요소들을 사용할 수 있기 때문

2. main()

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

앱 실행은 main()함수를 통해 시작된다

main함수를 실행하면 그 안의 runApp() 함수가 실행된다. 

runApp()은 플러터의 최상위에 위치하는 함수로 한 번만 호출하면 되고, 파라미터로 Widget을 받는다.

MyApp()은 직접 만든 커스텀 위젯으로 아무 이름이나 지정해도 상관없다.

runApp이 최초로 불러온 위젯이기에 MyApp은 위젯 트리에서 최상단에 위치하는 위젯이며 스크린 레이아웃을 최초로 빌드하는 역할을 한다.

3.MyApp()

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyFirst(),
    );
  }
}

모든 커스텀 위젯은 widget객체를 리턴하는 build 함수를 가지고 있다.

MaterialApp위젯은 위젯트리 두 번째에 위치하게 되고, 실질적으로 모든 위젯을 감싸고 있다고 볼 수 있다.

MaterialApp에는 세가지 옵션이 들어있다

- title : 앱을 총칭하는 이름. 최근 사용한 앱 등에서 이 이름으로 보임

- theme : 앱의 기본적인 디자인 테마를 지정

- home : 앱을 실행하였을 때 나타나는 첫 영역 (위젯)

4. MyFirst()

class MyFirst extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("First app")),
      body: Center(
        child: Column(
          children: [
            Text("Hello"),
            Text("Hello"),
            Text("Hello"),
          ],
        ),
      ),
    );
  }
}

Scaffold : 발판을 만들어주다

Scaffold 위젯은 앱 화면에 다양한 요소들을 배치하고 그릴 수 있도록 도와주는 빈 도화지 같은 역할을 한다

이 위젯이 없다면 그 어떤 요소도 앱 화면에 배치할 수 없다

- appBar : 타이틀 바 관련 위젯

- body : 타이틀 바 외 모든 위젯. 오로지 하나의 위젯만을 가진다

 

 

앱 실행 화면