How to use Provider for Flutter state management

State management is one of the most important aspects of developing a Flutter app. It refers to how we manage and update data that affects how our app looks and behaves. Flutter can also use the state to display pieces of information to the user.

In this article, we will learn how to use Provider, a popular package for state management in Flutter. Provider was created by Remi Rousselet and aims to handle the state as cleanly as possible. In Provider, widgets listen to changes in the state and update as soon as they are notified.

To get started with Provider, we need to add it as a dependency in our pubspec.yaml file:

Copycopy code to clipboard
1dependencies:
2  provider: ^5.0.0

Then we need to run flutter pub get command to get a local copy of the package.

Next, we need to create a new Material app in our main.dart file:

Copycopy code to clipboard
1import 'package:flutter/material.dart';
2import 'package:provider/provider.dart';
3
4void main() {
5  runApp(MyApp());
6}
7
8class MyApp extends StatelessWidget {
9  @override
10  Widget build(BuildContext context) {
11    return MaterialApp(
12      home: HomeScreen(),
13    );
14  }
15}

Now we are ready to use Provider in our app. There are different types of providers that we can use depending on our needs. For this example, we will use ChangeNotifierProvider, which listens to a ChangeNotifier object and notifies its listeners when it changes.

Let's create a simple counter app that uses ChangeNotifierProvider for state management.

First, we need to create a class that extends ChangeNotifier and holds our counter value:

Copycopy code to clipboard
1class Counter extends ChangeNotifier {
2  int _value = 0;
3
4  int get value => _value;
5
6  void increment() {
7    _value++;
8    notifyListeners();
9  }
10}

Notice how we call notifyListeners() method whenever we change the value. This will trigger all the widgets that depend on this object to rebuild.

Next, we need to wrap our home screen with ChangeNotifierProvider and pass an instance of our counter class:

Copycopy code to clipboard
1class HomeScreen extends StatelessWidget {
2  @override
3  Widget build(BuildContext context) {
4    return ChangeNotifierProvider(
5      create: (context) => Counter(),
6      child: Scaffold(
7        appBar: AppBar(
8          title: Text('Provider Example'),
9        ),
10        body: Center(
11          child: Text('Hello World'),
12        ),
13      ),
14    );
15  }
16}

Now we have provided our counter object to all widgets below our home screen.

To access our counter object from any widget below our home screen, we can use Provider.of<Counter>(context) method:

Copycopy code to clipboard
1Text('Hello World')

We can replace this line with:

Copycopy code to clipboard
1Text(Provider.of<Counter>(context).value.toString())

This will display our current counter value on the screen.

To update our counter value when we tap on a button, we can add a floating action button widget below our body widget:

Copycopy code to clipboard
1floatingActionButton: FloatingActionButton(
2  onPressed: () {
3    Provider.of<Counter>(context, listen: false).increment();
4  },
5),

Notice how we pass listen: false parameter when calling Provider.of<Counter>(context) method. This is because we don't want this widget to rebuild when the counter value changes. We only want it to trigger the increment method.

That’s it! We have successfully used Provider for state management in our Flutter app.