Flutter & Riverpod: State Management in Multi-Feature Apps

Building complex, multi-feature applications in Flutter presents significant challenges, especially concerning state management. As an application grows, managing shared state, feature isolation, and inter-feature communication can become a tangled mess without a robust and scalable solution. Riverpod emerges as a powerful, compile-safe, and testable state management library that elegantly addresses these complexities, making it an excellent choice for multi-feature Flutter applications.

The Challenge of State Management in Multi-Feature Apps

In a typical multi-feature application, you encounter:

Feature Isolation: Each feature should ideally manage its own state and dependencies without directly interfering with others.
Shared State: Certain pieces of data (e.g., user authentication status, app settings) need to be accessible across multiple features.
Inter-Feature Communication: Features often need to react to changes originating from another feature (e.g., updating a cart badge when an item is added from a product list).
Scalability: The state management solution must remain manageable as the number of features and the complexity of their interactions increase.
Testability: The ability to easily test individual features and their state logic in isolation.

Why Riverpod for Multi-Feature Apps?

Riverpod, a complete rewrite of Provider, offers several compelling advantages for multi-feature applications:

Compile-time Safety: Eliminates common runtime errors by catching dependency resolution issues during compilation.
Provider Scoping & Overrides: Allows providers to be overridden or scoped to specific parts of the widget tree, facilitating feature isolation and testing.
Testability: Designed with testing in mind, making it trivial to mock dependencies and test providers in isolation.
Granular Rebuilds: Optimizes UI updates by ensuring only widgets that depend on changed state are rebuilt.
Dependency Inversion: Encourages good architectural practices by making dependencies explicit and manageable.
No Context Required for Providers: Providers can be accessed globally, simplifying architecture, especially in services or business logic layers.

Core Riverpod Concepts for Multi-Feature Applications

While Riverpod offers various provider types, the most relevant for complex, multi-feature logic are:

NotifierProvider / AsyncNotifierProvider: Ideal for managing complex state that changes over time and involves business logic. These expose a custom notifier class, providing a clean separation of concerns.
```
final productListNotifierProvider = NotifierProvider<ProductListNotifier, List<Product>>(
  ProductListNotifier.new,
);
        
```

Provider: For read-only values or objects that don't change after creation (e.g., repositories, service clients).


final productRepositoryProvider = Provider<ProductRepository>((ref) {
  return ProductRepository();
});

Family modifier: Crucial for providers that depend on external parameters, allowing you to create multiple instances of a provider based on different inputs (e.g., fetching a product by ID).


final productDetailsProvider = FutureProvider.family<Product, String>((ref, productId) async {
  return ref.watch(productRepositoryProvider).fetchProduct(productId);
});

Structuring a Multi-Feature App with Riverpod

A recommended approach for multi-feature Flutter apps using Riverpod:

1. Feature-Based Organization

Organize your project by features. Each feature directory contains its own widgets, models, business logic (notifiers), and most importantly, its own set of Riverpod providers.


lib/
├── main.dart
├── app_bootstrap.dart
├── core/
│   ├── config/
│   ├── services/
│   │   ├── api_service.dart
│   │   ├── auth_service.dart
│   │   └── providers.dart // Shared service providers
│   ├── models/
│   ├── theme/
│   └── widgets/
├── features/
│   ├── authentication/
│   │   ├── data/
│   │   ├── domain/
│   │   │   ├── models/
│   │   │   ├── repositories/
│   │   │   └── notifiers/authentication_notifier.dart
│   │   └── presentation/
│   │       ├── widgets/
│   │       └── screens/login_screen.dart
│   ├── products/
│   │   ├── data/
│   │   ├── domain/
│   │   │   ├── models/product.dart
│   │   │   ├── repositories/product_repository.dart
│   │   │   └── notifiers/product_list_notifier.dart
│   │   └── presentation/
│   │       ├── widgets/product_card.dart
│   │       └── screens/product_list_screen.dart
│   └── shopping_cart/
│       ├── data/
│       ├── domain/
│       │   ├── models/cart_item.dart
│       │   └── notifiers/shopping_cart_notifier.dart
│       └── presentation/
│           ├── widgets/cart_icon.dart
│           └── screens/cart_screen.dart
└── utils/

