managing-flutter-provider-state

Provider State Management Guide (v6.x)

Goal

Implement state management and dependency injection using the provider package in Flutter applications. Provider is built on Flutter's native InheritedWidget and remains the foundation for many production apps worldwide. This guide enforces MVVM (Model-View-ViewModel) architecture patterns and eliminates unnecessary widget rebuilds through targeted state consumption.

Process

Phase 1: Understand State Scope

Before implementing Provider, determine if the state truly needs to be shared:

• Ephemeral State (local): Use StatefulWidget + setState() for UI state confined to a single widget (e.g., form input, animation progress, current tab index).
• App State (shared): Use Provider when multiple unrelated widgets need access to the same data (e.g., user auth, shopping cart, app settings).

If uncertain about the scope, ask the user to clarify the intended lifecycle and accessibility requirements.

Phase 2: Install Dependencies

dependencies:
  provider: ^6.1.5

Phase 3: Implement MVVM Architecture

A. Create the Model Layer (Data / Repository)

Handle low-level data operations (HTTP requests, database queries, caching):

class UserRepository {
  Future<User> fetchUser(String id) async {
    // API call or database query
    return User(id: id, name: 'John Doe');
  }
}

Constraints: Models MUST NOT reference ChangeNotifier, BuildContext, or any UI code.

B. Create the ViewModel Layer

Extend ChangeNotifier to hold UI state and expose commands:

class UserViewModel extends ChangeNotifier {
  final UserRepository _repository;
  
  UserViewModel(this._repository);

  User? _user;
  User? get user => _user;

  bool _isLoading = false;
  bool get isLoading => _isLoading;

  String? _errorMessage;
  String? get errorMessage => _errorMessage;

  // Command invoked by View
  Future<void> loadUser(String id) async {
    _isLoading = true;
    _errorMessage = null;
    notifyListeners(); // Trigger loading UI

    try {
      _user = await _repository.fetchUser(id);
    } catch (e) {
      _errorMessage = e.toString();
    } finally {
      _isLoading = false;
      notifyListeners(); // Trigger success/error UI
    }
  }
}