Flutter의 기본 구조

0. 프로젝트 생성

플러터에서 많이 쓰이는 IDE들은 안드로이드 스튜디오, VSCode, IntelliJ 등이 있다. 안드로이드 스튜디오 기준으로 이 글을 작성하려고 한다. 플러터로 프로젝트를 생성하려면 플러터 SDK(Software Development Kit) 즉, 개발 도구 모음이 필요하다. 또한 프로젝트를 생성할 때의 프로젝트 이름은 영어 소문자로 작성하되, 공백은 "_"로 표기한다.

 

1. main.dart

플러터는 Android, iOS, Linux, MacOS, Web, WIndows 등을 다루는 크로스 플랫폼 프레임워크이므로 기본적인 폴더 구조가 매우 복잡하다. 하여 기본적인 구조부터 학습하려고 한다. 모든 플러터 프로그램은 flutter_basic/lib/main.dart의 main() 함수에서 시작한다. 처음 들어가면 플러터는 기본 앱이 생성되어 있기에 복잡할 것이다. 일단은 다 지우고 시작하자.

 

1) material.dart

기본적으로 import는 해당 main.dart 파일에서 다른 패키지나, 파일을 불러올 때 사용한다. material.dart는 플러터 앱을 구성하는 기본적은 머터리얼 디자인의 여러 가지 위젯을 가지고 있는 패키지이다.

import 'package:flutter/material.dart';

 

2) void main() 함수

여러 가지 언어에서도 그렇겠지만, Dart로 이루어진 Flutter 프로그램을 구동할 때 가장 먼저 실행되는 함수이다.

void main(){}

 

3) runApp()

void main()이 Dart의 기본적인 시작 지점이라면, runApp은 플러터 앱을 시작할 때 사용하는 함수이다. 이 함수에 실행할 위젯을 전달하면 된다. 다른 것의 사용법은 차차 익히고, MaterialApp() 위젯은 플러터 앱의 최상위 위젯이며, 앱의 기본적인 구조와 테마를 정의하는 역할을 한다. home:은 MaterialApp의 속성 중 하나로, 앱의 홈 화면을 정의하는 역할을 한다. home에는 위젯이 들어가야 한다. Scaffold는 기본적인 뼈대를 제공하는 위젯이다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "My App",
    home: Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      backgroundColor: Colors.black12,
      body: Center(
        child: Text(
          'Hello Flutter',
          style: TextStyle(color: Colors.white, fontSize: 40.0),
        ),
      ),
    ),
  ));
}

 

 

 

 

기본적으로 main() 함수가 없으면 코드 컴파일, 즉 실행조차 되지 않는다. 하지만 main 함수는 있고 runApp()이 없거나, runApp() 내 아무런 코드가 없는 경우에는 실행은 되나 아무런 위젯도 보이지 않는다. 즉, 앱에 위젯을 띄우려면 무조건 runApp() 안에 포함되어야 한다.

import 'package:flutter/material.dart';

void main(){}

 

 

참고로, 아무 지점에 오른쪽 클릭 후, Reformat Code with 'dart format'를 클릭하면 코드 정리를 해준다.

 

 

4) Hot Reload

위에서 보던 것처럼 runApp에 위젯 클래스를 넣는 것이 아닌, 직접적으로 위젯 코드를 넣게 되면 플러터의 매우 편리한 기능 중 하나인 Hot Reload를 사용하지 못하고 내용 수정 시마다 Hot Restart를 클릭해서 확인해야 한다.

 

main 함수는 앱의 진입점을 정의하고, 앱이 처음 시작될 때 한번 호출되고 종료된다. 하여 runApp에 직접 적으면 핫 리로드가 동작하지 않는다. 해서 기본적으로 플러터는 main에서 첫 실행되는 클래스를 정의하고 실행한다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "My App",
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        backgroundColor: Colors.black12,
        body: Center(
          child: Text(
            'Hello Flutter',
            style: TextStyle(color: Colors.white, fontSize: 40.0),
          ),
        ),
      ),
    );
  }
}

이후, Hot Restart를 한 번 실행하면 이후부터 저장 시 바로바로 화면에 적용되는 Hot Reload 기능이 적용된다.