01 | import 'package:flutter/material.dart' ; |
02 |
03 | class TabbedAppBarSample extends StatelessWidget { |
04 | @override |
05 | Widget build(BuildContext context) { |
06 | return MaterialApp( |
07 | home: DefaultTabController( |
08 | length: choices.length, |
09 | child: Scaffold( |
10 | appBar: AppBar( |
11 | title: Text( 'Tabbed AppBar' ), |
12 | bottom: TabBar( |
13 | isScrollable: true , |
14 | tabs: choices.map((Choice choice) { |
15 | return Tab(text: choice.title, icon: Icon(choice.icon)); |
16 | }).toList(), |
17 | ), |
18 | ), |
19 | body: TabBarView( |
20 | children: choices.map((Choice choice) { |
21 | return Padding( |
22 | padding: EdgeInsets.all(16.0), |
23 | child: ChoiceCard(choice: choice), |
24 | ); |
25 | }).toList()), |
26 | ), |
27 | )); |
28 | } |
29 | } |
30 |
31 | class Choice { |
32 | const Choice({ this .title, this .icon}); |
33 | final String title; |
34 | final IconData icon; |
35 | } |
36 |
37 | const List<Choice> choices = const <Choice>[ |
38 | const Choice(title: 'CAR' , icon: Icons.directions_car), |
39 | const Choice(title: 'BICYCLE' , icon: Icons.directions_bike), |
40 | const Choice(title: 'BOAT' , icon: Icons.directions_boat), |
41 | const Choice(title: 'BUS' , icon: Icons.directions_bus), |
42 | const Choice(title: 'TRAIN' , icon: Icons.directions_railway), |
43 | const Choice(title: 'WALK' , icon: Icons.directions_walk) |
44 | ]; |
45 |
46 | class ChoiceCard extends StatelessWidget { |
47 | const ChoiceCard({Key key, this .choice}) : super (key: key); |
48 |
49 | final Choice choice; |
50 |
51 | @override |
52 | Widget build(BuildContext context) { |
53 | final TextStyle textStyle = Theme.of(context).textTheme.bodyText1; |
54 | return Card( |
55 | color: Colors.white, |
56 | child: Center( |
57 | child: Column( |
58 | mainAxisSize: MainAxisSize.min, |
59 | crossAxisAlignment: CrossAxisAlignment.center, |
60 | children: <Widget>[ |
61 | Icon( |
62 | choice.icon, |
63 | size: 128.0, |
64 | color: textStyle.color, |
65 | ), |
66 | Text( |
67 | choice.title, |
68 | style: textStyle, |
69 | ) |
70 | ], |
71 | ), |
72 | ), |
73 | ); |
74 | } |
75 | } |
76 |
77 | void main() => runApp(TabbedAppBarSample()) |