With Flutter 2.0, you can build apps on mobile, web and desktop. Graphics performance is fantastic and the development tools are great. The main barrier to learning Flutter is an understanding of state management. This tutorial covers the Provider package, one of the most popular and easiest tools to manage state in Flutter.
When to Use Provider
If your application is on a single screen with limited interaction with outside data sources and APIs, you should use the built-in
setState method of Flutter. You do not need to use a provider for simple applications. If your application has multiple screens with multiple API calls, you should use the provider.
How Provider Works
Provider makes it easier to set widgets to listen a variable and wait for a change. You can also use the provider to send a notification to a listener when data changes.
For our simplified example, we have two screens. The first screen is a list of thumbnails.
Each thumbnail is 9KB with a size of 320×160. The thumbnails are designed to be fast to load over a network. To make the tutorial easier, the thumbnails and full-size images are stored locally. The thumbnails and images are in equirectangular format to provide a virtual 360° experience. When a thumbnail is tapped, the application goes to another screen that displays a full-size image with 360° navigation.
The core concept of a provider is that a widget listens for changes. To help manage the changes and notifications to the listeners, we use the
ChangeNotifer Flutter class. In the example below, the class
ImageNotifier manages changes to a variable called
When a person presses the thumbnail button on screen 1, the
updateImage() method is run. On screen 2, the image is displayed with the getter
Up to this point, we haven’t used provider.
ChangeNotifier is built into Flutter.
Our first step to using a provider starts in the
main() method. It’s the first thing you run in
runApp(). In the
main.dart file, we need to wrap
ChangeNotifierProvider around your main app. I’ve called the main app
Change, Notification, and Provide
Let’s review the core concepts up to this point.
- Data changes. In our example, we’re changing an image. The change starts by clicking on the thumbnail. The
imagevariable is changed with the
updateImage()method we created.
- Create a notification of the change. In our example, our notification is that the full resolution image has changed. The notification is created with
notifyListeners()which is also in the
- Provide the notification to the widgets that are listening for the specific change.
Although these concepts are fairly easy to understand, it is different from a procedural programming paradigm.
Let’s look at an alternative process with psuedo-code.
On screen 1
On screen 2
The process above is easier to understand for simple applications. It becomes increasingly difficult to manage as the application gets more complex.
The provider process adds a few additional steps. More importantly, it requires a change in thinking about how the image is displayed. Instead of the button changing the imageName variable in screen 2 directly, the button talks to an intermediary that sends a notification to any widget that has subscribed to the change.
Change Notification Manager
Updating the Image
From screen 1, we need to call the
updateImage() method. The code may look a bit confusing at first, but you’ll quickly get used to it with just a little bit of practice.
ImageNotifier is the name of the class we created that extends
ChangeNotifier, which is built into Flutter.
The full code for the widget of the thumbnail is shown below.
Displaying the Image
The image is displayed with a similar process of reading from the context.
The last word in the line,
image, is the getter from
I’ve wrapped the image in
Panorama() to get the 360° navigation.
Running the Code
You need to have Flutter 2.0 and Dart 2.12.
Select the Device
Note, to run Windows, you will need Visual Studio (not just VS Code) installed. To run macOS and iOS, you’ll need XCode. To run Android, you need an Android Virtual Device. The easiest way to get the AVD is to install Android Studio.
More information on building for Windows desktop is available in my previous DZone article, Build Great Windows Desktop Apps With Flutter.
To quickly gain practice modifying the example code for this tutorial, you can add a new variable to
Remember to add the following for each new variable:
- Private variable initialization. Note that the example uses Dart 2.12 with sound null safety. You need to assign a default value to all variables or explicitly tell dart the variable can be null. You cannot do something like
- Setter with
If you prefer to start with a completely blank editor and a new Flutter project, go through the steps in the video I mentioned at the start of the article.
Other State Management Techniques
There are many other Flutter state management techniques. Refer to the Flutter official documents for more options. Provider is a great way for you to get started.
Flutter is a wonderful framework for rapidly building mobile, desktop, and web apps. There are many options for state management. If your app has more than a few screens and data storage options, you should use a state management package instead of relying on
setState(). Provider is one of the most popular packages for state management. It’s easy to use once you understand the process of making a change, creating a notification of the change, providing the change, and listening for the change.
The best way to really understand the concept of state management is to implement it. Open up VS Code and starting coding right now!