Merge pull request #1007 from HansMuller/revise_tabbar_selection

Make TabBarSelection a widget

TabBarSelection is now expected to be an ancestor of its TabBar and TabBarView.

examples/material_gallery/lib/demo/tabs_demo.dart

@@ -7,11 +7,16 @@ import 'package:flutter/material.dart';
 import 'widget_demo.dart';
 
 final List<String> _iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
-final TabBarSelection _selection = new TabBarSelection(maxIndex: _iconNames.length - 1);
 
-Widget buildTabBar(_) {
+Widget _buildTabBarSelection(_, Widget child) {
+  return new TabBarSelection(
+    maxIndex: _iconNames.length - 1,
+    child: child
+  );
+}
+
+Widget _buildTabBar(_) {
   return new TabBar(
-    selection: _selection,
     isScrollable: true,
     labels: _iconNames.map((String iconName) => new TabLabel(text: iconName, icon: "action/$iconName")).toList()
   );
@@ -24,7 +29,6 @@ class TabsDemo extends StatefulComponent {
 class _TabsDemoState extends State<TabsDemo> {
   Widget build(_) {
     return new TabBarView<String>(
-      selection: _selection,
       items: _iconNames,
       itemBuilder: (BuildContext context, String iconName, int index) {
         return new Container(
@@ -42,6 +46,7 @@ class _TabsDemoState extends State<TabsDemo> {
 final WidgetDemo kTabsDemo = new WidgetDemo(
   title: 'Tabs',
   routeName: '/tabs',
-  tabBarBuilder: buildTabBar,
+  tabBarBuilder: _buildTabBar,
+  pageWrapperBuilder: _buildTabBarSelection,
   builder: (_) => new TabsDemo()
 );

examples/material_gallery/lib/demo/widget_demo.dart

@@ -4,12 +4,22 @@
 
 import 'package:flutter/material.dart';
 
+typedef Widget PageWrapperBuilder(BuildContext context, Widget child);
+
 class WidgetDemo {
-  WidgetDemo({ this.title, this.routeName, this.tabBarBuilder, this.floatingActionButtonBuilder, this.builder });
+  WidgetDemo({
+    this.title,
+    this.routeName,
+    this.tabBarBuilder,
+    this.pageWrapperBuilder,
+    this.floatingActionButtonBuilder,
+    this.builder
+  });
 
   final String title;
   final String routeName;
   final WidgetBuilder tabBarBuilder;
+  final PageWrapperBuilder pageWrapperBuilder;
   final WidgetBuilder floatingActionButtonBuilder;
   final WidgetBuilder builder;
 }

examples/material_gallery/lib/gallery_page.dart

@@ -63,20 +63,27 @@ class _GalleryPageState extends State<GalleryPage> {
     return builder != null ? builder(context) : null;
   }
 
+  Widget _buildPageWrapper(BuildContext context, Widget child) {
+    final PageWrapperBuilder builder = config.active?.pageWrapperBuilder;
+    return builder != null ? builder(context, child) : child;
+  }
+
   Widget _buildFloatingActionButton() {
     final WidgetBuilder builder = config.active?.floatingActionButtonBuilder;
     return builder != null ? builder(context) : null;
   }
 
   Widget build(BuildContext context) {
-    return new Scaffold(
-      toolBar: new ToolBar(
-        center: new Text(config.active?.title ?? 'Flutter Material gallery'),
-        tabBar: _buildTabBar()
-      ),
-      drawer: _buildDrawer(),
-      floatingActionButton: _buildFloatingActionButton(),
-      body: _buildBody()
+    return _buildPageWrapper(context,
+      new Scaffold(
+        toolBar: new ToolBar(
+          center: new Text(config.active?.title ?? 'Flutter Material gallery'),
+          tabBar: _buildTabBar()
+        ),
+        drawer: _buildDrawer(),
+        floatingActionButton: _buildFloatingActionButton(),
+        body: _buildBody()
+      )
     );
   }
 }

examples/stocks/lib/stock_home.dart

@@ -24,15 +24,9 @@ class StockHomeState extends State<StockHome> {
   final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
   bool _isSearching = false;
   String _searchQuery;
-  TabBarSelection _tabBarSelection;
 
   void initState() {
     super.initState();
-    _tabBarSelection = PageStorage.of(context)?.readState(context);
-    if (_tabBarSelection == null) {
-      _tabBarSelection = new TabBarSelection(maxIndex: 1);
-      PageStorage.of(context)?.writeState(context, _tabBarSelection);
-    }
   }
 
   void _handleSearchBegin() {
@@ -168,7 +162,6 @@ class StockHomeState extends State<StockHome> {
         )
       ],
       tabBar: new TabBar(
-        selection: _tabBarSelection,
         labels: <TabLabel>[
           new TabLabel(text: StockStrings.of(context).market()),
           new TabLabel(text: StockStrings.of(context).portfolio())
@@ -273,24 +266,26 @@ class StockHomeState extends State<StockHome> {
   }
 
   Widget build(BuildContext context) {
-    return new Scaffold(
-      key: _scaffoldKey,
-      toolBar: _isSearching ? buildSearchBar() : buildToolBar(),
-      floatingActionButton: buildFloatingActionButton(),
-      drawer: _buildDrawer(context),
-      body: new TabBarView<StockHomeTab>(
-        selection: _tabBarSelection,
-        items: <StockHomeTab>[StockHomeTab.market, StockHomeTab.portfolio],
-        itemBuilder: (BuildContext context, StockHomeTab tab, _) {
-          switch (tab) {
-            case StockHomeTab.market:
-              return _buildStockTab(context, tab, config.symbols);
-            case StockHomeTab.portfolio:
-              return _buildStockTab(context, tab, portfolioSymbols);
-            default:
-              assert(false);
+    return new TabBarSelection(
+      maxIndex: 1,
+      child: new Scaffold(
+        key: _scaffoldKey,
+        toolBar: _isSearching ? buildSearchBar() : buildToolBar(),
+        floatingActionButton: buildFloatingActionButton(),
+        drawer: _buildDrawer(context),
+        body: new TabBarView<StockHomeTab>(
+          items: <StockHomeTab>[StockHomeTab.market, StockHomeTab.portfolio],
+          itemBuilder: (BuildContext context, StockHomeTab tab, _) {
+            switch (tab) {
+              case StockHomeTab.market:
+                return _buildStockTab(context, tab, config.symbols);
+              case StockHomeTab.portfolio:
+                return _buildStockTab(context, tab, portfolioSymbols);
+              default:
+                assert(false);
+            }
           }
-        }
+        )
       )
     );
   }

packages/flutter/lib/src/material/tool_bar.dart

@@ -8,7 +8,6 @@ import 'constants.dart';
 import 'icon_theme.dart';
 import 'icon_theme_data.dart';
 import 'material.dart';
-import 'tabs.dart';
 import 'theme.dart';
 import 'typography.dart';
 
@@ -30,7 +29,7 @@ class ToolBar extends StatelessComponent {
   final Widget center;
   final List<Widget> right;
   final Widget bottom;
-  final TabBar tabBar;
+  final Widget tabBar;
   final int elevation;
   final Color backgroundColor;
   final TextTheme textTheme;

packages/flutter/test/widget/tabs_test.dart

@@ -7,14 +7,15 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:test/test.dart';
 
-TabBarSelection selection;
-
 Widget buildFrame({ List<String> tabs, bool isScrollable: false }) {
   return new Material(
-    child: new TabBar(
-      labels: tabs.map((String tab) => new TabLabel(text: tab)).toList(),
-      selection: selection,
-      isScrollable: isScrollable
+    child: new TabBarSelection(
+      index: 2,
+      maxIndex: tabs.length - 1,
+      child: new TabBar(
+        labels: tabs.map((String tab) => new TabLabel(text: tab)).toList(),
+        isScrollable: isScrollable
+      )
     )
   );
 }
@@ -23,9 +24,10 @@ void main() {
   test('TabBar tap selects tab', () {
     testWidgets((WidgetTester tester) {
       List<String> tabs = <String>['A', 'B', 'C'];
-      selection = new TabBarSelection(index: 2, maxIndex: tabs.length - 1);
 
       tester.pumpWidget(buildFrame(tabs: tabs, isScrollable: false));
+      TabBarSelectionState selection = tester.findStateOfType(TabBarSelectionState);
+      expect(selection, isNotNull);
       expect(tester.findText('A'), isNotNull);
       expect(tester.findText('B'), isNotNull);
       expect(tester.findText('C'), isNotNull);
@@ -51,9 +53,10 @@ void main() {
   test('Scrollable TabBar tap selects tab', () {
     testWidgets((WidgetTester tester) {
       List<String> tabs = <String>['A', 'B', 'C'];
-      selection = new TabBarSelection(index: 2, maxIndex: tabs.length - 1);
 
       tester.pumpWidget(buildFrame(tabs: tabs, isScrollable: true));
+      TabBarSelectionState selection = tester.findStateOfType(TabBarSelectionState);
+      expect(selection, isNotNull);
       expect(tester.findText('A'), isNotNull);
       expect(tester.findText('B'), isNotNull);
       expect(tester.findText('C'), isNotNull);