Material and RaisedButton.

Make Material actually create material, with opinions about what that
means.

Make FloatingActionButton use this.

Make Scrollable use this.

Make BoxDecoration support drawing a circle instead of a rectangle, so
that floating action button doesn't need a custom painter.

Implement RaisedButton (and remove button.dart, since there's no
"button" in Material Design).

Make InkWell have a "child" argument instead of "children", and not
have it introduce a Flex into the hierarchy.

Update container.dart example. Clean up some imports.

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/1179713004.

examples/stocks2/lib/stock_app.dart

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:sky/framework/app.dart';
 import 'package:sky/framework/editing2/input.dart';
 import 'package:sky/framework/rendering/box.dart';
 import 'package:sky/framework/theme2/colors.dart' as colors;
@@ -203,8 +202,8 @@ class StocksApp extends App {
         toolbar: _isSearching ? buildSearchBar() : buildToolBar(),
         body: new Stocklist(stocks: _stocks, query: _searchQuery),
         floatingActionButton: new FloatingActionButton(
-          content: new Icon(type: 'content/add_white', size: 24),
-          level: 3),
+          child: new Icon(type: 'content/add_white', size: 24)
+        ),
         drawer: _drawerShowing ? buildDrawer() : null
       ),
     ];

examples/stocks2/lib/stock_row.dart

@@ -37,8 +37,8 @@ class StockRow extends Component {
     ];
 
     // TODO(hansmuller): An explicit |height| shouldn't be needed
-    return new InkWell(children: [
-      new Container(
+    return new InkWell(
+      child: new Container(
         padding: const EdgeDims(16.0, 16.0, 20.0, 16.0),
         height: kHeight,
         decoration: const BoxDecoration(
@@ -46,6 +46,6 @@ class StockRow extends Component {
                 bottom: const BorderSide(color: const sky.Color(0xFFF4F4F4)))),
         child: new Flex(children)
       )
-    ]);
+    );
   }
 }

examples/widgets/container.dart

@@ -2,43 +2,38 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:sky' as sky;
-
 import 'package:sky/framework/rendering/box.dart';
 import 'package:sky/framework/rendering/flex.dart';
-import 'package:sky/framework/widgets/ui_node.dart';
+import 'package:sky/framework/widgets/raised_button.dart';
 import 'package:sky/framework/widgets/wrappers.dart';
 
-class Rectangle extends Component {
-
-  Rectangle(this.color, { Object key }) : super(key: key);
-
-  final Color color;
-
-  UINode build() {
-    return new FlexExpandingChild(
-      new Container(
-        decoration: new BoxDecoration(backgroundColor: color)
-      )
-    );
-  }
-
-}
-
 class ContainerApp extends App {
   UINode build() {
     return new Flex([
-        new Rectangle(const Color(0xFF00FFFF), key: 'a'),
         new Container(
+          key: 'a',
           padding: new EdgeDims.all(10.0),
           margin: new EdgeDims.all(10.0),
           decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)),
-          child: new Image(src: "https://www.dartlang.org/logos/dart-logo.png",
-            size: new Size(300.0, 300.0),
-            key: 1
+          child: new Image(
+            src: "https://www.dartlang.org/logos/dart-logo.png",
+            size: new Size(300.0, 300.0)
+          )
+        ),
+        new Container(
+          key: 'b',
+          decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFF00)),
+          padding: new EdgeDims.symmetric(horizontal: 50.0, vertical: 75.0),
+          child: new RaisedButton(
+            child: new Text('PRESS ME'),
+            onPressed: () => print("Hello World")
+          )
+        ),
+        new FlexExpandingChild(
+          new Container(
+            decoration: new BoxDecoration(backgroundColor: const Color(0xFF00FFFF))
           )
         ),
-        new Rectangle(const Color(0xFFFFFF00), key: 'b'),
       ],
       direction: FlexDirection.vertical,
       justifyContent: FlexJustifyContent.spaceBetween

examples/widgets/spinning_mixed.dart

@@ -7,6 +7,7 @@ import 'dart:sky' as sky;
 import 'package:sky/framework/rendering/box.dart';
 import 'package:sky/framework/rendering/flex.dart';
 import 'package:sky/framework/scheduler.dart';
