Upgrade provider shopper (#521)

provider_shopper/lib/screens/cart.dart

@@ -37,7 +37,10 @@ class _CartList extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var itemNameStyle = Theme.of(context).textTheme.headline6;
-    var cart = Provider.of<CartModel>(context);
+    // This gets the current state of CartModel and also tells Flutter
+    // to rebuild this widget when CartModel notifies listeners (in other words,
+    // when it changes).
+    var cart = context.watch<CartModel>();
 
     return ListView.builder(
       itemCount: cart.items.length,
@@ -64,6 +67,12 @@ class _CartTotal extends StatelessWidget {
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
+            // Another way to listen to a model's change is to include
+            // the Consumer widget. This widget will automatically listen
+            // to CartModel and rerun its builder on every change.
+            //
+            // The important thing is that it will not rebuild
+            // the rest of the widgets in this build method.
             Consumer<CartModel>(
                 builder: (context, cart, child) =>
                     Text('\$${cart.totalPrice}', style: hugeStyle)),

provider_shopper/lib/screens/catalog.dart

@@ -32,14 +32,30 @@ class _AddButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var cart = Provider.of<CartModel>(context);
+    // The context.select() method will let you listen to changes to
+    // a *part* of a model. You define a function that "selects" (i.e. returns)
+    // the part you're interested in, and the provider package will not rebuild
+    // this widget unless that particular part of the model changes.
+    //
+    // This can lead to significant performance improvements.
+    var isInCart = context.select<CartModel, bool>(
+      // Here, we are only interested whether [item] is inside the cart.
+      (cart) => cart.items.contains(item),
+    );
 
     return FlatButton(
-      onPressed: cart.items.contains(item) ? null : () => cart.add(item),
+      onPressed: isInCart
+          ? null
+          : () {
+              // If the item is not in cart, we let the user add it.
+              // We are using context.read() here because the callback
+              // is executed whenever the user taps the the button. In other
+              // words, it is executed outside the build method.
+              var cart = context.read<CartModel>();
+              cart.add(item);
+            },
       splashColor: Theme.of(context).primaryColor,
-      child: cart.items.contains(item)
-          ? Icon(Icons.check, semanticLabel: 'ADDED')
-          : Text('ADD'),
+      child: isInCart ? Icon(Icons.check, semanticLabel: 'ADDED') : Text('ADD'),
     );
   }
 }
@@ -67,8 +83,11 @@ class _MyListItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var catalog = Provider.of<CatalogModel>(context);
-    var item = catalog.getByPosition(index);
+    var item = context.select<CatalogModel, Item>(
+      // Here, we are only interested in the item at [index]. We don't care
+      // about any other change.
+      (catalog) => catalog.getByPosition(index),
+    );
     var textTheme = Theme.of(context).textTheme.headline6;
 
     return Padding(