Managing State in Flutter

Now that you have an understanding of Provider, it’s time to put it to the test. We’re going to create a widget aptly called Provider. This widget provides two important methods, create and dispose.

The create method is where we create the value we want to access.

And of course, the dispose is where we do any teardown operations. So how do we access this object in code? There’s actually a few ways, but for now, you’ll access it via. the long form method. This is a simple Provider.of method. This works like you’ve used throughout the course. Let’s get started.

Download the starter project for this episode. I’ve reverted the project back to when we started the course. We currently have no state management in place. The first thing we are going to do is import the provider framework. Open pubspec.yaml. Add the following dependency:

provider: ^6.0.3

We are using version six when making this episode. Now we need to add our Provider to the widget tree. Open main.dart. import the provider package and pillar file.

import 'package:provider/provider.dart';
import 'models/pillar.dart';

Now to add our provider. It’s going to hold our Pillar data. First, we need to add it to the tree. Select the TutorialPage, and wrap it in another widget. Change it Provider

body: Provider<Pillar>(
    child: const TutorialsPage()),

Next, we need to pass in our model data. Update it to the following:

create: (context) =>
                Pillar(type: PillarType.flutter, articleCount: 115),

And that’s it. We’ve passed in our pillar. Now to access it. Open tutorials_page.dart. Import the provider package and model file.

import 'package:provider/provider.dart';
import '../models/pillar.dart';

Now let’s get a reference to our Pillar model object. We will use the of method on Provider, just like we did our inherited widget. Add the following to the _TutorialsPageState build method:

final pillar = Provider.of<Pillar>(context);

Now to use it. Update the code to the following:

children: <Widget>[
  const Center(
    child: TutorialWidget(),
  ),
  Padding(
    padding: const EdgeInsets.only(top: 24.0),
    child: Text(
      'Total Tutorials: ${pillar.articleCount}',
      style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
    ),
  )
],

Open tutorial_widget.dart. Like before, add the following imports.

import 'package:provider/provider.dart';
import '../models/pillar.dart';

Get a reference to the Pillar in the state’s build method.

final pillar = Provider.of<Pillar>(context);

Finally, update the build to the following:

return Stack(
  children: [
    InkWell(
      onTap: () {
        pillar.increaseArticleCount();
      },
      child:
          Image.asset('assets/images/${pillar.type.imageName}', width: 110, height: 110),
    ),
    Positioned(
      bottom: 2,
      child: CircleAvatar(
        backgroundColor: Colors.blue,
        child: Text(pillar.articleCount.toString()),
      ),
    )
  ],
);

And that’s it! Build and run. You can see that our app is now using values that we passed in with our model.

Tap the Flutter button. Yet, our article count is not increasing. This is because the provider isn’t providing state updates. It allows us to access an object and call its methods, but in our case we need to let know Provider know when our model changes, and for that, we use a change provider.