A Flutter app sample, Provider Fruits, shows a state management approach using the Provider package. The app has two separate screens: a list of fruits and a cart. The list of fruits represented by MyList widget and the cart represented by MyCart widget. The list of fruits screen includes a scrolling view of many fruit items (MyFruitItem) and add button (AddButton). The cart screen includes a list of added fruits (CartList) and total price of added fruits (CartTotal).
This is a widget tree of the Provider Fruits app:
In order to track states of the object, they need to be provided to widget further down the tree. Here a MultiProvider is used in order to provide both objects (in this case, ListModel and CartModel) at once to widget further down the tree.
The ListModel instance is provided using Provider, the ListModel never changes so a simple Provider here is fully enough.
The CartModel instance is provided using a ChangeNotifierProxyProvider, which combines two types of functionality:
- It will automatically subscribe to changes in CartModel (if only this functionality is required simply to use ChangeNotifierProvider).
- It takes the value of a previously provided object (in this case, ListModel), and uses it to build the value of CartModel (if only this functionality is required simply to use ProxyProvider).
This directory contains the model classes: ListModel, CartModel and an object Fruit skeleton. CartModel extends ChangeNotifier . Two classes (In this case, ListModel and CartModel) are provided in the main.dart. These classes represent the app state.
This directory contains widgets (MyList and MyCart) used to construct the two screens of the app with other widgets: a list of fruits and a cart.
This directory contains widgets FruitItem, AddButton, CartList, and CartTotal) used to construct the two screens of the app: a list of fruits and a cart.
A widget FruitItem has access to the current state of the list of fruits (ListModel) via Provider.of.
The widgets AddButton and CartList, have access to the current state of the cart (CartModel) via Provider.of.
This directory contains of the app Text Style: fontFamily, fontWeight, fontSize and text color.
