Manage State with Provider

Oct 17 2019 · Video Course (26 mins) · Intermediate

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.

5/5 2 Ratings

Version

  • Dart 2.5, Flutter 1.9, VS Code 1.39

Manage State with Provider

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.

1

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

2

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.

3

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.

4

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

5

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.

6

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

7

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.

8

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

Contributors

Comments