State Management in Flutter Using Provider Package

Moving between screens in a mobile application requires passing information from one screen to the next. Unless you have a single screen app, you are going to want to do this.

In this article, I am referring to this video tutorial which walks you through each step. I am using Flutter 2.0 and two Flutter packages, Provider and Panorama.

https://www.youtube.com/embed/h6LQqBAioBA&autoplay=1

Following the video, I built an app that shows thumbnails and main images in order to show off the interior of a car. This could be expanded for selling used cars.

You can build it, too! Code and image files are available on GitHub. You can use your own image files, but images are provided for convenience. In my own experience, taking pictures, making sure the sizes and formats are correct, and adding them to a Flutter app was prone to small mistakes. It burnt up a lot of time. Since that is not really a programming issue, for the purposes of learning to handle state management, images are provided.

Main concept

You need to set your widget to listen to a variable and to wait for a change. And you need to send a notification to a listener when data changes.

1. Change. We’re clicking on a thumbnail and showing a full image. The image variable is changed with the updateImage() method.
2. Notification. You need to addnotifyListeners() to create a notification for listeners.

There is one screen with thumbnails. And you can click on the thumbnails to see the full image. The full images are in equirectangular format so you can scroll around within a 360° image, really showing off the interior of a car.

There are multiple Flutter packages that allow you to do this. Provider is popular. It even has a Flutter Favorite badge.

Thumbnails

Main images

Clicking through

Handling 360 degree images with Panorama Package

By simply importing the Panorama package, you will be able to display 360 degree images and swipe through them.

Package description can be found here:

https://pub.dev/packages/panorama

import ‘package:panorama/panorama.dart’;

Conclusion

I am still working with this tutorial and adding things like text overlay, changing text overlays, changing sizes of the thumbnails, and more. For me, the key is getting a basic app up and running, and getting state management handles. Getting used to using a state management package like Provider is the key. If you have other state management packages that you prefer, please let me know in the comments.