Hướng dẫn khởi tạo project Flutter từ A-Z với hình minh họa

Flutter là một framework mạnh mẽ để phát triển ứng dụng đa nền tảng. Bài viết này sẽ hướng dẫn bạn từng bước để khởi tạo và chạy dự án Flutter đầu tiên của mình.

Yêu cầu hệ thống

Trước khi bắt đầu, bạn cần đảm bảo máy tính của mình đáp ứng các yêu cầu sau:

Hệ điều hành được hỗ trợ:

• Windows: Windows 10 hoặc cao hơn (64-bit)
• macOS: macOS 10.14 (Mojave) hoặc cao hơn
• Linux: Ubuntu 18.04 hoặc cao hơn

Cấu hình tối thiểu:

• RAM: 4GB (khuyến nghị 8GB trở lên)
• Dung lượng ổ cứng: 2.8GB (cho Flutter SDK + IDE)
• Kết nối internet để tải Flutter SDK và dependencies

Bước 1: Cài đặt Flutter SDK

Windows

1. Tải Flutter SDK:

   • Truy cập: https://flutter.dev/docs/get-started/install/windows
   • Tải file ZIP Flutter SDK (khoảng 1.5GB)

2. Giải nén và đặt Flutter:

   [object Object]

3. Thêm Flutter vào PATH:

   • Mở "Environment Variables"
   • Thêm C:\src\flutter\bin vào PATH
   • Hoặc chạy PowerShell với quyền Admin:

   [object Object]

macOS

1. Tải Flutter SDK:

   [object Object]

2. Thêm Flutter vào PATH:

   [object Object]

Linux

1. Tải Flutter SDK:

   [object Object]

2. Thêm Flutter vào PATH:

   [object Object]

Bước 2: Kiểm tra cài đặt

Chạy lệnh sau để kiểm tra Flutter đã được cài đặt đúng chưa:

[object Object]

Lệnh này sẽ kiểm tra và hiển thị trạng thái của:

• Flutter SDK
• Android toolchain
• iOS toolchain (chỉ macOS)
• VS Code / Android Studio
• Connected devices

Kết quả mong đợi:

[object Object]

Bước 3: Cài đặt Android Studio (cho Android development)

Tải và cài đặt:

1. Tải Android Studio từ: https://developer.android.com/studio
2. Cài đặt Android Studio
3. Mở Android Studio và cài đặt:
   • Android SDK
   • Android SDK Platform
   • Android Virtual Device (AVD)

Cấu hình Android SDK:

1. Mở Android Studio → Settings/Preferences
2. Vào Appearance & Behavior → System Settings → Android SDK
3. Chọn SDK Platforms tab:
   • Android 13.0 (Tiramisu) hoặc mới hơn
4. Chọn SDK Tools tab:
   • Android SDK Build-Tools
   • Android SDK Command-line Tools
   • Android SDK Platform-Tools
   • Android Emulator

Tạo Android Virtual Device (AVD):

1. Mở Android Studio → Tools → Device Manager
2. Click Create Device
3. Chọn device (ví dụ: Pixel 5)
4. Chọn system image (ví dụ: Android 13)
5. Click Finish

Bước 4: Cài đặt Xcode (chỉ cho macOS - iOS development)

1. Tải Xcode từ App Store
2. Mở Xcode và chấp nhận license:

   [object Object]

3. Cài đặt CocoaPods:

   [object Object]

Bước 5: Cài đặt IDE (Tùy chọn nhưng khuyến nghị)

Visual Studio Code

1. Tải VS Code: https://code.visualstudio.com/
2. Cài extension Flutter:
   • Mở VS Code
   • Vào Extensions (Ctrl+Shift+X)
   • Tìm "Flutter" và cài đặt
   • Extension này sẽ tự động cài Dart extension

Android Studio

1. Mở Android Studio
2. Vào File → Settings → Plugins
3. Tìm và cài đặt "Flutter" plugin
4. Restart Android Studio

