Added the FAB per Tab demo

examples/material_gallery/lib/demo/tabs_fab_demo.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 'package:flutter/material.dart';
+
+class _Page {
+  _Page({ this.label, this.colors, this.icon });
+
+  final String label;
+  final Map<int, Color> colors;
+  final String icon;
+
+  TabLabel get tabLabel => new TabLabel(text: label);
+  Color get labelColor => colors != null ? colors[300] : Colors.grey[300];
+  bool get fabDefined => colors != null && icon != null;
+  Color get fabColor => colors[400];
+  Icon get fabIcon => new Icon(icon: icon);
+  Key get fabKey => new ValueKey<Color>(fabColor);
+}
+
+const String _explanatoryText =
+  "When the Scaffold's floating action button changes, the new button fades and "
+  "turns into view. In this demo, changing tabs can cause the app to be rebuilt "
+  "with a FloatingActionButton that the Scaffold distinguishes from the others "
+  "by its key.";
+
+class TabsFabDemo extends StatefulComponent {
+  _TabsFabDemoState createState() => new _TabsFabDemoState();
+}
+
+class _TabsFabDemoState extends State<TabsFabDemo> {
+  final GlobalKey scaffoldKey = new GlobalKey();
+  final List<_Page> _pages = <_Page>[
+    new _Page(label: 'Blue', colors: Colors.indigo, icon: 'content/add'),
+    new _Page(label: 'Too', colors: Colors.indigo, icon: 'content/add'),
+    new _Page(label: 'Eco', colors: Colors.green, icon: 'content/create'),
+    new _Page(label: 'No'),
+    new _Page(label: 'Teal', colors: Colors.teal, icon: 'content/add'),
+    new _Page(label: 'Red', colors: Colors.red, icon: 'content/create')
+  ];
+  _Page selectedPage;
+
+  void initState() {
+    super.initState();
+    selectedPage = _pages[0];
+  }
+
+  void _handleTabSelection(_Page page) {
+    setState(() {
+      selectedPage = page;
+    });
+  }
+
+  void _showExplanatoryText() {
+    scaffoldKey.currentState.showBottomSheet((BuildContext context) {
+      return new Container(
+        decoration: new BoxDecoration(
+          border: new Border(top: new BorderSide(color: Theme.of(context).dividerColor))
+        ),
+        child: new Padding(
+          padding: const EdgeDims.all(32.0),
+          child: new Text(_explanatoryText, style: Theme.of(context).text.subhead)
+        )
+      );
+    });
+  }
+
+  Widget buildTabView(_Page page) {
+    return new Builder(
+      builder: (BuildContext context) {
+        final TextStyle textStyle = new TextStyle(
+          color: page.labelColor,
+          fontSize: 32.0,
+          textAlign: TextAlign.center
+        );
+
+        return new Container(
+          key: new ValueKey<String>(page.label),
+          padding: const EdgeDims.TRBL(48.0, 48.0, 96.0, 48.0),
+          child: new Card(
+            child: new Center(
+              child: new Text(page.label, style: textStyle)
+            )
+          )
+        );
+      }
+    );
+  }
+
+  Widget build(BuildContext context) {
+    return new TabBarSelection<_Page>(
+      values: _pages,
+      onChanged: _handleTabSelection,
+      child: new Scaffold(
+        key: scaffoldKey,
+        toolBar: new ToolBar(
+          center: new Text("FAB per Tab"),
+          tabBar: new TabBar<_Page>(
+            labels: new Map.fromIterable(_pages, value: (_Page page) => page.tabLabel)
+          )
+        ),
+        floatingActionButton: !selectedPage.fabDefined ? null : new FloatingActionButton(
+          key: selectedPage.fabKey,
+          backgroundColor: selectedPage.fabColor,
+          child: selectedPage.fabIcon,
+          onPressed: _showExplanatoryText
+        ),
+        body: new TabBarView(children: _pages.map(buildTabView).toList())
+      )
+    );
+  }
+}

examples/material_gallery/lib/main.dart

@@ -15,6 +15,7 @@ import 'demo/toggle_controls_demo.dart';
 import 'demo/scrolling_techniques_demo.dart';
 import 'demo/slider_demo.dart';
 import 'demo/tabs_demo.dart';
+import 'demo/tabs_fab_demo.dart';
 import 'demo/time_picker_demo.dart';
 import 'demo/two_level_list_demo.dart';
 import 'demo/weathers_demo.dart';
@@ -186,7 +187,8 @@ class GalleryHome extends StatelessComponent {
                     new GalleryDemo(title: 'Expland/Collapse List Control', builder: () => new TwoLevelListDemo()),
                     new GalleryDemo(title: 'Page Selector', builder: () => new PageSelectorDemo()),
                     new GalleryDemo(title: 'Date Picker', builder: () => new DatePickerDemo()),
-                    new GalleryDemo(title: 'Time Picker', builder: () => new TimePickerDemo())
+                    new GalleryDemo(title: 'Time Picker', builder: () => new TimePickerDemo()),
+                    new GalleryDemo(title: 'Floation Action Button', builder: () => new TabsFabDemo())
                   ]
                 )
               ]