colors demo

examples/material_gallery/lib/demo/colors_demo.dart

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+const double kColorItemHeight = 48.0;
+
+class ColorSwatch {
+  const ColorSwatch({ this.name, this.colors, this.accentColors, this.threshold: 900});
+
+  final String name;
+  final Map<int, Color> colors;
+  final Map<int, Color> accentColors;
+  final int threshold; // titles for indices > threshold are white, otherwise black
+
+  bool get isValid => this.name != null && this.colors != null && threshold != null;
+}
+
+const List<ColorSwatch> colorSwatches = const <ColorSwatch>[
+  const ColorSwatch(name: 'RED', colors: Colors.red, accentColors: Colors.redAccent, threshold: 300),
+  const ColorSwatch(name: 'PINK', colors: Colors.pink, accentColors: Colors.pinkAccent, threshold: 200),
+  const ColorSwatch(name: 'PURPLE', colors: Colors.purple, accentColors: Colors.purpleAccent, threshold: 200),
+  const ColorSwatch(name: 'DEEP PURPLE', colors: Colors.deepPurple, accentColors: Colors.deepPurpleAccent, threshold: 200),
+  const ColorSwatch(name: 'INDIGO', colors: Colors.indigo, accentColors: Colors.indigoAccent, threshold: 200),
+  const ColorSwatch(name: 'BLUE', colors: Colors.blue, accentColors: Colors.blueAccent, threshold: 400),
+  const ColorSwatch(name: 'LIGHT BLUE', colors: Colors.lightBlue, accentColors: Colors.lightBlueAccent, threshold: 500),
+  const ColorSwatch(name: 'CYAN', colors: Colors.cyan, accentColors: Colors.cyanAccent, threshold: 600),
+  const ColorSwatch(name: 'TEAL', colors: Colors.teal, accentColors: Colors.tealAccent, threshold: 400),
+  const ColorSwatch(name: 'GREEN', colors: Colors.green, accentColors: Colors.greenAccent, threshold: 500),
+  const ColorSwatch(name: 'LIGHT GREEN', colors: Colors.lightGreen, accentColors: Colors.lightGreenAccent, threshold: 600),
+  const ColorSwatch(name: 'LIME', colors: Colors.lime, accentColors: Colors.limeAccent, threshold: 800),
+  const ColorSwatch(name: 'YELLOW', colors: Colors.yellow, accentColors: Colors.yellowAccent),
+  const ColorSwatch(name: 'AMBER', colors: Colors.amber, accentColors: Colors.amberAccent),
+  const ColorSwatch(name: 'ORANGE', colors: Colors.orange, accentColors: Colors.orangeAccent, threshold: 700),
+  const ColorSwatch(name: 'DEEP ORANGE', colors: Colors.deepOrange, accentColors: Colors.deepOrangeAccent, threshold: 400),
+  const ColorSwatch(name: 'BROWN', colors: Colors.brown, threshold: 200),
+  const ColorSwatch(name: 'GREY', colors: Colors.grey, threshold: 500),
+  const ColorSwatch(name: 'BLUE GREY', colors: Colors.blueGrey, threshold: 500)
+];
+
+
+class ColorItem extends StatelessComponent {
+  ColorItem({ Key key, this.index, this.color, this.prefix: '' }) : super(key: key) {
+    assert(index != null);
+    assert(color != null);
+    assert(prefix != null);
+  }
+
+  final int index;
+  final Color color;
+  final String prefix;
+
+  String colorString() => "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
+
+  Widget build(BuildContext context) {
+    return new Container(
+      height: kColorItemHeight,
+      padding: const EdgeDims.symmetric(horizontal: 16.0),
+      decoration: new BoxDecoration(backgroundColor: color),
+      child: new Row(
+        justifyContent: FlexJustifyContent.spaceBetween,
+        alignItems: FlexAlignItems.center,
+        children: <Widget>[
+          new Text('$prefix$index'),
+          new Text(colorString())
+        ]
+      )
+    );
+  }
+}
+
+class ColorSwatchTabView extends StatelessComponent {
+  ColorSwatchTabView({ Key key, this.swatch }) : super(key: key) {
+    assert(swatch != null && swatch.isValid);
+  }
+
+  final ColorSwatch swatch;
+  final blackTextStyle = Typography.black.body1;
+  final whiteTextStyle = Typography.white.body1;
+
+  Widget build(BuildContext context) {
+    List<Widget> colorItems =  swatch.colors.keys.map((int index) {
+      return new DefaultTextStyle(
+        style: index > swatch.threshold ? whiteTextStyle : blackTextStyle,
+        child: new ColorItem(index: index, color: swatch.colors[index])
+      );
+    })
+    .toList();
+
+    if (swatch.accentColors != null) {
+      colorItems.addAll(swatch.accentColors.keys.map((int index) {
+        return new DefaultTextStyle(
+          style: index > swatch.threshold ? whiteTextStyle : blackTextStyle,
+          child: new ColorItem(index: index, color: swatch.accentColors[index], prefix: 'A')
+        );
+      })
+      .toList());
+    }
+
+    return new ScrollableList(
+      itemExtent: kColorItemHeight,
+      children: colorItems
+    );
+  }
+}
+
+class ColorsDemo extends StatelessComponent {
+  Widget build(BuildContext context) {
+    return new TabBarSelection<ColorSwatch>(
+      values: colorSwatches,
+      child: new Scaffold(
+        toolBar: new ToolBar(
+          elevation: 0,
+          center: new Text("Colors"),
+          tabBar: new TabBar<ColorSwatch>(
+            isScrollable: true,
+            labels: new Map.fromIterable(colorSwatches, value: (ColorSwatch swatch) {
+              return new TabLabel(text: swatch.name);
+            })
+          )
+        ),
+        body: new TabBarView(
+          children: colorSwatches.map((ColorSwatch swatch) {
+            return new ColorSwatchTabView(swatch: swatch);
+          })
+          .toList()
+        )
+      )
+    );
+  }
+}

examples/material_gallery/lib/gallery/home.dart

@@ -11,6 +11,7 @@ import 'section.dart';
 
 import '../demo/buttons_demo.dart';
 import '../demo/cards_demo.dart';
+import '../demo/colors_demo.dart';
 import '../demo/chip_demo.dart';
 import '../demo/date_picker_demo.dart';
 import '../demo/dialog_demo.dart';
@@ -69,7 +70,10 @@ class GalleryHomeState extends State<GalleryHome> {
                 new GallerySection(
                   title: 'Style',
                   image: 'assets/section_style.png',
-                  colors: Colors.green
+                  colors: Colors.green,
+                  demos: <GalleryDemo>[
+                    new GalleryDemo(title: 'Colors', builder: () => new ColorsDemo())
+                  ]
                 )
               ]
             ),

packages/flutter/lib/src/material/scaffold.dart

@@ -362,7 +362,7 @@ class ScaffoldState extends State<Scaffold> {
 
   bool _shouldShowBackArrow;
 
-  Widget _getModifiedToolBar({ EdgeDims padding, double foregroundOpacity: 1.0, int elevation: 4 }) {
+  Widget _getModifiedToolBar({ EdgeDims padding, double foregroundOpacity: 1.0, int elevation }) {
     ToolBar toolBar = config.toolBar;
     if (toolBar == null)
       return null;
@@ -387,7 +387,7 @@ class ScaffoldState extends State<Scaffold> {
       }
     }
     return toolBar.copyWith(
-      elevation: elevation,
+      elevation: elevation ?? toolBar.elevation ?? 4,
       padding: toolBarPadding,
       foregroundOpacity: foregroundOpacity,
       left: left