Khi ứng dụng Flutter của bạn lớn dần lên, bạn sẽ gặp một vấn đề đau đầu: Làm sao để Widget A biết Widget B vừa thay đổi dữ liệu?

Ví dụ: Bạn bấm nút “Thêm vào giỏ hàng” ở màn hình Sản phẩm, thì icon Giỏ hàng ở góc màn hình phải cập nhật số lượng ngay lập tức. Đó chính là bài toán State Management.

1. Tại sao setState là không đủ?

setState là cách cơ bản nhất để cập nhật UI. Nhưng nó có 2 điểm yếu chí mạng:
1. Rebuild toàn bộ: Nó vẽ lại cả Widget cha lẫn Widget con, gây lãng phí tài nguyên.
2. Khó truyền dữ liệu: Để truyền dữ liệu từ Widget ông nội xuống Widget cháu chắt, bạn phải truyền qua Constructor của từng lớp trung gian (Prop drilling).

2. Các giải pháp State Management phổ biến

a. Provider (Google khuyên dùng)

• Ưu điểm: Dễ học, nhẹ, cộng đồng lớn.
• Nguyên lý: Dùng cơ chế InheritedWidget để truyền dữ liệu đi khắp cây Widget mà không cần qua Constructor.

b. Riverpod (Provider 2.0)

• Ưu điểm: Khắc phục mọi nhược điểm của Provider (không cần Context, an toàn compile-time).
• Nhược điểm: Cú pháp hơi lạ với người mới.

c. BLoC (Business Logic Component)

• Ưu điểm: Tách biệt hoàn toàn Giao diện (UI) và Logic (Code xử lý). Rất mạnh cho các dự án Enterprise lớn.
• Nhược điểm: Nhiều Code (Boilerplate), khó học nhất trong 3 cái.

3. Khi nào dùng cái nào?

• Dự án nhỏ/học tập: Dùng setState hoặc Provider.
• Dự án vừa: Dùng Riverpod.
• Dự án lớn/Team đông: Dùng BLoC để code gọn gàng và dễ test.

4. Ví dụ dùng Provider

// 1. Tạo class chứa dữ liệu
class Counter extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Báo cho các Widget đang nghe biết là có thay đổi
  }
}

// 2. Sử dụng trong UI
Consumer<Counter>(
  builder: (context, counter, child) {
    return Text('${counter.count}');
  },
);

Sau khi đã quản lý được dữ liệu, việc tiếp theo là làm cho ứng dụng nhìn thật “sexy”. Một App đẹp sẽ giữ chân người dùng lâu hơn gấp 3 lần.

Bài tiếp theo sẽ chia sẻ các bí kíp Xây dựng giao diện đẹp (UI/UX) và làm Animation mượt mà trong Flutter.

👉 Xây dựng giao diện đẹp với Flutter (UI/UX)

Đón xem bài tiếp theo: Xây dựng giao diện đẹp với Flutter (UI/UX) – Bí kíp từ Designer!**