Skip to main content

Cấu trúc dự án Flutter và Hello World app

· 4 min read

Flutter Project Structure

Flutter là một framework phát triển ứng dụng di động đa nền tảng của Google. Bài viết này sẽ giúp bạn hiểu rõ về cấu trúc thư mục của một dự án Flutter và cách tạo ứng dụng Hello World đầu tiên.

1. Cấu trúc thư mục dự án Flutter​

Khi tạo một dự án Flutter mới, bạn sẽ thấy cấu trúc thư mục như sau:

my_flutter_app/
├── android/          # Mã nguồn Android
├── ios/             # Mã nguồn iOS
├── lib/             # Mã nguồn Dart chính
├── test/            # Unit tests và widget tests
├── pubspec.yaml     # File cấu hình dự án và dependencies
└── README.md        # Tài liệu dự án

Giải thích các thư mục chính:​

  1. lib/

    • Chứa mã nguồn Dart chính của ứng dụng
    • File main.dart là điểm khởi đầu của ứng dụng
    • Thường được tổ chức theo mô hình: 
      lib/
      ├── main.dart
      ├── screens/      # Các màn hình
      ├── widgets/      # Các widget tái sử dụng
      ├── models/       # Các model dữ liệu
      ├── services/     # Các service (API, database)
      └── utils/        # Các tiện ích

  2. android/ và ios/

    • Chứa mã nguồn native cho từng nền tảng
    • Thường không cần chỉnh sửa trừ khi cần tích hợp native code

  3. test/

    • Chứa các file test
    • Bao gồm unit tests và widget tests

  4. pubspec.yaml

    • File cấu hình quan trọng nhất
    • Định nghĩa:
      • Tên và phiên bản ứng dụng
      • Dependencies
      • Assets (hình ảnh, fonts)
      • Cấu hình build

2. Tạo ứng dụng Hello World​

Bước 1: Tạo dự án mới​

flutter create hello_world
cd hello_world

Bước 2: Cấu trúc thư mục​

lib/
├── main.dart
├── screens/
│   └── home_screen.dart
└── widgets/
    └── greeting_widget.dart

Bước 3: Tạo các file​

main.dart

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

screens/home_screen.dart

import 'package:flutter/material.dart';
import '../widgets/greeting_widget.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello World'),
      ),
      body: const Center(
        child: GreetingWidget(),
      ),
    );
  }
}

widgets/greeting_widget.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Hello, World!',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 16),
        Text(
          'Welcome to Flutter',
          style: TextStyle(
            fontSize: 16,
            color: Colors.grey,
          ),
        ),
      ],
    );
  }
}

Bước 4: Chạy ứng dụng​

flutter run

3. Giải thích code​

MaterialApp​

  • Widget gốc của ứng dụng
  • Cung cấp các thành phần cơ bản như theme, navigation
  • useMaterial3: true để sử dụng Material Design 3

Scaffold​

  • Widget cung cấp cấu trúc cơ bản cho màn hình
  • Bao gồm AppBar, body, bottom navigation, drawer

StatelessWidget vs StatefulWidget​

  • StatelessWidget: Widget không có state
  • StatefulWidget: Widget có state có thể thay đổi

4. Best Practices​

  1. Tổ chức code

    • Tách biệt logic và UI
    • Sử dụng các widget có thể tái sử dụng
    • Đặt tên file và class rõ ràng

  2. Quản lý state

    • Sử dụng setState cho state đơn giản
    • Sử dụng state management (Provider, Bloc) cho ứng dụng lớn

  3. Performance

    • Tránh rebuild không cần thiết
    • Sử dụng const constructor khi có thể
    • Tối ưu hóa hình ảnh và assets

Kết luận​

Hiểu rõ cấu trúc dự án Flutter và cách tổ chức code là bước đầu tiên quan trọng trong việc phát triển ứng dụng Flutter. Với kiến thức này, bạn có thể bắt đầu xây dựng các ứng dụng phức tạp hơn.

Tài liệu tham khảo: