Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

관리 메뉴

변혁적인 삶

[Flutter] 폴더 및 파일 구조 본문

App/Flutter

[Flutter] 폴더 및 파일 구조

revolutionarylife 2024. 10. 24. 13:22

🚀 [Flutter] 폴더 및 파일 구조

개요
1. Flutter 기본 프로젝트 구조
2. 폴더별 상세 설명
- 2.1 android/
- 2.2 ios/
- 2.3 lib/
- 2.4 test/
- 2.5 build/
- 2.6 web/
- 2.7 macos/, linux/, windows/
3. 주요 파일 설명
- 3.1 pubspec.yaml
- 3.2 lib/main.dart
- 3.3 app/src/main/AndroidManifest.xml
- 3.4 Info.plist
- 3.5 pubspec.lock
4. 결론

개요

안녕하세요! 오늘은 Flutter 프로젝트를 구성하는 폴더와 파일 구조에 대해 알아보려고 합니다.

Flutter는 다양한 플랫폼(Android, iOS, 웹 등)을 지원하기 때문에, 프로젝트 구조가 매우 체계적으로 구성되어 있습니다. 각 폴더와 파일의 역할을 이해하면 Flutter 개발을 훨씬 더 효율적으로 할 수 있습니다. 그럼 시작해볼까요?

1. Flutter 기본 프로젝트 구조

Flutter 프로젝트를 생성하면 아래와 같은 폴더 구조가 기본적으로 생성됩니다:

my_flutter_project/
│
├── android/             # Android 플랫폼 관련 폴더
├── ios/                 # iOS 플랫폼 관련 폴더
├── lib/                 # Dart 코드 작성 폴더
│   └── main.dart        # 앱의 진입점 파일
│
├── test/                # 테스트 코드 폴더
├── build/               # 빌드된 파일들이 저장되는 폴더 (자동 생성)
├── web/                 # 웹 관련 설정 및 파일 (웹 개발 시 사용)
├── macos/               # macOS 관련 파일 (macOS 앱 개발 시 사용)
├── linux/               # Linux 관련 파일 (Linux 앱 개발 시 사용)
├── windows/             # Windows 관련 파일 (Windows 앱 개발 시 사용)
│
├── pubspec.yaml         # 프로젝트 의존성 및 설정 파일
├── pubspec.lock         # 의존성 버전을 고정하는 파일
├── .gitignore           # Git 버전 관리에서 제외할 파일을 정의
├── README.md            # 프로젝트에 대한 설명 문서
└── .metadata            # Flutter 프로젝트의 메타데이터 파일

android/와 ios/ 폴더는 각각 Android와 iOS 네이티브 관련 설정을 포함하며, lib/ 폴더는 Dart 코드를 작성하는 폴더로, 주로 개발자가 작업하는 곳입니다. 가장 중요한 파일은 main.dart로, 이 파일이 Flutter 앱의 시작점입니다.

2. 폴더별 상세 설명

2.1 android/

android/ 폴더는 Flutter 앱이 Android 플랫폼에서 동작할 수 있도록 설정을 관리하는 곳입니다. Android 네이티브 설정과 빌드 관련 파일들이 포함되어 있으며, Gradle을 통해 앱을 빌드하고 Android에서 구동되도록 돕습니다.

주요기능

앱 권한 설정: Android 앱이 네트워크, 카메라, 위치 등 특정 권한을 요구할 때 AndroidManifest.xml 파일에서 설정합니다.
Gradle 설정: build.gradle 파일을 통해 앱의 버전 번호, 빌드 환경, 의존성 등을 관리합니다.
네이티브 코드 통합: Java나 Kotlin으로 작성된 Android 네이티브 코드와 Flutter를 연결할 수 있습니다.

2.2 ios/

ios/ 폴더는 iOS 플랫폼에서 앱이 동작할 수 있도록 필요한 설정을 관리하는 곳입니다. Xcode를 통해 네이티브 iOS 설정을 편집할 수 있으며, Info.plist 파일을 통해 앱의 권한, 아이콘, 기본 설정 등을 관리합니다.

주요기능

앱 권한 설정: 카메라나 위치 정보 접근 권한을 부여할 때, Info.plist 파일에서 설정할 수 있습니다.
아이콘 및 스플래시 화면 설정: iOS 앱의 아이콘과 스플래시 화면을 구성하는 데 사용됩니다.
네이티브 코드와 연동: Swift나 Objective-C로 작성된 iOS 네이티브 코드와 Flutter를 연동할 수 있습니다.

2.3 lib/

