New Flutter developers need to understand state management in order to build more complex applications with multiple screens and data storage options.
Join the DZone community and get the full member experience. 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. A video version of this tutorial is available. Code and image files are on GitHub. 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. 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 image.
