Using Provider for Simple State Management in Flutter

Flutter, Google’s UI toolkit, offers several state management solutions ranging from simple to complex. For small to medium-sized applications, the Provider package provides a straightforward and effective way to manage state. This article explores how to use Provider for simple state management in Flutter, covering the basic concepts, implementation, and best practices.

What is State Management?

State management is the process of handling the data that changes in your application. It involves storing, updating, and accessing the application’s data and notifying the UI when the data changes. Effective state management is crucial for building maintainable and scalable Flutter applications.

Why Use Provider for State Management?

• Simplicity: Provider offers a simple API, making it easy to understand and implement.
• Centralized State: It provides a way to centralize and manage the state in a hierarchical manner.
• Lifecycle Management: Provider supports lifecycle management for state objects, helping to prevent memory leaks.
• Ease of Use: It simplifies state management without introducing unnecessary complexity, making it suitable for small to medium-sized apps.

Setting Up Provider in Flutter

Step 1: Add the Provider Dependency

Add the provider package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0 # Use the latest version

Run flutter pub get to install the dependency.

Step 2: Create a State Class

Define a class to hold the state you want to manage. This class will typically contain the data and methods to modify it.

import 'package:flutter/material.dart';

class CounterState with ChangeNotifier {
  int _counter = 0;
  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners(); // Notify listeners that the state has changed
  }
}

In this example:

• CounterState extends ChangeNotifier, which is essential for notifying listeners about state changes.
• _counter is a private variable that holds the counter value.
• counter is a getter method to access the counter value.
• increment() is a method to increment the counter and notify listeners using notifyListeners().

Step 3: Provide the State to the Widget Tree

Use ChangeNotifierProvider to provide the state to a specific part of your widget tree. This makes the state available to all widgets within that subtree.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

Here, ChangeNotifierProvider wraps the MyApp widget and creates an instance of CounterState. This makes CounterState available to all widgets under MyApp.

Step 4: Consume the State in Widgets

Use Consumer, Provider.of, or context.watch/context.read extensions to access the state in your widgets.

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            // Using Consumer
            Consumer<CounterState>(
              builder: (context, counterState, child) {
                return Text(
                  '${counterState.counter}',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Using Provider.of
          Provider.of<CounterState>(context, listen: false).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

In this example:

• Consumer<CounterState> rebuilds the part of the UI that depends on CounterState when the state changes.
• Provider.of<CounterState>(context, listen: false).increment() is used to access the increment method without rebuilding the widget.

Alternatively, you can use extension methods context.watch<T>() and context.read<T>() (requires Flutter 3.0 or later):

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterState = context.watch<CounterState>(); // Rebuild when counter changes
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counterState.counter}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<CounterState>().increment(); // Do not rebuild
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Here:

• context.watch<CounterState>() rebuilds the widget when the CounterState changes.
• context.read<CounterState>() provides access to CounterState without causing a rebuild.

Best Practices for Using Provider

• Use ChangeNotifierProvider for Simple State: Suitable for managing simple states like counters, toggles, and simple data.
• Use MultiProvider for Multiple Providers: If you have multiple state classes, use MultiProvider to provide them at the root of your application.
• Use Consumer or context.watch Judiciously: Only wrap the widgets that need to be rebuilt when the state changes to avoid unnecessary rebuilds.
• Use Provider.of(context, listen: false) or context.read for Actions: When calling methods that modify the state, use Provider.of(context, listen: false) or context.read to avoid rebuilding the widget.
• Properly Dispose of Resources: If your state class holds resources (e.g., streams, timers), override the dispose method to release them.

Example with Multiple Providers

To manage multiple state classes, use MultiProvider:

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

class ThemeState with ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.light;
  ThemeMode get themeMode => _themeMode;

  void toggleTheme() {
    _themeMode = (_themeMode == ThemeMode.light) ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CounterState()),
        ChangeNotifierProvider(create: (context) => ThemeState()),
      ],
      child: MyApp(),
    ),
  );
}

Conclusion

Provider is an excellent choice for simple state management in Flutter applications. Its simplicity, centralized state management, and lifecycle support make it easy to use and maintain. By following the best practices, you can efficiently manage your application’s state and build responsive and scalable Flutter apps. Whether you’re building a small app or a medium-sized project, Provider provides a solid foundation for effective state management.