lib/ 폴더는 Flutter 프로젝트의 Dart 코드가 작성되는 핵심 폴더입니다. 앱의 로직, UI, 위젯 등을 이곳에서 구현하며, 모든 Dart 파일이 여기에 위치합니다. 주로 화면과 위젯을 구성하는 파일들을 screens/ 폴더와 widgets/ 폴더로 나누어 관리합니다.

주요기능

앱의 메인 로직 작성: main.dart를 포함한 앱의 진입점과 화면 구성 파일을 관리합니다.
UI 설계 및 상태 관리: Flutter 위젯을 통해 화면을 설계하고, 상태 관리 패턴을 적용하여 동적인 앱을 구현합니다.

2.4 test/

test/ 폴더는 테스트 코드를 작성하는 곳으로, 앱의 동작을 자동으로 검증할 수 있는 단위 테스트와 위젯 테스트를 관리합니다. Dart 테스트 프레임워크를 사용하여 기능을 자동화하고 코드의 안정성을 확인합니다.

주요기능

위젯 테스트: Flutter UI 위젯의 동작을 테스트합니다.
단위 테스트: 특정 로직이나 기능이 예상대로 동작하는지 검증하는 단위 테스트를 작성합니다.

예시

// test/widget_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:myapp/main.dart';

void main() {
  testWidgets('Flutter 앱 실행 테스트', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    expect(find.text('Hello, Flutter!'), findsOneWidget);
  });
}

2.5 build/

build/ 폴더는 Flutter 프로젝트를 빌드할 때 자동으로 생성되는 임시 폴더로, 다양한 플랫폼(Android, iOS 등)의 빌드 결과물이 저장됩니다. 이 폴더는 Git에서 관리하지 않으며, 프로젝트를 실행할 때마다 새롭게 생성됩니다.

주요기능

플랫폼별 빌드 결과물 저장: Android, iOS, 웹 등 각 플랫폼의 빌드 결과물이 여기에 저장됩니다.
임시 파일 관리: 빌드 시 생성되는 파일이 이 폴더에 저장되어 다음 빌드를 빠르게 할 수 있습니다.

2.6 web/

web/ 폴더는 Flutter 앱을 웹 플랫폼에서 실행할 수 있도록 관련 설정과 파일을 관리합니다. 이 폴더 안에는 index.html 파일과 Flutter 웹 앱을 실행하는 데 필요한 자바스크립트 파일 등이 포함됩니다.

주요기능

웹 설정 관리: Flutter 앱을 웹에서 실행할 때 필요한 HTML, CSS 파일 등을 관리합니다.
웹 애플리케이션 구성: 웹 브라우저에서 실행할 수 있는 Flutter 앱으로 컴파일됩니다.

예시

<!-- web/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Flutter Web</title>
  </head>
  <body>
    <script src="main.dart.js"></script>
  </body>
</html>

2.7 macos/, linux/, windows/

이 폴더들은 각각 macOS, Linux, Windows 플랫폼에서 Flutter 앱이 동작할 수 있도록 필요한 네이티브 설정 파일들을 관리합니다. 데스크탑 애플리케이션을 개발할 때 이 폴더들을 수정하게 됩니다.

주요기능

플랫폼별 네이티브 코드 및 설정 관리: 각 운영체제에서 앱이 정상적으로 실행될 수 있도록 설정 파일을 수정하고, 네이티브 코드를 통합합니다.
권한 및 리소스 설정: 각 운영체제에 맞는 권한이나 리소스를 설정하고, 앱의 기본 속성을 정의합니다.

3. 주요 파일 설명

3.1 pubspec.yaml

pubspec.yaml 파일은 프로젝트의 설정 및 의존성 관리를 담당하는 중요한 파일입니다. 프로젝트에서 사용할 패키지, 애셋(이미지, 폰트), 의존성을 설정하며, 이 파일을 통해 Flutter 앱의 빌드 환경과 리소스를 관리합니다.

주요기능

의존성 관리: 외부 라이브러리나 플러그인을 사용할 때 의존성을 선언합니다.
애셋 등록: 이미지, 폰트 등의 리소스를 앱에 추가하려면 이 파일에 등록해야 합니다.
Flutter 환경 설정: 앱의 기본적인 설정을 정의할 수 있습니다.

예시 (이미지, 폰트 )

Flutter 프로젝트에서 다운로드 받은 폰트와 이미지 애셋을 추가하려면 pubspec.yaml 파일을 수정해야 합니다.

예를 들어, 프로젝트에 있는 이미지 파일과 폰트를 앱에서 사용하려면 아래와 같이 설정합니다:

