Understanding State Management Using Providers in Flutter

Meysam Mahfouzi
8 min readFeb 2, 2021

Everything around us has a state. For example, what are the states of a thermometer?

  • The color of the metal plate (white)
  • The color of the liquid (red)
  • The height of the liquid in the tube (e.g. 10 centimeters)
Photo by Jarosław Kwoczała on Unsplash

And what are the states of weather?

  • Temperature (40˚C)
  • Speed of the wind
  • Sunny or cloudy
  • Rainy or snowy

Now what’s State Management? State management is updating the state of one thing, based on the state of another thing.

This state management happens automatically in nature. Whenever the sun rises, the state of birds changes to “singing”. Whenever it rains, the state of soil changes to “Wet” and its color becomes darker. Whenever the temperature increases, the height of the liquid in thermometer increases as well. Every change in the state of things is managed automatically.

But in Flutter, we have to manage the state changes ourselves. Welcome to the United States of Flutter!

Using setState

The simplest way to manage state changes in Flutter is by calling the setState() method. That works fine if everything gets changed and updated in a single Stateful widget. But when you have multiple widgets that depend on each other to update their states, forget about using setState! Your code will get messy and difficult to maintain very soon!

The solution is using the provider package.

A short history of provider

There are many other solutions for state management like:

  • ScopedModel
  • BLoC: For many people this is too complex for their need
  • provide package (this is ScopedModel v2)
  • provider package

The second version of ScopedModel was developed and published by Google, but then they realised that there is already a better package out there called “provider”. So Google deprecated their own “provide” package and encouraged everyone to use the “provider” package instead!