Manage State with Provider

Similar to other frameworks like React, Flutter favors a declarative approach to building the user interface, in which the app has a state, and the UI is a function of the state. In this course, you'll see how to use the Provider package to move app state up the widget tree into providers that trigger rebuilds of the UI when the app state changes. You'll see that using a provider is straightforward and provides a foundation for understanding more advanced approaches to managing app state. By Joe Howard.

3.5 (12) · 4 Reviews

Save for later
Comments
Share

Who is this for?

iOS, Android, web, and new Flutter developers that want to understand the declarative approach to user interface development and see how to use the Provider package to manage app state in a Flutter app.

Covered concepts

  • Declarative UI development
  • App state vs. local state
  • Using a simple Provider
  • Using a ChangeNotifier
  • Adding a ChangeNotifierProvider
  • Using a Consumer

Part 1: Manage State with Provider

01
Toggle description

Learn about how Flutter supports a declarative approach to building an app user interface, as opposed to the usual imperative approach used in the native SDKs.

Toggle description

Understand the differences between local state, best stored in StatefulWidgets, and app state that is shared across multiple widgets and screens of an app.

Toggle description

Take a tour of the starter project code, see the use of local state in the Application class StatefulWidget, and build and run the starter project.

Toggle description

Set up and use your first Provider by sharing the FilmsModel data in order to show the list of films on the first screen of the app.

Toggle description

Create the model for your second provider, a ChangeNotifier that will be used to provide favorites data across the app.

Toggle description

Turn your new model into a ChangeNotifierProvider, and access the provided data to allow your user to favorite films on the app's first screen.

Toggle description

Build out the second screen of the app using your ChangeNotifierProvider, and see how to use a Consumer to accept data from a Provider.

Toggle description

Use the flutter_test package to add some simple unit tests for a model, and see where to go from here to learn more about flutter state management.