MN
MN

Cấu trúc của một dự án Flutter

1. Giới thiệu

Trong một dự án Flutter, cấu trúc thư mục mặc định được tạo khi chạy lệnh flutter create bao gồm các thư mục và tệp sau. Dưới đây là mô tả chi tiết:

Cấu trúc thư mục cơ bản

my_app/
├── android/
├── ios/
├── lib/
│   ├── main.dart
├── test/
├── web/ (nếu hỗ trợ Web)
├── build/
├── pubspec.yaml
├── pubspec.lock
├── analysis_options.yaml (tùy chọn)
├── .gitignore
├── .metadata
├── README.md

2. Thư mục chi tiết

2.1. android/

Chứa mã nguồn và cấu hình để xây dựng ứng dụng trên Android.

  • build.gradle: Tệp cấu hình Gradle cho Android.
  • AndroidManifest.xml: Khai báo quyền và cấu hình chính cho ứng dụng.
  • src/main/java: Mã nguồn Java/Kotlin cho các lớp Android.
  • res/: Chứa tài nguyên (hình ảnh, chuỗi, giao diện) của ứng dụng.

2.2. ios/

Chứa mã nguồn và cấu hình để xây dựng ứng dụng trên iOS.

  • Runner.xcodeproj và Runner.xcworkspace: Các tệp dự án Xcode.
  • AppDelegate.swift: Điểm khởi đầu cho ứng dụng iOS.
  • Info.plist: Cấu hình thông tin ứng dụng (tên, quyền, biểu tượng).

2.3. lib/

Thư mục quan trọng nhất chứa mã nguồn chính của ứng dụng Flutter.

  • main.dart: Điểm vào chính của ứng dụng Flutter.
  • Có thể tổ chức thêm các thư mục con như:
    • screens/: Chứa các màn hình (UI) chính.
    • models/: Chứa các lớp mô hình (models).
    • services/: Chứa các lớp logic và xử lý dịch vụ.
    • widgets/: Chứa các widget tái sử dụng.

2.4. test/

Chứa các tệp kiểm thử tự động (unit tests).

  • Ví dụ: widget_test.dart là tệp kiểm thử mẫu.

2.5. web/ (tùy chọn)

Chứa các tệp cấu hình dành cho ứng dụng Web:

  • index.html: Tệp khởi tạo ứng dụng web.
  • manifest.json: Mô tả PWA (Progressive Web App).

2.6. build/

Thư mục tạm chứa các tệp được xây dựng (build) tự động.

Lưu ý: Thư mục này không cần chỉnh sửa và thường được bỏ qua trong .gitignore.

3. Các tệp quan trọng

3.1. pubspec.yaml

  • Tệp cấu hình chính cho dự án Flutter.
  • Sử dụng để:
    • Khai báo thư viện (dependencies).
    • Chỉ định tài sản (assets) như hình ảnh, phông chữ.
    • Định nghĩa các gói phát triển (dev_dependencies).

Ví dụ nội dung:

name: my_app
description: A new Flutter project
version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter
  http: ^0.15.0

flutter:
  assets:
    - assets/images/
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf

3.2. pubspec.lock

  • Tệp tự động tạo sau khi chạy flutter pub get.
  • Khóa phiên bản của các thư viện đã tải.

3.4. analysis_options.yaml (tùy chọn)

  • Tệp cấu hình cho trình phân tích mã Dart.
  • Dùng để bật/tắt hoặc tùy chỉnh các cảnh báo/lỗi.

3.5. .gitignore

  • Liệt kê các tệp/thư mục không được theo dõi bởi Git.
  • Ví dụ: build/, .dart_tool/, .packages.

3.6. README.md

  • Tệp mô tả dự án, thường được viết bằng Markdown.

4. Thêm cấu trúc tổ chức mã nguồn (tùy chọn)

Khi dự án lớn, bạn có thể tổ chức mã nguồn trong thư mục lib/ theo mô hình sau:

4.1. Theo tính năng (Feature-based)

lib/
├── features/
│   ├── authentication/
│   │   ├── models/
│   │   ├── screens/
│   │   ├── widgets/
│   │   ├── services/
│   ├── dashboard/
│       ├── models/
│       ├── screens/
│       ├── widgets/
│       ├── services/
├── shared/
│   ├── widgets/
│   ├── utils/
│   ├── constants/
│   ├── themes/
│   ├── services/

4.2. Theo tầng kiến trúc (Layer-based)

lib/
├── models/
├── screens/
├── widgets/
├── services/
├── utils/
├── constants/

5. Lưu ý

  • Tuân thủ quy ước: Tên thư mục, tệp nên sử dụng chữ thường và gạch dưới (snake_case).
  • Không chỉnh sửa thư mục hệ thống: Các thư mục như android/ hoặc ios/ chỉ chỉnh sửa khi cần thiết.

Các bài liên quan khác:

  1. Cách cài đặt và cấu hình môi trường phát triển Flutter
  2. So sánh Flutter và Reac Native
  3. Flutter là cái gì?