2. Shared Providers

For dependencies that are global or used across many features (e.g., API client, authentication service), define them in a central core/services/providers.dart or similar file.


// core/services/providers.dart
import 'package:dio/dio.dart';
import 'package:shared_preferences/shared_preferences.dart';

final dioProvider = Provider<Dio>((ref) {
  return Dio();
});

final sharedPreferencesProvider = FutureProvider<SharedPreferences>((ref) async {
  return await SharedPreferences.getInstance();
});

// Example authentication service that might depend on Dio
final authServiceProvider = Provider<AuthService>((ref) {
  final dio = ref.watch(dioProvider);
  return AuthService(dio);
});

3. Feature-Specific Providers

Each feature defines its own providers within its directory. These providers can depend on shared providers or other feature-specific providers (with careful consideration to avoid circular dependencies).


// features/products/domain/notifiers/product_list_notifier.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:my_app/features/products/domain/models/product.dart';
import 'package:my_app/features/products/domain/repositories/product_repository.dart';

// Provider for the repository
final productRepositoryProvider = Provider<ProductRepository>((ref) {
  // Assuming ProductRepository might take an API service or similar
  return ProductRepository();
});

// Notifier to manage the list of products
class ProductListNotifier extends Notifier<List<Product>> {
  @override
  List<Product> build() {
    _fetchProducts(); // Initial fetch
    return [];
  }

  Future<void> _fetchProducts() async {
    state = const []; // Or loading state
    final repository = ref.watch(productRepositoryProvider);
    final products = await repository.fetchProducts();
    state = products;
  }

  void addProduct(Product product) {
    state = [...state, product];
  }

  // ... other methods to modify product list
}

final productListNotifierProvider = NotifierProvider<ProductListNotifier, List<Product>>(
  ProductListNotifier.new,
);


// features/shopping_cart/domain/notifiers/shopping_cart_notifier.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:my_app/features/products/domain/models/product.dart'; // Depends on Product model

class CartItem {
  final Product product;
  int quantity;

  CartItem({required this.product, this.quantity = 1});

  CartItem copyWith({Product? product, int? quantity}) {
    return CartItem(
      product: product ?? this.product,
      quantity: quantity ?? this.quantity,
    );
  }
}

class ShoppingCartNotifier extends Notifier<List<CartItem>> {
  @override
  List<CartItem> build() {
    return [];
  }

  void addItem(Product product) {
    final existingItemIndex = state.indexWhere((item) => item.product.id == product.id);
    if (existingItemIndex != -1) {
      // Item exists, increase quantity
      final updatedState = List<CartItem>.from(state);
      updatedState[existingItemIndex] =
          updatedState[existingItemIndex].copyWith(quantity: updatedState[existingItemIndex].quantity + 1);
      state = updatedState;
    } else {
      // New item
      state = [...state, CartItem(product: product)];
    }
  }

  void removeItem(Product product) {
    state = state.where((item) => item.product.id != product.id).toList();
  }

  int get totalItems => state.fold(0, (sum, item) => sum + item.quantity);
}

final shoppingCartNotifierProvider = NotifierProvider<ShoppingCartNotifier, List<CartItem>>(
  ShoppingCartNotifier.new,
);

4. Inter-Feature Communication

Features communicate by reading or watching each other's providers. For example, a product list item might add a product to the shopping cart by accessing shoppingCartNotifierProvider.


// features/products/presentation/widgets/product_card.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:my_app/features/products/domain/models/product.dart';
import 'package:my_app/features/shopping_cart/domain/notifiers/shopping_cart_notifier.dart'; // Accessing cart feature provider

class ProductCard extends ConsumerWidget {
  final Product product;

