From 28c753500a1bdcf7b43b196c32fc0ddd18454b12 Mon Sep 17 00:00:00 2001 From: Hans Muller Date: Tue, 30 Jun 2015 12:59:51 -0700 Subject: [PATCH] Gratuitous tabs example enhancement Demo all three varieties of TabLabels in 3 different TabNavigators. Use another TabNavigator to select among the three Card-encapsulated demos. R=abarth@chromium.org Review URL: https://codereview.chromium.org/1217243005. --- sdk/example/widgets/tabs.dart | 78 ++++++++++++++++++++++++++------ tests/examples/tabs-expected.txt | 68 ---------------------------- 2 files changed, 64 insertions(+), 82 deletions(-) diff --git a/sdk/example/widgets/tabs.dart b/sdk/example/widgets/tabs.dart index cc35e75488c..872a3e71915 100644 --- a/sdk/example/widgets/tabs.dart +++ b/sdk/example/widgets/tabs.dart @@ -3,17 +3,28 @@ // found in the LICENSE file. import 'package:sky/painting/text_style.dart'; -import 'package:sky/theme/colors.dart' as colors; import 'package:sky/theme/typography.dart' as typography; import 'package:sky/widgets/basic.dart'; -import 'package:sky/widgets/material.dart'; +import 'package:sky/widgets/card.dart'; import 'package:sky/widgets/scaffold.dart'; import 'package:sky/widgets/tabs.dart'; +import 'package:sky/widgets/theme.dart'; import 'package:sky/widgets/tool_bar.dart'; import 'package:sky/widgets/widget.dart'; class TabbedNavigatorApp extends App { - int selectedIndex = 0; + // The index of the selected tab for each of the TabNavigators constructed below. + List selectedIndices = new List.filled(4, 0); + + TabNavigator _buildTabNavigator(int n, List views) { + return new TabNavigator( + views: views, + selectedIndex: selectedIndices[n], + onChanged: (tabIndex) { + setState(() { selectedIndices[n] = tabIndex; } ); + } + ); + } Widget _buildContent(String label) { return new Center( @@ -21,7 +32,29 @@ class TabbedNavigatorApp extends App { ); } - Widget build() { + TabNavigator _buildTextLabelsTabNavigator(int n) { + Iterable views = ["ONE", "TWO", "FREE", "FOUR"] + .map((text) { + return new TabNavigatorView( + label: new TabLabel(text: text), + builder: () => _buildContent(text) + ); + }); + return _buildTabNavigator(n, views.toList()); + } + + TabNavigator _buildIconLabelsTabNavigator(int n) { + Iterable views = ["event", "home", "android", "alarm", "face", "language"] + .map((icon_name) { + return new TabNavigatorView( + label: new TabLabel(icon: "action/${icon_name}_white"), + builder: () => _buildContent(icon_name) + ); + }); + return _buildTabNavigator(n, views.toList()); + } + + TabNavigator _buildTextAndIconLabelsTabNavigator(int n) { List views = [ new TabNavigatorView( label: const TabLabel(text: 'STOCKS', icon: 'action/list_white'), @@ -36,14 +69,34 @@ class TabbedNavigatorApp extends App { builder: () => _buildContent("Summary") ) ]; + return _buildTabNavigator(n, views); + } - TabNavigator tabNavigator = new TabNavigator( - views: views, - selectedIndex: selectedIndex, - onChanged: (tabIndex) { - setState(() { selectedIndex = tabIndex; } ); - } + Container _buildCard(TabNavigator tabNavigator) { + return new Container( + child: new Card(child: tabNavigator), + padding: const EdgeDims.all(12.0), + decoration: new BoxDecoration(backgroundColor: Theme.of(this).primary[50]) ); + } + + Widget build() { + List views = [ + new TabNavigatorView( + label: const TabLabel(text: 'TEXT'), + builder: () => _buildCard(_buildTextLabelsTabNavigator(0)) + ), + new TabNavigatorView( + label: const TabLabel(text: 'ICONS'), + builder: () => _buildCard(_buildIconLabelsTabNavigator(1)) + ), + new TabNavigatorView( + label: const TabLabel(text: 'BOTH'), + builder: () => _buildCard(_buildTextAndIconLabelsTabNavigator(2)) + ) + ]; + + TabNavigator tabNavigator = _buildTabNavigator(3, views); ToolBar toolbar = new ToolBar( center: new Text('Tabbed Navigator', style: typography.white.title) @@ -51,10 +104,7 @@ class TabbedNavigatorApp extends App { return new Scaffold( toolbar: toolbar, - body: new Material( - color: colors.Grey[50], - child: tabNavigator - ) + body: tabNavigator ); } } diff --git a/tests/examples/tabs-expected.txt b/tests/examples/tabs-expected.txt index 0c8852bec8d..8ac57d7a21d 100644 --- a/tests/examples/tabs-expected.txt +++ b/tests/examples/tabs-expected.txt @@ -6,73 +6,5 @@ PAINT FOR FRAME #1 ---------------------------------------------- CONSOLE: PAINT FOR FRAME #2 ---------------------------------------------- 2 | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | paintChild RenderScaffold at Point(0.0, 0.0) -2 | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | paintChild RenderDecoratedBox at Point(0.0, 81.0) -2 | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | drawRRect(Instance of 'RRect', Paint(color:Color(0xfffafafa))) -2 | | | paintChild RenderTabBar at Point(0.0, 81.0) -2 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | drawRect(Rect.fromLTRB(0.0, 81.0, 800.0, 155.0), Paint(color:Color(0xff3f51b5))) -2 | | | | paintChild RenderInkWell at Point(0.0, 81.0) -2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | paintChild RenderOpacity at Point(104.83333333333334, 81.0) -2 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | paintChild RenderPadding at Point(121.33333333333334, 91.0) -2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | | paintChild RenderImage at Point(121.33333333333334, 91.0) -2 | | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | paintChild RenderParagraph at Point(104.83333333333334, 125.0) -2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | | translate(104.83333333333334, 125.0) -2 | | | | | | | translate(-104.83333333333334, -125.0) -2 | | | | drawRect(Rect.fromLTRB(0.0, 153.0, 266.6666564941406, 155.0), Paint(color:Color(0xffff4081))) -2 | | | | paintChild RenderInkWell at Point(266.6666666666667, 81.0) -2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | paintChild RenderOpacity at Point(360.0, 81.0) -2 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) -2 | | | | | | paintChild RenderPadding at Point(388.0, 91.0) -2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | | paintChild RenderImage at Point(388.0, 91.0) -2 | | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | paintChild RenderParagraph at Point(360.0, 125.0) -2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | | translate(360.0, 125.0) -2 | | | | | | | translate(-360.0, -125.0) -2 | | | | | | restore -2 | | | | paintChild RenderInkWell at Point(533.3333333333334, 81.0) -2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | paintChild RenderOpacity at Point(630.6666666666667, 81.0) -2 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | saveLayer(null, Paint(color:Color(0xb3000000))) -2 | | | | | | paintChild RenderPadding at Point(654.6666666666667, 91.0) -2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | | paintChild RenderImage at Point(654.6666666666667, 91.0) -2 | | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | paintChild RenderParagraph at Point(630.6666666666667, 125.0) -2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | | translate(630.6666666666667, 125.0) -2 | | | | | | | translate(-630.6666666666667, -125.0) -2 | | | | | | restore -2 | | | paintChild RenderPositionedBox at Point(310.0, 155.0) -2 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | paintChild RenderParagraph at Point(310.0, 343.5) -2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | translate(310.0, 343.5) -2 | | | | | translate(-310.0, -343.5) -2 | | paintChild RenderDecoratedBox at Point(0.0, 0.0) -2 | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 81.0), Paint(color:Color(0xff3f51b5), drawLooper:true)) -2 | | | paintChild RenderFlex at Point(8.0, 0.0) -2 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | paintChild RenderConstrainedBox at Point(8.0, 25.0) -2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | paintChild RenderPadding at Point(8.0, 39.0) -2 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | paintChild RenderParagraph at Point(32.0, 39.0) -2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | | translate(32.0, 39.0) -2 | | | | | | | translate(-32.0, -39.0) ------------------------------------------------------------------------ PAINTED 2 FRAMES