Flutter: State Management with Provider
Flutter is Google’s UI Framework for building Cross Platform applications, with Beautiful user experiences. Flutter.dev
The flutter community has provided many solutions for state management, Scoped_model, Inherited Widgets and BLoc + Rx to name a small selection.
In contrast to the Android team’s years long lack of opinion on the issues of State management and architecture. The Flutter team have now proposed their recommended solution for state management.
At least for simple to intermediate complexity projects, the blessed library is Provider.
Provider is basically syntactic sugar and helper methods that wraps the framework’s Inherited Widget class. This makes it easier to use correctly, and with the added benefit of less boilerplate code.
Provider has at it’s core, two main concepts,
Providers — which provide state objects.
Consumers — which consume or use the state.
The library provides several implementations of Providers, This example uses the ChangeNotifierProvider, which auto-magically creates and disposes of a ChangeNotifier for the provided instance.
Simple Example — RGB Sliders
Let’s build a simple app to demonstrate how Providers hang together.
This is a simple app that fills the screen with the colour selected by three (RGB) sliders.
First we need to create a data object to hold the current value of the selected RGB colour.
A simple DTO. Note the ChangeNotifier Mixin, this provides support for the registration and notification of observers. The observers of this class are notified when changes occur, this is triggered by notifyListeners() .
Now to create the user interface for the app. The basic layout looks a lot like this.
Now that we have the basic layout of the app sorted, we can start to add some interactivity.
So first we have to provide some state to hold the selected colour.
As with all reactive apps, the state needs to be held at the highest position in the widget tree, so that all widgets that need to use it are descendants. In this case lets add it below the App but above the RGBHomePage.
The ChangeNotifierProvider handles the creation and disposing of notifiers for Consumers of the state for us. The builder is a function which returns the object we want to provide.
Now we have some state, we need to consume it and react to changes.
Putting it all together, The Consumer widget find the Provider of the RGB object and registers itself as a listener.
The current value of the rgb object is passed to the builder method which creates the child widget tree. The child tree is rebuild every time the notifyListeners() method is called in the provided RGB object.
When the user changes any of the sliders, their onChanged method is called. this in turn updates the corresponding rgb value in the state. This triggers the notifyListeners() call which causes the subtree to be rebuilt with the new state.
In reactive programming, events should pass up the widget tree (Slider value changed ), and state changes should flow down the tree ( new RGB Value ).
I hope this has been some help in understanding the Flutter Provider library.
This is my first Medium article, comments and critique are welcome.