OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 import 'package:sky/painting/text_style.dart'; | 5 import 'package:sky/painting/text_style.dart'; |
6 import 'package:sky/theme/colors.dart' as colors; | |
7 import 'package:sky/theme/typography.dart' as typography; | 6 import 'package:sky/theme/typography.dart' as typography; |
8 import 'package:sky/widgets/basic.dart'; | 7 import 'package:sky/widgets/basic.dart'; |
9 import 'package:sky/widgets/material.dart'; | 8 import 'package:sky/widgets/card.dart'; |
10 import 'package:sky/widgets/scaffold.dart'; | 9 import 'package:sky/widgets/scaffold.dart'; |
11 import 'package:sky/widgets/tabs.dart'; | 10 import 'package:sky/widgets/tabs.dart'; |
| 11 import 'package:sky/widgets/theme.dart'; |
12 import 'package:sky/widgets/tool_bar.dart'; | 12 import 'package:sky/widgets/tool_bar.dart'; |
13 import 'package:sky/widgets/widget.dart'; | 13 import 'package:sky/widgets/widget.dart'; |
14 | 14 |
15 class TabbedNavigatorApp extends App { | 15 class TabbedNavigatorApp extends App { |
16 int selectedIndex = 0; | 16 // The index of the selected tab for each of the TabNavigators constructed bel
ow. |
| 17 List<int> selectedIndices = new List<int>.filled(4, 0); |
| 18 |
| 19 TabNavigator _buildTabNavigator(int n, List<TabNavigatorView> views) { |
| 20 return new TabNavigator( |
| 21 views: views, |
| 22 selectedIndex: selectedIndices[n], |
| 23 onChanged: (tabIndex) { |
| 24 setState(() { selectedIndices[n] = tabIndex; } ); |
| 25 } |
| 26 ); |
| 27 } |
17 | 28 |
18 Widget _buildContent(String label) { | 29 Widget _buildContent(String label) { |
19 return new Center( | 30 return new Center( |
20 child: new Text(label, style: const TextStyle(fontSize: 48.0, fontWeight:
FontWeight.w800)) | 31 child: new Text(label, style: const TextStyle(fontSize: 48.0, fontWeight:
FontWeight.w800)) |
21 ); | 32 ); |
22 } | 33 } |
23 | 34 |
24 Widget build() { | 35 TabNavigator _buildTextLabelsTabNavigator(int n) { |
| 36 Iterable<TabNavigatorView> views = ["ONE", "TWO", "FREE", "FOUR"] |
| 37 .map((text) { |
| 38 return new TabNavigatorView( |
| 39 label: new TabLabel(text: text), |
| 40 builder: () => _buildContent(text) |
| 41 ); |
| 42 }); |
| 43 return _buildTabNavigator(n, views.toList()); |
| 44 } |
| 45 |
| 46 TabNavigator _buildIconLabelsTabNavigator(int n) { |
| 47 Iterable<TabNavigatorView> views = ["event", "home", "android", "alarm", "fa
ce", "language"] |
| 48 .map((icon_name) { |
| 49 return new TabNavigatorView( |
| 50 label: new TabLabel(icon: "action/${icon_name}_white"), |
| 51 builder: () => _buildContent(icon_name) |
| 52 ); |
| 53 }); |
| 54 return _buildTabNavigator(n, views.toList()); |
| 55 } |
| 56 |
| 57 TabNavigator _buildTextAndIconLabelsTabNavigator(int n) { |
25 List<TabNavigatorView> views = <TabNavigatorView>[ | 58 List<TabNavigatorView> views = <TabNavigatorView>[ |
26 new TabNavigatorView( | 59 new TabNavigatorView( |
27 label: const TabLabel(text: 'STOCKS', icon: 'action/list_white'), | 60 label: const TabLabel(text: 'STOCKS', icon: 'action/list_white'), |
28 builder: () => _buildContent("Stocks") | 61 builder: () => _buildContent("Stocks") |
29 ), | 62 ), |
30 new TabNavigatorView( | 63 new TabNavigatorView( |
31 label: const TabLabel(text: 'PORTFOLIO', icon: 'action/account_circle_wh
ite'), | 64 label: const TabLabel(text: 'PORTFOLIO', icon: 'action/account_circle_wh
ite'), |
32 builder: () => _buildContent("Portfolio") | 65 builder: () => _buildContent("Portfolio") |
33 ), | 66 ), |
34 new TabNavigatorView( | 67 new TabNavigatorView( |
35 label: const TabLabel(text: 'SUMMARY', icon: 'action/assessment_white'), | 68 label: const TabLabel(text: 'SUMMARY', icon: 'action/assessment_white'), |
36 builder: () => _buildContent("Summary") | 69 builder: () => _buildContent("Summary") |
37 ) | 70 ) |
38 ]; | 71 ]; |
| 72 return _buildTabNavigator(n, views); |
| 73 } |
39 | 74 |
40 TabNavigator tabNavigator = new TabNavigator( | 75 Container _buildCard(TabNavigator tabNavigator) { |
41 views: views, | 76 return new Container( |
42 selectedIndex: selectedIndex, | 77 child: new Card(child: tabNavigator), |
43 onChanged: (tabIndex) { | 78 padding: const EdgeDims.all(12.0), |
44 setState(() { selectedIndex = tabIndex; } ); | 79 decoration: new BoxDecoration(backgroundColor: Theme.of(this).primary[50]) |
45 } | |
46 ); | 80 ); |
| 81 } |
| 82 |
| 83 Widget build() { |
| 84 List<TabNavigatorView> views = <TabNavigatorView>[ |
| 85 new TabNavigatorView( |
| 86 label: const TabLabel(text: 'TEXT'), |
| 87 builder: () => _buildCard(_buildTextLabelsTabNavigator(0)) |
| 88 ), |
| 89 new TabNavigatorView( |
| 90 label: const TabLabel(text: 'ICONS'), |
| 91 builder: () => _buildCard(_buildIconLabelsTabNavigator(1)) |
| 92 ), |
| 93 new TabNavigatorView( |
| 94 label: const TabLabel(text: 'BOTH'), |
| 95 builder: () => _buildCard(_buildTextAndIconLabelsTabNavigator(2)) |
| 96 ) |
| 97 ]; |
| 98 |
| 99 TabNavigator tabNavigator = _buildTabNavigator(3, views); |
47 | 100 |
48 ToolBar toolbar = new ToolBar( | 101 ToolBar toolbar = new ToolBar( |
49 center: new Text('Tabbed Navigator', style: typography.white.title) | 102 center: new Text('Tabbed Navigator', style: typography.white.title) |
50 ); | 103 ); |
51 | 104 |
52 return new Scaffold( | 105 return new Scaffold( |
53 toolbar: toolbar, | 106 toolbar: toolbar, |
54 body: new Material( | 107 body: tabNavigator |
55 color: colors.Grey[50], | |
56 child: tabNavigator | |
57 ) | |
58 ); | 108 ); |
59 } | 109 } |
60 } | 110 } |
61 | 111 |
62 void main() { | 112 void main() { |
63 runApp(new TabbedNavigatorApp()); | 113 runApp(new TabbedNavigatorApp()); |
64 } | 114 } |
OLD | NEW |