+import 'package:sky/framework/widgets/raised_button.dart';
 import 'package:sky/framework/widgets/ui_node.dart';
 import 'package:sky/framework/widgets/wrappers.dart';
 import 'package:vector_math/vector_math.dart';
@@ -40,9 +41,12 @@ UINode builder() {
         padding: new EdgeDims.all(10.0),
         margin: new EdgeDims.all(10.0),
         decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)),
-        child: new Image(src: "https://www.dartlang.org/logos/dart-logo.png",
-          size: new Size(300.0, 300.0),
-          key: 1
+        child: new RaisedButton(
+          child: new Flex([
+            new Image(src: "https://www.dartlang.org/logos/dart-logo.png"),
+            new Text('PRESS ME'),
+          ]),
+          onPressed: () => print("Hello World")
         )
       ),
       new Rectangle(const Color(0xFFFFFF00), key: 'b'),

sdk/BUILD.gn

@@ -92,11 +92,11 @@ dart_pkg("sdk") {
     "lib/framework/theme/typography.dart",
     "lib/framework/theme/view_configuration.dart",
     "lib/framework/theme2/colors.dart",
+    "lib/framework/theme2/edges.dart",
     "lib/framework/theme2/shadows.dart",
     "lib/framework/theme2/typography.dart",
     "lib/framework/theme2/view_configuration.dart",
     "lib/framework/widgets/animated_component.dart",
-    "lib/framework/widgets/button.dart",
     "lib/framework/widgets/button_base.dart",
     "lib/framework/widgets/checkbox.dart",
     "lib/framework/widgets/drawer.dart",
@@ -113,6 +113,7 @@ dart_pkg("sdk") {
     "lib/framework/widgets/popup_menu.dart",
     "lib/framework/widgets/popup_menu_item.dart",
     "lib/framework/widgets/radio.dart",
+    "lib/framework/widgets/raised_button.dart",
     "lib/framework/widgets/scaffold.dart",
     "lib/framework/widgets/scrollable.dart",
     "lib/framework/widgets/tool_bar.dart",

sdk/lib/framework/editing2/input.dart

@@ -4,7 +4,6 @@
 
 import 'dart:sky' as sky;
 
-import '../rendering/flex.dart';
 import '../widgets/wrappers.dart';
 import 'editable_string.dart';
 import 'editable_text.dart';

sdk/lib/framework/painting/box_painter.dart

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:math' as math;
 import 'dart:sky' as sky;
 import 'dart:sky' show Point, Size, Rect, Color, Paint, Path;
 import 'shadows.dart';
@@ -119,14 +120,17 @@ class RadialGradient extends Gradient {
   final sky.TileMode tileMode;
 }
 
+enum Shape { rectangle, circle }
+
 // This must be immutable, because we won't notice when it changes
 class BoxDecoration {
   const BoxDecoration({
-    this.backgroundColor,
-    this.border,
-    this.borderRadius,
-    this.boxShadow,
-    this.gradient
+    this.backgroundColor, // null = don't draw background
+    this.border, // null = don't draw border
+    this.borderRadius, // null = use more efficient background drawing; note that this must be null for circles
+    this.boxShadow, // null = don't draw shadows
+    this.gradient, // null = don't allocate gradient objects
+    this.shape: Shape.rectangle
   });
 
   final Color backgroundColor;
@@ -134,6 +138,7 @@ class BoxDecoration {
   final Border border;
   final List<BoxShadow> boxShadow;
   final Gradient gradient;
+  final Shape shape;
 
   String toString([String prefix = '']) {
     List<String> result = [];
@@ -147,6 +152,8 @@ class BoxDecoration {
       result.add('${prefix}boxShadow: ${boxShadow.map((shadow) => shadow.toString())}');
     if (gradient != null)
       result.add('${prefix}gradient: $gradient');
+    if (shape != Shape.rectangle)
+      result.add('${prefix}shape: $shape');
     if (result.isEmpty)
       return '${prefix}<no decorations specified>';
     return result.join('\n');
@@ -195,14 +202,26 @@ class BoxPainter {
   void paint(sky.Canvas canvas, Rect rect) {
     if (_decoration.backgroundColor != null || _decoration.boxShadow != null ||
         _decoration.gradient != null) {
-      if (_decoration.borderRadius == null)
-        canvas.drawRect(rect, _backgroundPaint);
-      else
-        canvas.drawRRect(new sky.RRect()..setRectXY(rect, _decoration.borderRadius, _decoration.borderRadius), _backgroundPaint);
+      switch (_decoration.shape) {
+        case Shape.circle:
+          assert(_decoration.borderRadius == null);
+          Point center = rect.center;
+          Size size = rect.size;
+          double radius = math.min(size.width, size.height) / 2.0;
+          canvas.drawCircle(center.x, center.y, radius, _backgroundPaint);
+          break;
+        case Shape.rectangle:
+          if (_decoration.borderRadius == null)
+            canvas.drawRect(rect, _backgroundPaint);
+          else
+            canvas.drawRRect(new sky.RRect()..setRectXY(rect, _decoration.borderRadius, _decoration.borderRadius), _backgroundPaint);
+          break;
+      }
     }
 
     if (_decoration.border != null) {
       assert(_decoration.borderRadius == null); // TODO(abarth): Implement borders with border radius.
+      assert(_decoration.shape == Shape.rectangle); // TODO(ianh): Implement borders on circles.
 
       assert(_decoration.border.top != null);
       assert(_decoration.border.right != null);

sdk/lib/framework/rendering/box.dart

@@ -53,7 +53,8 @@ class BoxConstraints {
     this.minWidth: 0.0,
     this.maxWidth: double.INFINITY,
     this.minHeight: 0.0,
-    this.maxHeight: double.INFINITY});
+    this.maxHeight: double.INFINITY
+  });
 
   BoxConstraints.tight(Size size)
     : minWidth = size.width,
@@ -79,6 +80,15 @@ class BoxConstraints {
     );
   }
 
+  BoxConstraints loosen() {
+    return new BoxConstraints(
+      minWidth: 0.0,
+      maxWidth: maxWidth,
+      minHeight: 0.0,
+      maxHeight: maxHeight
+    );
+  }
+
   BoxConstraints apply(BoxConstraints constraints) {
     return new BoxConstraints(
       minWidth: math.max(minWidth, constraints.minWidth),
@@ -243,6 +253,8 @@ abstract class RenderBox extends RenderObject {
 
 class RenderProxyBox extends RenderBox with RenderObjectWithChildMixin<RenderBox> {
 
+  // ProxyBox assumes the child will be at 0,0 and will have the same size
+
   RenderProxyBox([RenderBox child = null]) {
     this.child = child;
   }
@@ -503,12 +515,37 @@ class RenderClipOval extends RenderProxyBox {
   }
 }
 
-class RenderPadding extends RenderBox with RenderObjectWithChildMixin<RenderBox> {
+abstract class RenderShiftedBox extends RenderBox with RenderObjectWithChildMixin<RenderBox> {
+
+  // Abstract class for one-child-layout render boxes
+
+  RenderShiftedBox(RenderBox child) {
+    this.child = child;
+  }
+
+  void paint(RenderObjectDisplayList canvas) {
+    if (child != null)
+      canvas.paintChild(child, child.parentData.position);
+  }
 
-  RenderPadding({ EdgeDims padding, RenderBox child }) {
+  void hitTestChildren(HitTestResult result, { Point position }) {
+    if (child != null) {
+      assert(child.parentData is BoxParentData);
+      Rect childBounds = new Rect.fromPointAndSize(child.parentData.position, child.size);
+      if (childBounds.contains(position)) {
+        child.hitTest(result, position: new Point(position.x - child.parentData.position.x,
+                                                      position.y - child.parentData.position.y));
+      }
+    }
+  }
+
+}
+
+class RenderPadding extends RenderShiftedBox {
+
+  RenderPadding({ EdgeDims padding, RenderBox child }) : super(child) {
     assert(padding != null);
     this.padding = padding;
-    this.child = child;
   }
 
   EdgeDims _padding;
@@ -564,23 +601,79 @@ class RenderPadding extends RenderBox with RenderObjectWithChildMixin<RenderBox>
                                               padding.top + child.size.height + padding.bottom));
   }
 
-  void paint(RenderObjectDisplayList canvas) {
+  String debugDescribeSettings(String prefix) => '${super.debugDescribeSettings(prefix)}${prefix}padding: ${padding}\n';
+}
+
+class RenderPositionedBox extends RenderShiftedBox {
+
+  RenderPositionedBox({
+    RenderBox child,
+    double horizontal: 0.5,
+    double vertical: 0.5
+  }) : _horizontal = horizontal,
+       _vertical = vertical,
+       super(child) {
+    assert(horizontal != null);
+    assert(vertical != null);
+  }
+
+  double _horizontal;
+  double get horizontal => _horizontal;
+  void set horizontal (double value) {
+    assert(value != null);
+    if (_horizontal == value)
+      return;
+    _horizontal = value;
+    markNeedsLayout();
+  }
+
+  double _vertical;
+  double get vertical => _vertical;
+  void set vertical (double value) {
+    assert(value != null);
+    if (_vertical == value)
+      return;
+    _vertical = value;
+    markNeedsLayout();
+  }
+
+  double getMinIntrinsicWidth(BoxConstraints constraints) {
     if (child != null)
-      canvas.paintChild(child, child.parentData.position);
+      return child.getMinIntrinsicWidth(constraints);
+    return super.getMinIntrinsicWidth(constraints);
   }
 
-  void hitTestChildren(HitTestResult result, { Point position }) {
+  double getMaxIntrinsicWidth(BoxConstraints constraints) {
+    if (child != null)
+      return child.getMaxIntrinsicWidth(constraints);
+    return super.getMaxIntrinsicWidth(constraints);
+  }
+
+  double getMinIntrinsicHeight(BoxConstraints constraints) {
+    if (child != null)
+      return child.getMinIntrinsicHeight(constraints);
+    return super.getMinIntrinsicHeight(constraints);
+  }
+
+  double getMaxIntrinsicHeight(BoxConstraints constraints) {
+    if (child != null)
+      return child.getMaxIntrinsicHeight(constraints);
+    return super.getMaxIntrinsicHeight(constraints);
+  }
+
+  void performLayout() {
     if (child != null) {
+      child.layout(constraints.loosen());
+      size = constraints.constrain(child.size);
       assert(child.parentData is BoxParentData);
-      Rect childBounds = new Rect.fromPointAndSize(child.parentData.position, child.size);
-      if (childBounds.contains(position)) {
-        child.hitTest(result, position: new Point(position.x - child.parentData.position.x,
-                                                      position.y - child.parentData.position.y));
-      }
+      Size delta = size - child.size;
+      child.parentData.position = new Point(delta.width * horizontal, delta.height * vertical);
+    } else {
+      performResize();
     }
   }
 
-  String debugDescribeSettings(String prefix) => '${super.debugDescribeSettings(prefix)}${prefix}padding: ${padding}\n';
+  String debugDescribeSettings(String prefix) => '${super.debugDescribeSettings(prefix)}${prefix}horizontal: ${horizontal}\n${prefix}vertical: ${vertical}\n';
 }
 
 class RenderImage extends RenderBox {
@@ -608,6 +701,8 @@ class RenderImage extends RenderBox {
   Size _requestedSize;
   Size get requestedSize => _requestedSize;
   void set requestedSize (Size value) {
+    if (value == null)
+      value = const Size(null, null);
     if (value == _requestedSize)
       return;
     _requestedSize = value;

sdk/lib/framework/theme2/colors.dart

@@ -230,6 +230,7 @@ const Map<int, Color> Grey = const {
   100: const Color(0xFFF5F5F5),
   200: const Color(0xFFEEEEEE),
   300: const Color(0xFFE0E0E0),
+  350: const Color(0xFFD6D6D6), // only for raised button while pressed
   400: const Color(0xFFBDBDBD),
   500: const Color(0xFF9E9E9E),
   600: const Color(0xFF757575),

sdk/lib/framework/theme2/edges.dart

+// Copyright 2015 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.
+
+enum MaterialEdge { canvas, card, circle }
+
+const Map<MaterialEdge, double> edges = const {
+  MaterialEdge.canvas: 0.0,
+  MaterialEdge.card: 2.0,
+  MaterialEdge.circle: null,
+};

sdk/lib/framework/theme2/shadows.dart

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../rendering/box.dart';
+import '../painting/box_painter.dart';
 import 'dart:sky' show Color, Size;
 
-const Map<int, List<BoxShadow>> Shadow = const {
+const Map<int, List<BoxShadow>> shadows = const {
   1: const [
     const BoxShadow(
       color: const Color(0x1F000000),

sdk/lib/framework/widgets/button.dart

-// Copyright 2015 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 'ink_well.dart';
-import 'material.dart';
-import 'wrappers.dart';
-
-class Button extends Component {
-
-  Button({ Object key, this.content, this.level }) : super(key: key);
-
-  static final Style _style = new Style('''
-    -webkit-user-select: none;
-    height: 36px;
-    min-width: 64px;
-    padding: 0 8px;
-    margin: 4px;
-    border-radius: 2px;'''
-  );
-
-  final UINode content;
-  final int level;
-
-  UINode build() {
-    return new StyleNode(
-      new Material(
-        content: new InkWell(children: [content]),
-        level: level),
-      _style);
-  }
-
-}

sdk/lib/framework/widgets/drawer.dart

@@ -148,7 +148,7 @@ class Drawer extends AnimatedComponent {
     Container content = new Container(
       decoration: new BoxDecoration(
         backgroundColor: Grey[50],
-        boxShadow: Shadow[level]),
+        boxShadow: shadows[level]),
       width: _kWidth,
       transform: transform,
       child: new Block(children)

sdk/lib/framework/widgets/fixed_height_scrollable.dart

@@ -70,14 +70,9 @@ abstract class FixedHeightScrollable extends Scrollable {
     return new SizeObserver(
       callback: _handleSizeChanged,
       child: new ClipRect(
-        child: new DecoratedBox(
-          decoration: const BoxDecoration(
-            backgroundColor: const Color(0xFFFFFFFF)
-          ),
-          child: new Transform(
-            transform: transform,
-            child: new Block(buildItems(itemShowIndex, itemShowCount))
-          )
+        child: new Transform(
+          transform: transform,
+          child: new Block(buildItems(itemShowIndex, itemShowCount))
         )
       )
     );

sdk/lib/framework/widgets/floating_action_button.dart

@@ -2,10 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:sky' as sky;
-
-import '../painting/shadows.dart';
 import '../theme2/colors.dart';
+import '../theme2/edges.dart';
+import 'button_base.dart';
 import 'ink_well.dart';
 import 'material.dart';
 import 'wrappers.dart';
@@ -14,41 +13,26 @@ import 'wrappers.dart';
 // http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
 const double _kSize = 56.0;
 
-class FloatingActionButton extends Component {
+class FloatingActionButton extends ButtonBase {
 
-  FloatingActionButton({ Object key, this.content, this.level: 0 })
+  FloatingActionButton({ Object key, this.child })
       : super(key: key);
 
-  final UINode content;
-  final int level;
-
-  UINode build() {
-    List<UINode> children = [];
-
-    if (content != null)
-      children.add(content);
+  final UINode child;
 
+  UINode buildContent() {
     return new Material(
-      content: new CustomPaint(
-        callback: (sky.Canvas canvas, Size size) {
-          const double radius = _kSize / 2.0;
-          sky.Paint paint = new sky.Paint()..color = Red[500];
-          var builder = new ShadowDrawLooperBuilder()
-            ..addShadow(const sky.Size(0.0, 5.0),
-                        const sky.Color(0x77000000),
-                        5.0);
-          paint.setDrawLooper(builder.build());
-          canvas.drawCircle(radius, radius, radius, paint);
-        },
-        child: new ClipOval(
-          child: new Container(
-            width: _kSize,
-            height: _kSize,
-            child: new InkWell(children: children)
-          )
+      child: new ClipOval(
+        child: new Container(
+          width: _kSize,
+          height: _kSize,
+          child: new InkWell(child: new Center(child: child))
         )
       ),
-      level: level);
+      color: Red[500],
+      edge: MaterialEdge.circle,
+      level: highlight ? 3 : 2
+    );
   }
 
 }

sdk/lib/framework/widgets/ink_well.dart

@@ -8,7 +8,6 @@ import 'dart:sky' as sky;
 import '../animation/animated_value.dart';
 import '../animation/curves.dart';
 import '../rendering/box.dart';
-import '../rendering/flex.dart';
 import '../rendering/object.dart';
 import 'ui_node.dart';
 import 'wrappers.dart';
@@ -100,27 +99,11 @@ class RenderInkWell extends RenderProxyBox {
   }
 }
 
-class InkWellWrapper extends OneChildRenderObjectWrapper {
-  InkWellWrapper({ UINode child, Object key })
+class InkWell extends OneChildRenderObjectWrapper {
+  InkWell({ UINode child, Object key })
     : super(child: child, key: key);
 
   RenderInkWell get root { RenderInkWell result = super.root; return result; }
 
   RenderInkWell createNode() => new RenderInkWell();
 }
-
-class InkWell extends Component {
-  InkWell({ Object key, this.children }) : super(key: key);
-
-  final List<UINode> children;
-
-  UINode build() {
-    return new InkWellWrapper(
-      child: new Flex(
-        children,
-        direction: FlexDirection.horizontal,
-        justifyContent: FlexJustifyContent.center
-      )
-    );
-  }
-}

sdk/lib/framework/widgets/material.dart

@@ -2,28 +2,39 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../painting/box_painter.dart';
+import '../theme2/colors.dart';
+import '../theme2/edges.dart';
+import '../theme2/shadows.dart';
 import 'wrappers.dart';
 
 class Material extends Component {
 
-  Material({ Object key, this.content, this.level: 0 }) : super(key: key);
+  Material({
+    Object key,
+    this.child,
+    this.edge: MaterialEdge.card,
+    this.level: 0,
+    this.color
+  }) : super(key: key);
 
-  // static final List<Style> _shadowStyle = [
-  //   null,
-  //   new Style('box-shadow: ${Shadow[1]}'),
-  //   new Style('box-shadow: ${Shadow[2]}'),
-  //   new Style('box-shadow: ${Shadow[3]}'),
-  //   new Style('box-shadow: ${Shadow[4]}'),
-  //   new Style('box-shadow: ${Shadow[5]}'),
-  // ];
-
-  final UINode content;
+  final UINode child;
   final int level;
+  final MaterialEdge edge;
+  final Color color;
+
+  // TODO(ianh): we should make this animate level changes and color changes
 
   UINode build() {
-    // TODO(eseidel): Add a shadow.
-    // return new StyleNode(content, _shadowStyle[level]);
-    return content;
+    return new Container(
+      decoration: new BoxDecoration(
+        boxShadow: shadows[level],
+        borderRadius: edges[edge],
+        backgroundColor: color == null ? Grey[50] : color,
+        shape: edge == MaterialEdge.circle ? Shape.circle : Shape.rectangle
+      ),
+      child: child
+    );
   }
 
 }

sdk/lib/framework/widgets/menu_item.dart

@@ -40,7 +40,7 @@ class MenuItem extends ButtonBase {
     return new EventListenerNode(
       new Container(
         child: new InkWell(
-          children: [
+          child: new Flex([
             new Padding(
               child: new Icon(type: "${icon}_grey600", size: 24),
               padding: const EdgeDims.symmetric(horizontal: 16.0)
@@ -52,7 +52,7 @@ class MenuItem extends ButtonBase {
               ),
               flex: 1
             )
-          ]
+          ])
         ),
         height: 48.0,
         decoration: highlight ? _kHighlightDecoration : _kHighlightBoring

sdk/lib/framework/widgets/popup_menu.dart

@@ -11,7 +11,6 @@ import '../painting/box_painter.dart';
 import '../theme2/colors.dart';
 import '../theme2/shadows.dart';
 import 'animated_component.dart';
-import 'material.dart';
 import 'popup_menu_item.dart';
 import 'wrappers.dart';
 
@@ -60,7 +59,7 @@ class PopupMenu extends AnimatedComponent {
     _painter = new BoxPainter(new BoxDecoration(
       backgroundColor: Grey[50],
       borderRadius: 2.0,
-      boxShadow: Shadow[level]));
+      boxShadow: shadows[level]));
 
     animate(controller.position, (double value) {
       _position = value;

sdk/lib/framework/widgets/popup_menu_item.dart

@@ -15,11 +15,11 @@ class PopupMenuItem extends Component {
     return new Opacity(
       opacity: opacity,
       child: new InkWell(
-        children: [new Container(
+        child: new Container(
           constraints: const BoxConstraints(minWidth: 112.0),
           padding: const EdgeDims.all(16.0),
           child: new Flex(children)
-        )]
+        )
       )
     );
   }

sdk/lib/framework/widgets/raised_button.dart

+// Copyright 2015 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 '../theme2/edges.dart';
+import '../theme2/colors.dart';
+import '../rendering/flex.dart';
+import 'button_base.dart';
+import 'ink_well.dart';
+import 'material.dart';
+import 'wrappers.dart';
+
+enum RaisedButtonTheme { light, dark }
+
+class RaisedButton extends ButtonBase {
+
+  RaisedButton({ Object key, this.child, this.onPressed, this.theme: RaisedButtonTheme.light }) : super(key: key);
+
+  UINode child;
+  int level;
+  Function onPressed;
+  RaisedButtonTheme theme;
+
+  void syncFields(RaisedButton source) {
+    child = source.child;
+    level = source.level;
+    onPressed = source.onPressed;
+    super.syncFields(source);
+  }
+
+  UINode buildContent() {
+    return new EventListenerNode(
+      new Container(
+        height: 36.0,
+        constraints: new BoxConstraints(minWidth: 88.0),
+        margin: new EdgeDims.all(4.0),
+        child: new Material(
+          edge: MaterialEdge.card,
+          child: new InkWell(
+            child: new Container(
+              padding: new EdgeDims.symmetric(horizontal: 8.0),
+              child: new Center(child: child)
+            )
+          ),
+          level: highlight ? 2 : 1,
+          color: theme == RaisedButtonTheme.light
+                               ? (highlight ? Grey[350] : Grey[300])
+                               : (highlight ? Blue[700] : Blue[600])
+        )
+      ),
+      onGestureTap: (_) { if (onPressed != null) onPressed(); }
+    );
+  }
+
+}

sdk/lib/framework/widgets/scrollable.dart

@@ -8,7 +8,9 @@ import 'dart:sky' as sky;
 import '../animation/generators.dart';
 import '../animation/mechanics.dart';
 import '../animation/scroll_behavior.dart';
-import '../theme/view_configuration.dart' as config;
+import '../theme2/edges.dart';
+import '../theme2/view_configuration.dart' as config;
+import 'material.dart';
 import 'wrappers.dart';
 
 const double _kMillisecondsPerSecond = 1000.0;
@@ -45,7 +47,10 @@ abstract class Scrollable extends Component {
 
   UINode build() {
     return new EventListenerNode(
-      buildContent(),
+      new Material(
+        child: buildContent(),
+        edge: MaterialEdge.canvas
+      ),
       onPointerDown: _handlePointerDown,
       onPointerUp: _handlePointerUpOrCancel,
       onPointerCancel: _handlePointerUpOrCancel,

sdk/lib/framework/widgets/tool_bar.dart

@@ -43,7 +43,7 @@ class ToolBar extends Component {
       padding: new EdgeDims.symmetric(horizontal: 8.0),
       decoration: new BoxDecoration(
         backgroundColor: backgroundColor,
-        boxShadow: Shadow[2]
+        boxShadow: shadows[2]
       )
     );
   }

sdk/lib/framework/widgets/ui_node.dart

@@ -755,7 +755,8 @@ class UINodeAppView extends AppView {
   static UINodeAppView _appView;
   static AppView get appView => _appView;
   static void initUINodeAppView({ RenderView renderViewOverride: null }) {
-    _appView = new UINodeAppView(renderViewOverride: renderViewOverride);
+    if (_appView == null)
+      _appView = new UINodeAppView(renderViewOverride: renderViewOverride);
   }
 
   void dispatchEvent(sky.Event event, HitTestResult result) {

sdk/lib/framework/widgets/wrappers.dart

@@ -127,6 +127,17 @@ class Padding extends OneChildRenderObjectWrapper {
 
 }
 
+class Center extends OneChildRenderObjectWrapper {
+
+  Center({ UINode child, Object key })
+    : super(child: child, key: key);
+
+  RenderPositionedBox get root { RenderPositionedBox result = super.root; return result; }
+
+  RenderPositionedBox createNode() => new RenderPositionedBox();
+
+}
+
 class SizedBox extends OneChildRenderObjectWrapper {
 
   SizedBox({