Managing state efficiently using Provider

State management in Flutter is an important task to do. We all know that it can be done using setState but, what if the state has to be maintained across different widgets around the widget tree. Yes, you can pass it through the constructor but what if the target widget is deep down in the tree and you have to go through numerous widgets’ constructors that not even require them. That’s where the ‘Provider’ package comes into the picture.

We’ll develop a shopping cart app where the user can add or remove items to the cart and see the overall price too.

At the end of this article, we’ll get something like this:

Screenshot of final app

We’ll create 2 separate screens: one for the catalog and the other for the cart. Here in the list view, we have items that have a name, a price, and whether it is added to the cart or not. For this, we’ll create an Item class.

We’ll create a file for manipulating the items list using change notifier also:

This code is self-explaining and it has _items list for storing all items and _addedItems list for storing currently added items. The _items list can be a database also from where the data can be fetched. add() method adds the selected items to _addedItems and reset() clears the _addedItems list and sets the sum variable to 0. Don’t forget to call the notifyListeners() every time you make changes and to extend the ChangeNotifier class from the material package. Now the models are complete, let’s complete the UI part using the Consumer widget.

Here’s the catalog screen-

In the body, we use the consumer widget (we can also use Provider.of<DataType>(context).somevalue but to avoid repetition at every place we use Consumer). Consumer just “consumes” the data “provided” by the Provider to the widget.

Similiarly, we have the cart screen:

Here we show the “empty cart” statement if nothing is added and the cart items otherwise. Also, wrap the widget with ChangeNotifierProvider at a point high enough in the widget tree so that it gets the data to its children. Note: Do not put the ChangeNotifierProvider too high or it will pollute the scope. Refer to this for more information on this practice. I had to wrap MaterialApp with ChangeNotifierProvider for obvious reasons.

It takes a ‘create’ parameter that has to return the Datatype of your model, in this case, it is the ItemData.

The directory structure of the project will look something like this:

So, that’s all in this project, we’ve successfully changed & managed the state in the app without using any expensive setState methods!

Do read the official provider package docs here. For the full source code of the app, please check out my Github repository.

Connect with me on Linkedin and follow me on Instagram!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nandan Wewhare

Nandan Wewhare

Co-Founder — Tribus Tech Solutions (https://tribustechsolutions.medium.com/). Mobile and web dev enthusiast.