[Flutter] Flutter 폴더 및 내부 구조

플러터 폴더 구조

 

먼저 플러터 폴더 구조 중 크게 android, ios, lib, test 폴더가 있다.

여기서 가장 중요하게 볼 폴더는 lib 폴더이다.

 

 

 

폴더 이름	내용	비고
android	Android 프로젝트 관련 파일	Android Studio로 실행 가능
ios	IOS 프로젝트 관련 파일	X-Code로 실행 가능(Mac)
lib	플러터 앱 개발을 위한 Dart 파일	플러터 SDK 설치 필요
test	플러터 앱 개발 중 테스트 파일	테스트 편의성 제공

 

먼저 lib 폴더에는 플러터 앱의 코드가 작성된 main.dart 파일이 존재한다.

 

그리고 android 폴더와 ios 폴더에는 각 운영체제에서 프로젝트를 시작할 때 필요한 피일이 있다.

 

test 폴더에는 다트 코드로 함수를 테스트할 때 사용하는 파일이 있다.

 

 

루트 위치에 존재하는 파일

 

플러터 앱 루트 위치에 여러 파일이 있다. 여기서 중요한 파일은 pubspec.yaml 파일로, 플러터에서 다양한 패키지와 이미지, 폰트 등을 사용할 수 있게 해주는 파일이다.

 

파일 이름	내용	비고
pubspec.yaml	패키지, 이미지, 폰트 설정 등	직접 관리
README.md	프로젝트 소개
.gitignore	깃에 커밋, 푸시 등 소스 코드 업로드 시 필요 없는 파일 기록
.metadata	Flutter SDK 정보	자동 관리
.packages	Flutter SDK에 사용하는 기본 패키지 경로
flutter_application_1.iml	파일이 자동으로 생성될 때 만들어지는 폴더 위치
pubspec.lock	pubspec.yaml 파일에 적용된 패키지 위치

 

 

Flutter main.dart 구조

 

import 구문

소스 첫 줄에는 import 구문이 있다.

import는 해당 소스 파일에서 사용하려는 패키지를 불러올 때 사용하는 구문이다.

 

다른 다트 클래스나 pubspec.yaml 파일에서 내려받은 패키지를 불러올 때도 사용한다.

 

import 'package:flutter/material.dart';

 

main() 함수

플러터 앱은 자바나 C언어와 같이 main() 함수에서 시작한다.

 

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

 

main() 함수에서 runApp() 함수를 호출하는데, runApp() 함수는 binding.dart 클래스에 정의되어 있으며, 플러터 앱을 시작하는 역할을 한다.

 

이 함수에 플러터 앱을 시작하면서 화면에 표시할 위젯을 전달한다.

여기서는 MyApp 이라는 위젯을 전달한다.

 

MyApp 클래스

플러터 앱을 실행할 때 화면에 표시할 위젯으로 전달한 클래스이다.

 

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(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

 

먼저 extends 키워드는 다트에서 상속 키워드로 StatelessWidget 클래스를 상속 받는다.

 

그리고 @override 애너테이션을 이용해 build() 함수를 재정의한다.

build() 함수에는 어떠한 위젯을 만들건지 정의하는 함수로, 처음 runApp()을 이용해 클래스를 실행할 때는 MaterialApp() 함수를 반환해야 한다.

 

title에 앱의 이름을 정하고 theme에는 지금 만들 앱의 테마를 어떤 색상으로 할지 설정한다.

메인 색상을 지정하는 속성에는 Colors.blue가 입력되었고, 앱을 실행하면 파란색으로 표시된다.

 

 

 

그리고 visualDensity 속성은 모바일이나 웹, 데스크톱, 맥 등 어떤 플랫폼에서도 자연스럽게 보이도록 지원한다.

 

home에는 앱을 실행할 때 첫 화면에 어떤 내용을 표시할지 지정한다.

코드에서는 MyHomePage 클래스를 지정했다.

 

상태 연결에 따른 위젯 구분

 

플러터 앱을 구성하는 위젯은 스테이트리스(Stateless)와 스테이트풀(Statefull) 두 가지로 구분할 수 있다.

이런 구분은 상태 연결과 관련이 있다.

 

먼저, 상태를 연결할 필요가 없는 위젯을 스테이트리스 위젯이라고 한다.

 

내용을 갱신할 필요가 없는 위젯은 화면에 보이기 전에 모든 로딩을 마친다.

예를 들어 앱을 처음 실행하면 사용자에게 정적인 도움말을 보여줄 수 있다. 

이런 도움말 페이지는 갱신할 필요가 없이 이미 지정되어 있는 것들을 말한다.

 

이렇게 앱이 위젯의 상태를 감시하고 있을 필요가 없을 때 StatelessWidget 클래스를 상속 받아서 사용한다.

 

 

반대로 내용을 갱신해야 할 때도 있는데, 스테이트풀 위젯을 상속받아 사용한다.

 

예를 들어 계산기 앱에서 숫자를 입력하라고 계산 버튼을 누르면 결괏값이 화면에 출력된다.

이때 버튼을 누를 때마다 화면에 누른 숫자가 반영되어야 한다.

 

즉, 앱이 위젯의 상태를 감시하다가 위젯이 특정 상태가 되면 알맞은 처리를 수행해야 한다.

이처럼 상태가 연결된 동적인 위젯을 스테이트풀 위젯이라고 하며 StatefulWidget 클래스를 상속 받아서 만든다.

 

스테이트풀 위젯은 언제든 상태가 변경되면 특정한 처리를 수행해야 하므로 항상 지켜봐야 한다.

그만큼 메모리나 CPU 등 자원을 많이 소비한다.

 

그러나 스테이트리스 위젯은 갱신할 필요가 없으므로 적은 자원으로 화면을 구성한다.