Implement a floating action button in fn

R=rafaelw@chromium.org

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

examples/fn/widgets/floating_action_button.dart

@@ -0,0 +1,22 @@
+part of widgets;
+
+class FloatingActionButton extends StyleComponent {
+  static final Style _style = new Style('''
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: 16px;
+    right: 16px;
+    width: 56px;
+    height: 56px;
+    background-color: #F44336;
+    color: white;
+    border-radius: 28px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);'''
+  );
+
+  Style get style => _style;
+
+  FloatingActionButton({ Object key, Node content }) : super(key: key, content: content);
+}

examples/fn/widgets/style_component.dart

@@ -0,0 +1,17 @@
+part of widgets;
+
+abstract class StyleComponent extends Component {
+  Node content;
+
+  // Subclasses should implement this getter to provide their style information.
+  Style get style => null;
+
+  StyleComponent({ Object key, this.content }) : super(key: key);
+
+  Node render() {
+    return new Container(
+      style: style,
+      children: content == null ? [] : [content]
+    );
+  }
+}

examples/fn/widgets/toolbar.dart

@@ -4,7 +4,7 @@ class Toolbar extends Component {
 
   List<Node> children;
 
-  static Style _style = new Style('''
+  static final Style _style = new Style('''
     display: flex;
     align-items: center;
     height: 84px;

examples/fn/widgets/widgets.dart

@@ -20,5 +20,7 @@ part 'menudivider.dart';
 part 'menuitem.dart';
 part 'radio.dart';
 part 'toolbar.dart';
+part 'floating_action_button.dart';
+part 'style_component.dart';
 
 typedef void ValueChanged(value);

examples/stocks-fn/stocksapp.dart

@@ -92,10 +92,20 @@ class StocksApp extends App {
       ]
     );
 
+    var fab = new FloatingActionButton(content: new Icon(
+      type: 'content/add_white', size: 24));
+
     return new Container(
       key: 'StocksApp',
-      style: _style,
+      children: [
-      children: [drawer, toolbar, new Stocklist(stocks: oracle.stocks)]
+        new Container(
+          key: 'Content',
+          style: _style,
+          children: [toolbar, new Stocklist(stocks: oracle.stocks)]
+        ),
+        fab,
+        drawer,
+      ]
     );
   }
 }