Shrine Tweaks (#4558)

examples/flutter_gallery/lib/demo/shrine/shrine_data.dart

@@ -64,7 +64,7 @@ const List<Product> _allProducts = const <Product> [
     name: 'Sunglasses',
     imageAsset: 'packages/flutter_gallery_assets/shrine/products/sunnies.png',
     categories: const <String>['travel', 'fashion', 'beauty'],
-    price: 70.00,
+    price: 20.00,
     vendor: _trevor,
     description:
       'Be an optimist. Carry Sunglasses with you at all times. All Tints and '
@@ -76,7 +76,7 @@ const List<Product> _allProducts = const <Product> [
     name: 'Clock',
     imageAsset: 'packages/flutter_gallery_assets/shrine/products/clock.png',
     categories: const <String>['furniture'],
-    price: 120.00,
+    price: 30.00,
     vendor: _trevor,
     description:
       'Timekeeper Co makes clocks that tell time precisely. Clock is '
@@ -136,7 +136,7 @@ const List<Product> _allProducts = const <Product> [
     name: 'Teapot',
     imageAsset: 'packages/flutter_gallery_assets/shrine/products/teapot.png',
     categories: const <String>['furniture', 'fashion'],
-    price: 210.00,
+    price: 70.00,
     vendor: _trevor,
     featureTitle: 'Beautiful little teapot',
     featureDescription:
@@ -171,7 +171,7 @@ const List<Product> _allProducts = const <Product> [
     name: 'Perfect Goldfish Bowl',
     imageAsset: 'packages/flutter_gallery_assets/shrine/products/fish_bowl.png',
     categories: const <String>['latest', 'furniture'],
-    price: 25.00,
+    price: 30.00,
     vendor: _ali,
     description:
       'The Perfect Bowl Co makes the best bowls for just about anything you can '
@@ -182,7 +182,7 @@ const List<Product> _allProducts = const <Product> [
     name: 'Red Lipstick Set',
     imageAsset: 'packages/flutter_gallery_assets/shrine/products/lipstick.png',
     categories: const <String>['fashion', 'beauty'],
-    price: 25.00,
+    price: 54.00,
     vendor: _sandra,
     description:
       'Trying to find the perfect shade to match your mood? Try no longer. Red '
@@ -249,7 +249,7 @@ const List<Product> _allProducts = const <Product> [
     name: 'Surfboard',
     imageAsset: 'packages/flutter_gallery_assets/shrine/products/surfboard.png',
     categories: const <String>[ 'travel', 'latest'],
-    price: 25.00,
+    price: 120.00,
     vendor: _stella,
     description:
       'Who says you can’t walk on water? With Surfboard, by Surfboard Supply, '

examples/flutter_gallery/lib/demo/shrine/shrine_home.dart

@@ -54,23 +54,48 @@ class VendorItem extends StatelessWidget {
 
 /// Displays the product's price. If the product is in the shopping cart the background
 /// is highlighted.
-class PriceItem extends StatelessWidget {
+abstract class PriceItem extends StatelessWidget {
   PriceItem({ Key key, this.product }) : super(key: key) {
     assert(product != null);
   }
 
   final Product product;
 
-  @override
-  Widget build(BuildContext context) {
+  Widget buildItem(BuildContext context, TextStyle style, EdgeInsets padding) {
     BoxDecoration decoration;
     if (shoppingCart[product] != null)
       decoration = new BoxDecoration(backgroundColor: const Color(0xFFFFE0E0));
 
     return new Container(
-      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      padding: padding,
       decoration: decoration,
-      child: new Text(product.priceString, style: ShrineTheme.of(context).priceStyle)
+      child: new Text(product.priceString, style: style)
+    );
+  }
+}
+
+class ProductPriceItem extends PriceItem {
+  ProductPriceItem({ Key key, Product product }) : super(key: key, product: product);
+
+  @override
+  Widget build(BuildContext context) {
+    return buildItem(
+      context,
+      ShrineTheme.of(context).priceStyle,
+      const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0)
+    );
+  }
+}
+
+class FeaturePriceItem extends PriceItem {
+  FeaturePriceItem({ Key key, Product product }) : super(key: key, product: product);
+
+  @override
+  Widget build(BuildContext context) {
+    return buildItem(
+      context,
+      ShrineTheme.of(context).featurePriceStyle,
+      const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0)
     );
   }
 }
@@ -124,7 +149,7 @@ class FeatureItem extends StatelessWidget {
               height: unitSize,
               child: new Align(
                 alignment: FractionalOffset.topRight,
-                child: new PriceItem(product: product)
+                child: new FeaturePriceItem(product: product)
               )
             ),
             new Flexible(
@@ -189,37 +214,38 @@ class ProductItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return new Card(
-      child: new Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: new Column(
-          children: <Widget>[
-            new Align(
-              alignment: FractionalOffset.centerRight,
-              child: new PriceItem(product: product)
-            ),
-            new SizedBox(
-              width: 144.0,
-              height: 144.0,
-              child: new Stack(
-                children: <Widget>[
-                  new Hero(
-                    tag: productHeroTag,
-                    key: new ObjectKey(product),
-                    child: new AssetImage(
-                      fit: ImageFit.contain,
-                      name: product.imageAsset
-                    )
-                  ),
-                  new Material(
-                    color: Theme.of(context).canvasColor.withAlpha(0x00),
-                    child: new InkWell(onTap: onPressed)
-                  ),
-                ]
-              )
-            ),
-            new VendorItem(vendor: product.vendor)
-          ]
-        )
+      child: new Column(
+        children: <Widget>[
+          new Align(
+            alignment: FractionalOffset.centerRight,
+            child: new ProductPriceItem(product: product)
+          ),
+          new Container(
+            width: 144.0,
+            height: 144.0,
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: new Stack(
+              children: <Widget>[
+                new Hero(
+                  tag: productHeroTag,
+                  key: new ObjectKey(product),
+                  child: new AssetImage(
+                    fit: ImageFit.contain,
+                    name: product.imageAsset
+                  )
+                ),
+                new Material(
+                  color: Theme.of(context).canvasColor.withAlpha(0x00),
+                  child: new InkWell(onTap: onPressed)
+                ),
+              ]
+            )
+          ),
+          new Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: new VendorItem(vendor: product.vendor)
+          )
+        ]
       )
     );
   }

examples/flutter_gallery/lib/demo/shrine/shrine_page.dart

@@ -12,23 +12,48 @@ enum ShrineAction {
   emptyCart
 }
 
-/// Defines the Scaffold, AppBar, etc that the demo pages have in common.
-class ShrinePage extends StatelessWidget {
+class ShrinePage extends StatefulWidget {
   ShrinePage({ Key key, this.scaffoldKey, this.body, this.floatingActionButton }) : super(key: key);
 
   final Key scaffoldKey;
   final Widget body;
   final Widget floatingActionButton;
 
+  @override
+  ShrinePageState createState() => new ShrinePageState();
+}
+
+/// Defines the Scaffold, AppBar, etc that the demo pages have in common.
+class ShrinePageState extends State<ShrinePage> {
+  int _appBarElevation = 0;
+
+  bool _handleScrollNotification(ScrollNotification notification) {
+    int elevation = notification.scrollable.scrollOffset <= 0.0 ? 0 : 1;
+    if (elevation != _appBarElevation) {
+      setState(() {
+        _appBarElevation = elevation;
+      });
+    }
+    return false;
+  }
+
   @override
   Widget build(BuildContext context) {
     return new Scaffold(
-      key: scaffoldKey,
+      key: config.scaffoldKey,
       appBar: new AppBar(
+        elevation: _appBarElevation,
+        backgroundColor: Theme.of(context).cardColor,
+        flexibleSpace: new Container(
+          decoration: new BoxDecoration(
+            border: new Border(
+              bottom: new BorderSide(color: const Color(0xFFD9D9D9))
+            )
+          )
+        ),
         title: new Center(
           child: new Text('SHRINE', style: ShrineTheme.of(context).appBarTitleStyle)
         ),
-        backgroundColor: Theme.of(context).canvasColor,
         actions: <Widget>[
           new IconButton(
             icon: Icons.shopping_cart,
@@ -68,8 +93,11 @@ class ShrinePage extends StatelessWidget {
           )
         ]
       ),
-      floatingActionButton: floatingActionButton,
-      body: body
+      floatingActionButton: config.floatingActionButton,
+      body: new NotificationListener<ScrollNotification>(
+        onNotification: _handleScrollNotification,
+        child: config.body
+      )
     );
   }
 }

examples/flutter_gallery/lib/demo/shrine/shrine_theme.dart

@@ -17,6 +17,7 @@ TextStyle robotoLight12(Color color) => new ShrineStyle.roboto(12.0, FontWeight.
 TextStyle robotoRegular14(Color color) => new ShrineStyle.roboto(14.0, FontWeight.w500, color);
 TextStyle robotoMedium14(Color color) => new ShrineStyle.roboto(14.0, FontWeight.w600, color);
 TextStyle robotoLight14(Color color) => new ShrineStyle.roboto(14.0, FontWeight.w300, color);
+TextStyle robotoRegular16(Color color) => new ShrineStyle.roboto(16.0, FontWeight.w500, color);
 TextStyle robotoRegular20(Color color) => new ShrineStyle.roboto(20.0, FontWeight.w500, color);
 TextStyle abrilFatfaceRegular24(Color color) => new ShrineStyle.abrilFatface(24.0, FontWeight.w500, color);
 TextStyle abrilFatfaceRegular34(Color color) => new ShrineStyle.abrilFatface(34.0, FontWeight.w500, color);
@@ -32,7 +33,8 @@ class ShrineTheme extends InheritedWidget {
   final TextStyle appBarTitleStyle = robotoRegular20(Colors.black87);
   final TextStyle vendorItemStyle = robotoRegular12(const Color(0xFF81959D));
   final TextStyle priceStyle = robotoRegular14(Colors.black87);
-  final TextStyle featureTitleStyle = abrilFatfaceRegular34(Colors.black87);
+  final TextStyle featureTitleStyle = abrilFatfaceRegular34(const Color(0xFF0A3142));
+  final TextStyle featurePriceStyle = robotoRegular16(Colors.black87);
   final TextStyle featureStyle = robotoLight14(Colors.black54);
   final TextStyle orderTitleStyle = abrilFatfaceRegular24(Colors.black87);
   final TextStyle orderStyle = robotoLight14(Colors.black54);