State management is a crucial aspect of Flutter development, helping you manage and persist application state efficiently. With the rise of Flutter's popularity, various state management solutions have evolved, among which Provider and Riverpod are two of the most favored options. In this article, we'll break down these two libraries, how they differ, and provide you with examples to get started.

Understanding Provider

Provider is a state management library that makes it easier to manage and distribute application states. It's built on top of Flutter's InheritedWidget, which allows you to share objects throughout the widget tree efficiently.

Setting Up Provider

To use Provider, you need to add it to your Flutter project's pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

After adding the Dependency, run flutter pub get to install it.

Creating a Simple State Model

Let's create a basic counter app using Provider. We'll start by creating a Counter class that extends ChangeNotifier.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Notifies any listeners of state changes.
  }
}

Building the Application with Provider

Now, we will build the main application and provide the Counter instance to the widget tree:

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(child: CounterDisplay()),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of<Counter>(context, listen: false).increment();
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class CounterDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final count = Provider.of<Counter>(context).count; // Listen to changes

    return Text(
      '$count',
      style: TextStyle(fontSize: 48),
    );
  }
}

In this code, we created a ChangeNotifierProvider that will rebuild the CounterDisplay whenever _count changes due to the increment method being called.

Stepping Up with Riverpod

Riverpod is a more advanced state management solution that simplifies Provider's complexity. It solves some of the limitations of Provider, like not being able to use Provider outside of the widget tree, enabling greater flexibility.

Setting Up Riverpod

To use Riverpod, you need to add it to your pubspec.yaml file as well:

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0

Run flutter pub get to install it.

Creating a Simple State Model with Riverpod

Much like our Provider example, we will create a counter example, but now using Riverpod.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

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

  void increment() => state++;
}

Building the Application Using Riverpod

Now let's update our Flutter app to utilize Riverpod:

void main() {
  runApp(ProviderScope(child: MyApp())); // Wrap the app in ProviderScope
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Example')),
        body: Center(child: CounterDisplay()),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            context.read(counterProvider.notifier).increment(); // Increment the counter
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class CounterDisplay extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final count = watch(counterProvider); // Watch for changes

    return Text(
      '$count',
      style: TextStyle(fontSize: 48),
    );
  }
}

In this example of Riverpod, we define a StateNotifierProvider, giving us a more structured approach to managing state and better performance. The CounterDisplay widget responds to changes in the counter state and rebuilds automatically.

Utilizing Riverpod also ensures that you can manage state in a more modular and testable way compared to its predecessor, Provider.

In conclusion, both Provider and Riverpod offer excellent solutions for state management in Flutter. Depending on the complexity of your application and your preference for simplicity versus structure, each has its advantages.