Skip to main content

5 Phương pháp quản lý state phổ biến trong Flutter

· 8 min read
admin Hướng Nghiệp Dữ Liệu
admin Hướng Nghiệp Dữ Liệu
Fullstack

Flutter State Management

Giới thiệu​

Quản lý state là một trong những khía cạnh quan trọng nhất khi phát triển ứng dụng Flutter. Việc chọn đúng phương pháp quản lý state sẽ giúp code của bạn dễ bảo trì, mở rộng và hiệu quả hơn. Trong bài viết này, chúng ta sẽ khám phá 5 phương pháp quản lý state phổ biến nhất trong Flutter: Provider, Riverpod, Bloc, GetX, và MobX.

1. Provider​

Tổng quan​

Provider là giải pháp quản lý state được Google khuyến nghị và được xây dựng dựa trên InheritedWidget. Nó cung cấp một cách đơn giản và hiệu quả để quản lý state trong ứng dụng Flutter.

Đặc điểm​

  • ✅ Đơn giản và dễ học: Syntax rõ ràng, dễ hiểu
  • ✅ Được Google khuyến nghị: Chính thức được Flutter team hỗ trợ
  • ✅ Hiệu suất tốt: Chỉ rebuild các widget cần thiết
  • ✅ Tích hợp tốt với Flutter: Sử dụng các widget có sẵn
  • ✅ Không cần code generation: Không cần build_runner

Khi nào sử dụng​

  • Ứng dụng nhỏ đến trung bình
  • Team mới bắt đầu với Flutter
  • Cần giải pháp đơn giản, ít boilerplate
  • Muốn tuân theo best practices của Flutter

Ví dụ cơ bản​

// Counter Provider
class CounterProvider extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

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

Ưu điểm​

  • Dễ học và sử dụng
  • Tài liệu phong phú
  • Cộng đồng lớn
  • Phù hợp với hầu hết các use case

Nhược điểm​

  • Có thể phức tạp với ứng dụng lớn
  • Cần quản lý lifecycle thủ công
  • Không có compile-time safety mạnh

2. Riverpod​

Tổng quan​

Riverpod là phiên bản cải tiến của Provider, được tạo ra bởi cùng một tác giả. Nó giải quyết nhiều vấn đề của Provider và cung cấp compile-time safety tốt hơn.

Đặc điểm​

  • ✅ Compile-time safety: Phát hiện lỗi tại compile time
  • ✅ Không cần BuildContext: Có thể truy cập providers từ bất kỳ đâu
  • ✅ Testable: Dễ dàng test và mock
  • ✅ Provider dependencies: Quản lý dependencies tự động
  • ✅ Code generation: Hỗ trợ code generation (optional)

Khi nào sử dụng​

  • Ứng dụng lớn, phức tạp
  • Cần type safety cao
  • Muốn test dễ dàng
  • Cần quản lý dependencies tốt hơn

Ví dụ cơ bản​

// Counter Provider
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => state++;
}

// Sử dụng
Consumer(
  builder: (context, ref, child) {
    final count = ref.watch(counterProvider);
    return Text('Count: $count');
  },
)

Ưu điểm​

  • Type-safe hơn Provider
  • Không cần BuildContext
  • Dễ test
  • Quản lý dependencies tốt
  • Hỗ trợ code generation

Nhược điểm​

  • Learning curve cao hơn Provider
  • Syntax phức tạp hơn một chút
  • Cộng đồng nhỏ hơn Provider

3. Bloc​

Tổng quan​

Bloc (Business Logic Component) là một pattern quản lý state dựa trên các khái niệm từ ReactiveX. Nó tách biệt business logic khỏi UI và sử dụng streams để quản lý state.

Đặc điểm​

  • ✅ Separation of concerns: Tách biệt logic và UI rõ ràng
  • ✅ Predictable: State changes có thể dự đoán được
  • ✅ Testable: Dễ test business logic
  • ✅ Reactive: Sử dụng streams và reactive programming
  • ✅ Time-travel debugging: Hỗ trợ debugging tốt

Khi nào sử dụng​

  • Ứng dụng lớn, phức tạp
  • Cần quản lý business logic phức tạp
  • Team có kinh nghiệm với reactive programming
  • Cần test coverage cao

Ví dụ cơ bản​

// Events
abstract class CounterEvent {}
class IncrementEvent extends CounterEvent {}

// Bloc
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<IncrementEvent>((event, emit) => emit(state + 1));
  }
}

// Sử dụng
BlocBuilder<CounterBloc, int>(
  builder: (context, count) {
    return Text('Count: $count');
  },
)

Ưu điểm​

  • Architecture rõ ràng
  • Dễ test business logic
  • Hỗ trợ time-travel debugging
  • Phù hợp với ứng dụng lớn

