XÂY DỰNG ỨNG DỤNG MẪU HOÀN CHỈNH VỚI FLUTTER

Login – API – CRUD – Upload ảnh – Repository – State Management

Bài này mô tả quy trình xây dựng một ứng dụng Flutter hoàn chỉnh, phù hợp cho dự án thực tế hoặc sản phẩm MVP. Ứng dụng bao gồm:

• Đăng nhập bằng API
• Lưu token
• Lấy danh sách dữ liệu (Users, Products, Posts…)
• CRUD dữ liệu
• Upload ảnh
• State management
• Repository pattern
• Tách tầng Clean Architecture

---

1. PHÂN TÍCH ỨNG DỤNG MẪU

Ứng dụng mẫu có các module:

1. Màn hình Login
2. Màn hình Dashboard
3. Danh sách Items
4. Chi tiết Item
5. Tạo – Sửa – Xóa Item (CRUD)
6. Upload ảnh
7. Quản lý token & bảo mật
8. Routing
9. State Management (Riverpod hoặc Bloc)

---

2. CẤU TRÚC DỰ ÁN

Cấu trúc đề xuất:

lib/
 ├── core/
 │    ├── error/
 │    ├── network/
 │    └── utils/
 ├── data/
 │    ├── models/
 │    ├── datasources/
 │    └── repositories/
 ├── domain/
 │    ├── entities/
 │    └── usecases/
 └── presentation/
      ├── login/
      ├── dashboard/
      ├── items/
      └── widgets/

---

3. MODULE LOGIN (API + TOKEN + SECURE STORAGE)

API Login (POST)

POST /auth/login
{
  "email": "user@example.com",
  "password": "123456"
}

Backend trả về:

{
  "token": "jwt_token_here",
  "user": { "id": 1, "name": "Thanh" }
}

Flutter gọi API

Dùng Dio:

final response = await dio.post(
  "/auth/login",
  data: {"email": email, "password": password},
);

Lưu token

Dùng flutter_secure_storage:

await storage.write(key: "token", value: response.data['token']);

Tự động thêm token vào mọi request

dio.interceptors.add(
  InterceptorsWrapper(
    onRequest: (options, handler) async {
      final token = await storage.read(key: "token");
      if (token != null) {
        options.headers["Authorization"] = "Bearer $token";
      }
      return handler.next(options);
    },
  ),
);

---

4. MODULE LIST + DETAIL (READ DATA)

API

GET /items
GET /items/:id

Flutter

Dùng FutureProvider (Riverpod):

final itemsProvider = FutureProvider<List<Item>>((ref) {
  return ref.read(itemRepositoryProvider).getItems();
});

Trong UI:

ref.watch(itemsProvider).when(
  data: (items) => ListView.builder(
    itemCount: items.length,
    itemBuilder: (_, i) => ListTile(
      title: Text(items[i].name),
    ),
  ),
  loading: () => CircularProgressIndicator(),
  error: (_, __) => Text("Error"),
);

---

5. MODULE CREATE – UPDATE – DELETE (CRUD)

API

POST /items
PUT /items/:id
DELETE /items/:id

Flutter: Form Data

await dio.post("/items", data: {
  "name": nameController.text,
  "description": descController.text,
});

Sửa:

await dio.put("/items/$id", data: updatedData);

Xóa:

await dio.delete("/items/$id");

---

6. MODULE UPLOAD ẢNH

Chọn ảnh từ thư viện

Dùng image_picker:

final image = await ImagePicker().pickImage(source: ImageSource.gallery);

Upload ảnh

final formData = FormData.fromMap({
  "file": await MultipartFile.fromFile(image.path),
});

await dio.post("/items/$id/upload", data: formData);

Backend trả URL → hiển thị

Image.network(item.imageUrl);

---

7. ROUTING & FLOW ỨNG DỤNG

Routing đề xuất:

• /login
• /dashboard
• /items
• /items/create
• /items/:id
• /items/:id/edit

Dùng go_router hoặc Navigator 2.0.

---

8. STATE MANAGEMENT CHO ỨNG DỤNG MẪU

Sử dụng Riverpod hoặc Bloc để quản lý:

• Trạng thái loading
• Error
• Data
• Action (create/update/delete)

Ví dụ với StateNotifier:

class ItemController extends StateNotifier<ItemState> {
  ItemController(this.repo) : super(ItemInitial());

  Future<void> createItem(ItemData data) async {
    state = ItemLoading();
    try {
      await repo.createItem(data);
      state = ItemSuccess();
    } catch (_) {
      state = ItemError();
    }
  }
}

---

9. DEPLOY ỨNG DỤNG

Android:

flutter build apk
flutter build appbundle

iOS:

flutter build ios --release

Web:

flutter build web

Có thể deploy lên:

• Firebase Hosting
• Vercel
• Hostinger (upload folder build/web)

---

10. TỔNG KẾT QUY TRÌNH XÂY DỰNG ỨNG DỤNG

1. Phân tích cấu trúc
2. Login + Token
3. Repository + Model
4. Fetch data (List/Detail)
5. CRUD
6. Upload ảnh
7. Routing
8. State management
9. Deploy

Quy trình này là tiêu chuẩn cho mọi ứng dụng Flutter có backend.

---

THAM CHIẾU – TÀI LIỆU FLUTTER

Toàn bộ tài nguyên và lộ trình học Flutter bạn có thể xem tại:

https://www.huongnghieplaptrinhflutter.com