Merge pull request #1106 from HansMuller/tab_view_demo

TabBarView material gallery demo

examples/material_gallery/flutter.yaml

@@ -3,6 +3,8 @@ assets:
   - assets/flutter_logo.png
 material-design-icons:
   - name: navigation/arrow_drop_down
+  - name: navigation/arrow_forward
+  - name: navigation/arrow_back
   - name: navigation/cancel
   - name: navigation/menu
   - name: action/event

examples/material_gallery/lib/demo/page_selector_demo.dart

@@ -0,0 +1,104 @@
+// 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/animation.dart';
+import 'package:flutter/material.dart';
+
+import 'widget_demo.dart';
+
+final List<String> _iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
+
+class TabViewDemo extends StatelessComponent {
+  Widget _buildTabIndicator(BuildContext context, String iconName) {
+    final Color color = Theme.of(context).primaryColor;
+    final AnimatedColorValue _selectedColor = new AnimatedColorValue(Colors.transparent, end: color, curve: Curves.ease);
+    final AnimatedColorValue _previousColor = new AnimatedColorValue(color, end: Colors.transparent, curve: Curves.ease);
+    final TabBarSelectionState selection = TabBarSelection.of(context);
+
+    return new BuilderTransition(
+      performance: selection.performance,
+      variables: <AnimatedColorValue>[_selectedColor, _previousColor],
+      builder: (BuildContext context) {
+        Color background = selection.value == iconName ? _selectedColor.end : _selectedColor.begin;
+        if (selection.valueIsChanging) {
+          // Then the selection's performance is animating from previousValue to value.
+          if (selection.value == iconName)
+            background = _selectedColor.value;
+          else if (selection.previousValue == iconName)
+            background = _previousColor.value;
+        }
+        return new Container(
+          width: 12.0,
+          height: 12.0,
+          margin: new EdgeDims.all(4.0),
+          decoration: new BoxDecoration(
+            backgroundColor: background,
+            border: new Border.all(color: _selectedColor.end),
+            shape: BoxShape.circle
+          )
+        );
+      }
+    );
+  }
+
+  Widget _buildTabView(String iconName) {
+    return new Container(
+      key: new ValueKey<String>(iconName),
+      padding: const EdgeDims.all(12.0),
+      child: new Card(
+        child: new Center(
+          child: new Icon(icon: "action/$iconName", size:IconSize.s48)
+        )
+      )
+    );
+  }
+
+  void _handleArrowButtonPress(BuildContext context, int delta) {
+    final TabBarSelectionState selection = TabBarSelection.of(context);
+    if (!selection.valueIsChanging)
+      selection.value = selection.values[(selection.index + delta).clamp(0, selection.values.length - 1)];
+  }
+
+  Widget build(BuildContext notUsed) { // Can't find the TabBarSelection from this context.
+    return new TabBarSelection(
+      values: _iconNames,
+      child: new Builder(
+        builder: (BuildContext context) {
+          return new Column([
+            new Container(
+              margin: const EdgeDims.only(top: 16.0),
+              child: new Row(<Widget>[
+                new IconButton(
+                  icon: "navigation/arrow_back",
+                  onPressed: () { _handleArrowButtonPress(context, -1); }
+                ),
+                new Row(
+                  _iconNames.map((String name) => _buildTabIndicator(context, name)).toList(),
+                  justifyContent: FlexJustifyContent.collapse
+                ),
+                new IconButton(
+                  icon: "navigation/arrow_forward",
+                  onPressed: () { _handleArrowButtonPress(context, 1); }
+                )],
+                justifyContent: FlexJustifyContent.spaceBetween
+              )
+            ),
+            new Flexible(
+              child: new TabBarView<String>(
+                items: _iconNames,
+                itemBuilder: _buildTabView
+              )
+            )
+          ]);
+        }
+      )
+    );
+  }
+}
+
+final WidgetDemo kPageSelectorDemo = new WidgetDemo(
+  title: 'Page Selector',
+  routeName: '/page-selector',
+  builder: (_) => new TabViewDemo()
+);

examples/material_gallery/lib/main.dart

@@ -12,6 +12,7 @@ import 'demo/persistent_bottom_sheet_demo.dart';
 import 'demo/selection_controls_demo.dart';
 import 'demo/slider_demo.dart';
 import 'demo/tabs_demo.dart';
+import 'demo/page_selector_demo.dart';
 import 'demo/time_picker_demo.dart';
 import 'demo/widget_demo.dart';
 import 'gallery_page.dart';
@@ -22,6 +23,7 @@ final List<WidgetDemo> _kDemos = <WidgetDemo>[
   kSliderDemo,
   kDatePickerDemo,
   kTabsDemo,
+  kPageSelectorDemo,
   kTimePickerDemo,
   kDropDownDemo,
   kModalBottomSheetDemo,