Merge pull request #1609 from HansMuller/tab_fab

Added the FAB per Tab demo

Demonstrates that when the Scaffold's Floating Action Button is changed, the new one (if any) fades and turns in.

Similar to the "Lateral Screens" demo here https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

There are more tabs and different tab views to demo more kinds of FAB changes.

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())
                   ]
                 )
               ]