Nhược điểm​

  • Boilerplate code nhiều
  • Learning curve cao
  • Có thể overkill cho ứng dụng nhỏ

4. GetX​

Tổng quan​

GetX là một giải pháp all-in-one cho Flutter, không chỉ quản lý state mà còn cung cấp routing, dependency injection, và nhiều tính năng khác.

Đặc điểm​

  • ✅ All-in-one: State management + Routing + DI
  • ✅ Hiệu suất cao: Tối ưu rebuild
  • ✅ Syntax đơn giản: Code ngắn gọn
  • ✅ Không cần BuildContext: Truy cập từ bất kỳ đâu
  • ✅ Tích hợp nhiều tính năng: Navigation, dialogs, snackbars

Khi nào sử dụng​

  • Muốn giải pháp all-in-one
  • Cần routing đơn giản
  • Ưu tiên code ngắn gọn
  • Ứng dụng nhỏ đến trung bình

Ví dụ cơ bản​

// Controller
class CounterController extends GetxController {
  var count = 0.obs;

  void increment() => count++;
}

// Sử dụng
final controller = Get.put(CounterController());

Obx(() => Text('Count: ${controller.count}'))

Ưu điểm​

  • All-in-one solution
  • Code ngắn gọn
  • Hiệu suất tốt
  • Dễ sử dụng

Nhược điểm​

  • Không được Flutter team chính thức khuyến nghị
  • Có thể khó maintain với ứng dụng lớn
  • Tight coupling giữa các tính năng

5. MobX​

Tổng quan​

MobX là một state management library được port từ JavaScript. Nó sử dụng reactive programming và code generation để quản lý state.

Đặc điểm​

  • ✅ Reactive: Tự động update khi state thay đổi
  • ✅ Minimal boilerplate: Ít code lặp lại
  • ✅ Observable pattern: Sử dụng observables
  • ✅ Code generation: Sử dụng build_runner
  • ✅ Familiar: Nếu đã biết MobX từ JS/React

Khi nào sử dụng​

  • Đã quen với MobX từ JavaScript/React
  • Cần reactive programming
  • Muốn ít boilerplate
  • Ứng dụng có state phức tạp

Ví dụ cơ bản​

// Store
class CounterStore = _CounterStore with _$CounterStore;

abstract class _CounterStore with Store {
  @observable
  int count = 0;

  @action
  void increment() => count++;
}

// Sử dụng
Observer(
  builder: (_) => Text('Count: ${store.count}'),
)

Ưu điểm​

  • Reactive và tự động
  • Ít boilerplate
  • Familiar cho dev từ JS background
  • Dễ sử dụng

Nhược điểm​

  • Cần code generation
  • Cộng đồng nhỏ hơn
  • Learning curve nếu chưa quen với reactive

So sánh tổng quan​

Tiêu chíProviderRiverpodBlocGetXMobX
Độ phổ biến⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Dễ học⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Type Safety⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Boilerplate⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Testability⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Hiệu suất⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Tài liệu⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

Kết luận và khuyến nghị​

Chọn Provider nếu:​

  • Bạn mới bắt đầu với Flutter
  • Ứng dụng nhỏ đến trung bình
  • Muốn giải pháp đơn giản, được Google khuyến nghị

Chọn Riverpod nếu:​

  • Bạn đã quen với Provider
  • Cần type safety cao
  • Ứng dụng lớn, phức tạp
  • Ưu tiên testability

Chọn Bloc nếu:​

  • Ứng dụng lớn, phức tạp
  • Cần separation of concerns rõ ràng
  • Team có kinh nghiệm với reactive programming
  • Cần test coverage cao

Chọn GetX nếu:​

  • Muốn giải pháp all-in-one
  • Ưu tiên code ngắn gọn
  • Ứng dụng nhỏ đến trung bình
  • Cần routing đơn giản

Chọn MobX nếu:​

  • Đã quen với MobX từ JavaScript
  • Cần reactive programming
  • Muốn ít boilerplate
  • State phức tạp

Lời khuyên cuối cùng​

  1. Bắt đầu đơn giản: Nếu mới bắt đầu, hãy thử Provider trước
  2. Xem xét dự án: Chọn phương pháp phù hợp với quy mô và độ phức tạp
  3. Team experience: Xem xét kinh nghiệm của team
  4. Long-term: Nghĩ về khả năng maintain và scale
  5. Thử nghiệm: Có thể thử nhiều phương pháp để tìm ra cái phù hợp nhất

Quản lý state là một phần quan trọng của Flutter development. Chọn đúng phương pháp sẽ giúp bạn xây dựng ứng dụng tốt hơn!