플러터(Flutter)에서 제공하는 데모 앱은 샘플 코드와 다양한 위젯을 활용하여 기본적인 프로젝트 구조를 확인 할 수 있습니다. 이번 글에서는 데모 앱을 통해 플러터의 원리를 이해하고 효율적인 개발을 할 수 있도록 플러터 프로젝트 구조에 대해서 작성하였습니다.

플러터 프로젝트 구조

New Flutter Project으로 앱을 처음 생성하면 lib폴더에 main.dart라는 파일이 생성된다. 이 파일은 앱의 진입점이 되는 파일로 앱이 실행되면 가장 먼저되는 Dart 코드를 포함하고 있다.

main 함수

앱의 진입점인 main()이다. 여기서 runApp 함수를 호출하여 앱을 실행하며 이 함수는 주어진 Widget을 화면에 표시한다.

import 'package:flutter/material.dart';

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

MyApp 클래스

class MyApp는 앱의 루트 위젯을 정의하는 클래스이다. StatelessWidget을 확장하며, 앱 전체에서 공통으로 사용되는 테마 및 환경 설정을 설정한다.

StatelessWidget의 중요한 특징은 한 번 생성되면 상태가 변하지 않는다. 따라서 이전 상태를 기억하거나 업데이트 할 필요가 없는 단순한 컨텐츠를 표시하는데 사용된다. 예를 들면 텍스트라벨, 이미지, 아이콘 등의 요소가 있다.

Widget Build 메서드는 위젯을 생성하고 반환하는 역할을 한다. 반환되는 MaterialApp은 애플리케이션을 위한 기본적인 디자인 위젯이다. 그안에는 title, theme을 설정할 수 있으며 애플리케이션의 홈페이지를 설정한다. 이 코드에서는 MyHomePage 위젯을 사용하고 const를 사용하여 불변성을 유지한다.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MyHomePage 클래스

home 속성에 MyHomePage는 홈페이지의 위젯을 정의한다 StatefulWidget을 확장하며 위젯을 정의하는데 사용되는 기본 클래스이다. title이라는 문자열을 받아와 홈 페이지의 제목을 설정한다.

StatefulWidget은 상태를 가지고 있으며 이 상태는 위젯의 라이프사이클 동안 변경 될 수 있다. 이를 통해 동적인 데이터와 사용자 입력에 응답하는 동적인 UI를 생성할 수 있다.

@override 어노테이션은 부모 클래스나 인터페이스의 메서드를 오버라이드(override) 한다는 것이다. 어노테이션이 없더라도 컴파일러는 메서드가 부모 클래스의 것을 오버라이드(override)하는지 확인한다. 하지만 @override를 사용함으로써 코드의 가독성을 높이고 명시적으로 나타낼 수 있다.

createState 메서드는 State<MYHomePAge>를 반환한다. => 화살표 함수 문법을 사용하여 _MyHomePageState 클래스의 새 인스턴스를 생성하고 반환한다. 이렇게 반환된 상태 객체는 MyHomePage 위젯과 연결되어 해당 위젯의 상태를 관리한다.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

_MyHomePageState 클래스

생성된 _MyHomePageState 클래스에 State<MyHomePage>는 <MyHomePage>부분이 제네릭 타입으로, _MyHomePageState클래스가 MyHomePage위젯과 연결되어 있다는 것을 나타낸다.

_counter 변수를 사용하여 클릭 된 버튼 수를 추적하고 _incrementCounter 함수를 통해 이 변수를 증가 시킨다.

build메서드에 각 위젯 클래스에서 구현되어 화면의 모양과 동작을 정의한다. MyHomePage 클래스의 build 메서드에서는 Scaffold 위젯을 반환하고, 앱의 상단 바 (AppBar), 본문 (body), 및 플로팅 액션 버튼 (FloatingActionButton)을 정의한다.

class _MyHomePageState extends State<MyHomePage> {
  // 상태 변수
  int _counter = 0;

  // 카운터를 증가시키는 함수
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 테마에 기반한 배경색을 가진 앱 바
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),

      // 위젯의 본문
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '버튼을 누른 횟수:',
            ),

            // 현재 카운트를 표시
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),

      // 카운터를 증가시키는 Floating Action Button
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '증가',
        child: const Icon(Icons.add),
      ),
      
      // 빌드 메서드를 위한 이 트레일링 콤마는 자동 서식 지원을 더 잘해줍니다.
    );
  }
}

마무리

지금까지 프로젝트를 처음 만들면 생성되는 main.dart파일의 구조를 살펴보았습니다. 앞으로 다양한 Flutter 기능을 추가하면서 앱이 완성되는 과정을 포스팅 할 계획이니 많이 읽어주세요. 감사합니다.

전체 코드는 링크에서 확인할 수 있습니다.