Material and RaisedButton.

sky/sdk/lib/framework/widgets/raised_button.dart

Index: sky/sdk/lib/framework/widgets/raised_button.dart
diff --git a/sky/sdk/lib/framework/widgets/raised_button.dart b/sky/sdk/lib/framework/widgets/raised_button.dart
new file mode 100644
index 0000000000000000000000000000000000000000..b185544bf0b0adfc51a795a8b27c4369ad0bea8a
--- /dev/null
+++ b/sky/sdk/lib/framework/widgets/raised_button.dart
@@ -0,0 +1,54 @@
+// 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';
+
+class RaisedButton extends ButtonBase {
+
+  RaisedButton({ Object key, this.child, this.onTap }) : super(key: key);
+
+  UINode child;
+  int level;
+  Function onTap;
+
+  void syncFields(RaisedButton source) {
+    child = source.child;
+    level = source.level;
+    onTap = source.onTap;
+    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 Flex(
+                [child],
+                justifyContent: FlexJustifyContent.center,
+                alignItems: FlexAlignItems.center
+              )

[abarth-chromium, 2015/06/12 03:08:04]

We could have a RenderObject that did:

new Foo(child: child, horizontal: 0.5, vertical: 0.5)

[Hixie, 2015/06/12 17:36:38]

On it.

+            )
+          ),
+          level: highlight ? 2 : 1, // TODO(ianh): animate this

[abarth-chromium, 2015/06/12 03:08:04]

Material should be the one that implicitly animates level changes.

[Hixie, 2015/06/12 17:36:38]

Will move the comment.

+          color: highlight ? const Color(0xFFD6D6D6) : Grey[300] // TODO(ianh): animate this

[abarth-chromium, 2015/06/12 03:08:04]

0xFFD6D6D6 -> This color doesn't have a name?

I think the raised buttons are going to want their color to be configurable. 
There are certainly blue and grey ones.

[Hixie, 2015/06/12 17:36:38]

Agreed. Weirdly D6D6D6 doesn't have a name currently. I can add it, I guess.

+        )
+      ),
+      onGestureTap: (_) { if (onTap != null) onTap(); }

[abarth-chromium, 2015/06/12 03:08:04]

Is there a reason we create this event listeners instead of our client?

[Hixie, 2015/06/12 17:36:38]

It seems really weird to me that a widget whose entire purpose is to detect a
tap would not have a way to tell when it has detected a tap.

Also, this encourages people to be consistent and always use the same gesture to
trigger a button, rather than having some people use pointerdown, some
pointerup, some tap, some longtap, or whatever.

+    );
+  }
+
+}