  const ProductCard({Key? key, required this.product}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Card(
      margin: const EdgeInsets.all(8.0),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(product.name, style: Theme.of(context).textTheme.headlineSmall),
            Text('\$${product.price.toStringAsFixed(2)}'),
            Align(
              alignment: Alignment.bottomRight,
              child: ElevatedButton(
                onPressed: () {
                  ref.read(shoppingCartNotifierProvider.notifier).addItem(product);
                  // Optionally show a confirmation message
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('${product.name} added to cart!')),
                  );
                },
                child: const Text('Add to Cart'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

A global widget, like a shopping cart icon in the app bar, can watch the cart's total items:


// core/widgets/cart_icon_badge.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:my_app/features/shopping_cart/domain/notifiers/shopping_cart_notifier.dart';

class CartIconBadge extends ConsumerWidget {
  const CartIconBadge({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final totalItems = ref.watch(shoppingCartNotifierProvider.select((cart) => cart.totalItems));
    
    return Stack(
      children: [
        IconButton(
          icon: const Icon(Icons.shopping_cart),
          onPressed: () {
            // Navigate to cart screen
          },
        ),
        if (totalItems > 0)
          Positioned(
            right: 0,
            top: 0,
            child: Container(
              padding: const EdgeInsets.all(2),
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(10),
              ),
              constraints: const BoxConstraints(
                minWidth: 18,
                minHeight: 18,
              ),
              child: Text(
                '$totalItems',
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          )
      ],
    );
  }
}

Best Practices and Advanced Riverpod Features

ref.watch vs. ref.read: Use watch when you need the widget to rebuild on state changes; use read for one-time access to a provider's state or notifier.

AutoDispose: Add .autoDispose to providers that are no longer needed when not listened to, helping free up resources and prevent memory leaks.


final temporaryDataNotifierProvider = NotifierProvider.autoDispose<TemporaryDataNotifier, String>(
  TemporaryDataNotifier.new,
);

Family for Dynamic Data: When a provider needs an argument to fetch or manage its state (e.g., product details for a specific product ID), use .family.


final productDetailsProvider = FutureProvider.family<Product, String>((ref, productId) async {
  return ref.watch(productRepositoryProvider).fetchProduct(productId);
});

ProviderScope: Ensure your entire application is wrapped in a ProviderScope at the root of your widget tree.
```
void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}
        
```

Testing: Leverage ProviderContainer and overrideWith to easily test your providers in isolation without a full widget tree.


import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:test/test.dart';
import 'package:mocktail/mocktail.dart';
import 'package:my_app/features/products/domain/models/product.dart';
import 'package:my_app/features/products/domain/notifiers/product_list_notifier.dart';
import 'package:my_app/features/products/domain/repositories/product_repository.dart';

class MockProductRepository extends Mock implements ProductRepository {}

void main() {
  group('ProductListNotifier', () {
    test('should fetch initial products', () async {
      final mockRepository = MockProductRepository();
      final products = [Product(id: '1', name: 'Test Product', price: 10.0)];
      when(() => mockRepository.fetchProducts()).thenAnswer((_) async => products);

      final container = ProviderContainer(
        overrides: [
          productRepositoryProvider.overrideWithValue(mockRepository),
        ],
      );

      final notifier = container.read(productListNotifierProvider.notifier);
      await container.pump(); // Allow async build method to complete

      expect(container.read(productListNotifierProvider), products);
      verify(() => mockRepository.fetchProducts()).called(1);
      
      container.dispose();
    });
  });
}

Conclusion

Flutter and Riverpod form a powerful combination for building scalable, maintainable, and testable multi-feature applications. By adhering to a feature-based organization, wisely using shared and feature-specific providers, and leveraging Riverpod's robust capabilities like compile-time safety and granular rebuilds, developers can navigate the complexities of state management with confidence. This approach not only streamlines development but also sets a solid foundation for long-term app evolution and collaboration within larger teams.

Flutter State Riverpod

Share This Post