Bước 6: Tạo project Flutter đầu tiên

Cách 1: Sử dụng Flutter CLI

[object Object]

Cách 2: Sử dụng VS Code

1. Mở VS Code
2. Nhấn Ctrl+Shift+P (hoặc Cmd+Shift+P trên Mac)
3. Gõ "Flutter: New Project"
4. Chọn "Application"
5. Chọn thư mục và đặt tên project
6. Chờ Flutter tạo project

Cách 3: Sử dụng Android Studio

1. Mở Android Studio
2. Click New Project
3. Chọn Flutter
4. Chọn Flutter Application
5. Điền thông tin project
6. Click Finish

Bước 7: Hiểu cấu trúc project Flutter

Sau khi tạo project, bạn sẽ thấy cấu trúc như sau:

[object Object]

File main.dart

Đây là file entry point của ứng dụng:

[object Object]

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

Chạy trên Android Emulator

1. Khởi động Android Emulator từ Android Studio
2. Chạy lệnh:

   [object Object]

3. Hoặc chọn device từ VS Code/Android Studio và click Run

Chạy trên iOS Simulator (chỉ macOS)

1. Mở Simulator:

   [object Object]

2. Chạy lệnh:

   [object Object]

Chạy trên thiết bị thật

Android:

1. Bật Developer options và USB debugging trên điện thoại
2. Kết nối điện thoại qua USB
3. Chạy:

   [object Object]

iOS (chỉ macOS):

1. Kết nối iPhone/iPad qua USB
2. Trust computer trên thiết bị
3. Chạy:

   [object Object]

Bước 9: Sử dụng Hot Reload

Một trong những tính năng mạnh mẽ nhất của Flutter là Hot Reload:

1. Chạy ứng dụng trong debug mode
2. Sửa code trong lib/main.dart
3. Lưu file (Ctrl+S / Cmd+S)
4. Ứng dụng sẽ tự động reload với thay đổi mới

Ví dụ:

[object Object]

Sau khi save, bạn sẽ thấy thay đổi ngay lập tức mà không cần restart app!

Bước 10: Build ứng dụng

Build APK cho Android:

[object Object]

Build App Bundle cho Google Play:

[object Object]

Build IPA cho iOS (chỉ macOS):

[object Object]

Các lệnh Flutter hữu ích

[object Object]

Xử lý lỗi thường gặp

Lỗi: "Flutter command not found"

Giải pháp:

• Kiểm tra Flutter đã được thêm vào PATH chưa
• Restart terminal/IDE
• Chạy flutter doctor để kiểm tra

Lỗi: "No devices found"

Giải pháp:

• Đảm bảo emulator/simulator đã khởi động
• Kiểm tra USB debugging đã bật (cho thiết bị thật)
• Chạy flutter devices để xem danh sách

Lỗi: "Android license not accepted"

Giải pháp:

[object Object]

Lỗi: "CocoaPods not installed" (macOS)

Giải pháp:

[object Object]

Best Practices

1. Luôn chạy flutter doctor trước khi bắt đầu

[object Object]

2. Sử dụng Flutter channels phù hợp

[object Object]

3. Giữ Flutter và dependencies cập nhật

[object Object]

4. Sử dụng version control

[object Object]

Kết luận

Bạn đã học cách:

• ✅ Cài đặt Flutter SDK
• ✅ Cấu hình môi trường phát triển
• ✅ Tạo project Flutter đầu tiên
• ✅ Chạy ứng dụng trên emulator/simulator
• ✅ Sử dụng Hot Reload
• ✅ Build ứng dụng

Bước tiếp theo:

1. Học về Widgets và Layout trong Flutter
2. Tìm hiểu State Management
3. Tích hợp API và Database
4. Xây dựng ứng dụng thực tế

Chúc bạn thành công với Flutter! 🚀

---

Tác giả: Admin
Ngày đăng: 21/01/2025
Chuyên mục: Flutter