#pubspec.yaml
flutter:
  assets:
    - assets/images/my_image.png	#사용 할 이미지
    
  fonts:
  	- family: PlaywriteGBS	# 자신이 사용할 폰트 변수명
      fonts:
        - asset: assets/fonts/PlaywriteGBS-Regular.ttf	#다운로드 한 폰트 파일 위치
          weight: 400 	#폰트 두께

그리고, lib/main.dart 파일에서 폰트를 적용하고 이미지를 화면에 출력하는 코드는 다음과 같습니다:

#lib/main.dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
          '폰트 테스트',
          style: TextStyle(
            fontFamily: 'PlaywriteGBS',	#등록한 폰트 변수명을 이용하여 사용
            fontWeight: FontWeight.bold,
            fontSize: 24,
            color: Color(0xFFFDF6E3),
          ),
        ),
        body: Center(
          child: Image.asset('assets/images/my_image.png'),
        ),
      ),
    );
  }
}

이렇게 하면 해당 텍스트("폰트 테스트")에 등록한 커스텀 폰트인 PlaywriteGBS-Regular.ttf가 적용되며 인 assets/images/my_image.png 파일이 앱에 표시됩니다.

⚠️주의⚠️ pubspec.yaml 파일에 에셋을 등록해야 Flutter 앱에서 올바르게 작동하니 명시해 주세요.

3.2 lib/main.dart

lib/main.dart는 Flutter 애플리케이션의 진입점(entry point) 파일입니다. Flutter 앱은 이 파일에서 시작되며, 앱의 루트 위젯을 정의하고 화면 구성 및 네비게이션 구조를 설정합니다.

주요기능

Flutter 앱의 구조와 화면 전환을 설정합니다.
앱의 기본 테마, 라우팅, 상태 관리 등의 초기 설정을 정의합니다.

예시

#lib/main.dart
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Home')),
        body: Center(child: Text('Welcome to Flutter!')),
      ),
    );
  }
}

3.3 app/src/main/AndroidManifest.xml

AndroidManifest.xml은 Android 앱의 중요한 설정 파일로, 앱의 권한, 아이콘, 버전 정보, 네이티브 기능 등을 관리합니다. 이 파일은 Android 플랫폼에서 앱이 동작하는 방식과 권한을 정의하는 핵심 파일입니다.

주요기능

권한 설정: 앱이 사용자의 위치나 카메라 같은 기능에 접근하려면 이 파일에서 권한을 요청해야 합니다.
앱 구성 요소: 앱의 액티비티, 서비스, 브로드캐스트 리시버 등을 정의합니다.
앱의 테마 및 아이콘 설정: 앱의 UI 테마나 런처 아이콘을 설정할 수 있습니다.

예시

<!-- app/src/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myflutterapp">

    <!-- 앱이 인터넷을 사용할 수 있도록 설정 -->
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:label="My Flutter App"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:theme="@style/LaunchTheme"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:launchMode="singleTop"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

3.4 Info.plist

Info.plist 파일은 iOS 앱의 설정 파일로, 앱의 기본 정보를 정의하고, 앱이 사용할 수 있는 권한, 아이콘 등의 설정을 담고 있습니다. 이 파일은 iOS 운영체제가 앱을 실행할 때 필수적으로 참조하는 설정 파일입니다.

주요기능

앱 권한 설정: 앱이 카메라, 위치 정보, 마이크 등 특정 기능에 접근할 때 Info.plist에서 권한을 설정해야 합니다. 이를 통해 iOS 시스템에 앱 권한을 요청하고, 사용자의 허가를 받게 됩니다.
앱 기본 정보 설정: 앱의 이름, 번들 식별자, 버전, 빌드 번호 등의 기본 설정을 이곳에서 정의합니다.
외부 URL 스킴 정의: 앱이 다른 앱의 URL 스킴을 통해 실행될 수 있도록 설정할 수 있습니다. 예를 들어, 앱이 특정 URL을 처리할 수 있도록 할 수 있습니다.
앱 아이콘 및 스플래시 화면 설정: 앱의 아이콘과 런치 스크린을 설정하는 데 사용됩니다.

예시

<!-- ios/Runner/Info.plist -->
<plist version="1.0">
<dict>
    <!-- 앱 이름 -->
    <key>CFBundleName</key>
    <string>My Flutter App</string>

    <!-- 앱 권한 설정 (카메라 접근 요청) -->
    <key>NSCameraUsageDescription</key>
    <string>이 앱은 카메라 접근을 요청합니다.</string>

    <!-- 위치 정보 사용 권한 설정 -->
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>이 앱은 사용 중에 위치 정보를 사용합니다.</string>

    <!-- 앱 버전 및 빌드 설정 -->
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleVersion</key>
    <string>1</string>

    <!-- 앱의 아이콘 및 스플래시 화면 설정 -->
    <key>CFBundleIconFiles</key>
    <array>
        <string>AppIcon</string>
    </array>
</dict>
</plist>

세부 설명

CFBundleName: 앱의 이름을 정의합니다.
NSCameraUsageDescription: 앱이 카메라에 접근할 때 사용자에게 표시할 메시지를 정의합니다. iOS 10부터는 이 메시지를 반드시 제공해야 합니다.
NSLocationWhenInUseUsageDescription: 앱이 사용 중에 위치 정보를 접근할 때 나타나는 설명을 정의합니다.
CFBundleShortVersionString: 앱의 버전을 정의합니다.
CFBundleVersion: 앱의 빌드 번호를 정의합니다.
CFBundleIconFiles: 앱의 아이콘을 설정합니다.

3.5 pubspec.lock

pubspec.lock 파일은 pubspec.yaml 파일에 정의된 의존성들의 고정된 버전을 기록하는 파일입니다. 이를 통해 프로젝트의 의존성이 동일한 버전에서 일관되게 관리될 수 있습니다.

Next.js 프로젝트에서는 package-lock.json 파일을 통해 패키지의 정확한 버전과 종속성들을 관리합니다. 다른 개발자가 해당 프로젝트를 복제한 후, npm install 명령어를 실행하면 동일한 버전의 의존성이 설치됩니다.

Flutter 프로젝트에서는 pubspec.lock 파일을 통해 의존성을 관리하며, flutter pub get 명령어를 사용하여 동일한 버전의 의존성을 설치할 수 있습니다.

Flutter와 Next의 의존성 관리의 차이점에 대해서는 나중에 자세히 다루도록 하겠습니다.

주요기능

프로젝트의 의존성 버전이 동일하게 유지되도록 보장.
패키지 버전 충돌을 방지하고, 모든 개발자가 같은 환경에서 작업할 수 있도록 합니다.

결론

Flutter 프로젝트에서 중요한 파일들은 각각의 역할을 명확히 가지고 있습니다. 특히, pubspec.yaml은 의존성과 리소스를 관리하는 핵심 파일이며, flutter pub get을 통해 의존성을 설치할 수 있습니다. main.dart는 앱의 시작점입니다. AndroidManifest.xml 파일은 Android 플랫폼에서 필요한 권한을 정의하는 중요한 설정 파일이며, Info.plist 파일은 iOS 플랫폼에서 필요한 권한을 정의하는 설정파일입니다. 그 외 다른 주요 파일들도 각자의 역할에 따라 프로젝트를 관리하는 데 필수적입니다.

이러한 파일들의 구조와 역할을 잘 이해하면 Flutter 프로젝트를 더욱 효율적으로 관리하고, 다양한 플랫폼에서 일관된 앱을 개발할 수 있습니다. 여러분도 지금 바로 Flutter 프로젝트를 시작해보세요! 🚀

저작자표시 비영리 변경금지

'App > Flutter' 카테고리의 다른 글

[Flutter] 플러터 진입점: main.dart 소개 (0)	2024.10.24
[Flutter] 위젯(Widget)이란? \| Stateful과 Stateless의 차이 (0)	2024.10.24
[Flutter] 플러터란? \| 빠르고 강력한 크로스 플랫폼 앱 개발 툴 (0)	2024.10.23

'App/Flutter' Related Articles

티스토리툴바

변혁적인 삶

[Flutter] 폴더 및 파일 구조 본문

[Flutter] 폴더 및 파일 구조

🚀 [Flutter] 폴더 및 파일 구조

개요

1. Flutter 기본 프로젝트 구조

2. 폴더별 상세 설명

2.1 android/

주요기능

2.2 ios/

주요기능

2.3 lib/

주요기능

2.4 test/

주요기능

예시

2.5 build/

주요기능

2.6 web/

주요기능

예시

2.7 macos/, linux/, windows/

주요기능

3. 주요 파일 설명

3.1 pubspec.yaml

주요기능

예시 (이미지, 폰트 )

3.2 lib/main.dart

주요기능

예시

3.3 app/src/main/AndroidManifest.xml

주요기능

예시

3.4 Info.plist

주요기능

예시

세부 설명

3.5 pubspec.lock

주요기능

결론

'App > Flutter' 카테고리의 다른 글

티스토리툴바