• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// Copyright 2017 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import 'package:flutter/material.dart';
6
7class TabbedAppBarSample extends StatelessWidget {
8  @override
9  Widget build(BuildContext context) {
10    return MaterialApp(
11      home: DefaultTabController(
12        length: choices.length,
13        child: Scaffold(
14          appBar: AppBar(
15            title: const Text('Tabbed AppBar'),
16            bottom: TabBar(
17              isScrollable: true,
18              tabs: choices.map<Widget>((Choice choice) {
19                return Tab(
20                  text: choice.title,
21                  icon: Icon(choice.icon),
22                );
23              }).toList(),
24            ),
25          ),
26          body: TabBarView(
27            children: choices.map<Widget>((Choice choice) {
28              return Padding(
29                padding: const EdgeInsets.all(16.0),
30                child: ChoiceCard(choice: choice),
31              );
32            }).toList(),
33          ),
34        ),
35      ),
36    );
37  }
38}
39
40class Choice {
41  const Choice({ this.title, this.icon });
42  final String title;
43  final IconData icon;
44}
45
46const List<Choice> choices = <Choice>[
47  Choice(title: 'CAR', icon: Icons.directions_car),
48  Choice(title: 'BICYCLE', icon: Icons.directions_bike),
49  Choice(title: 'BOAT', icon: Icons.directions_boat),
50  Choice(title: 'BUS', icon: Icons.directions_bus),
51  Choice(title: 'TRAIN', icon: Icons.directions_railway),
52  Choice(title: 'WALK', icon: Icons.directions_walk),
53];
54
55class ChoiceCard extends StatelessWidget {
56  const ChoiceCard({ Key key, this.choice }) : super(key: key);
57
58  final Choice choice;
59
60  @override
61  Widget build(BuildContext context) {
62    final TextStyle textStyle = Theme.of(context).textTheme.display1;
63    return Card(
64      color: Colors.white,
65      child: Center(
66        child: Column(
67          mainAxisSize: MainAxisSize.min,
68          crossAxisAlignment: CrossAxisAlignment.center,
69          children: <Widget>[
70            Icon(choice.icon, size: 128.0, color: textStyle.color),
71            Text(choice.title, style: textStyle),
72          ],
73        ),
74      ),
75    );
76  }
77}
78
79void main() {
80  runApp(TabbedAppBarSample());
81}
82
83/*
84Sample Catalog
85
86Title: Tabbed AppBar
87
88Summary: An AppBar with a TabBar for navigating pages just below it.
89
90Description:
91A TabBar can be used to navigate among the pages displayed in a TabBarView.
92Although a TabBar is an ordinary widget that can appear anywhere, it's most often
93included in the application's AppBar.
94
95Classes: AppBar, DefaultTabController, TabBar, Scaffold, TabBarView
96
97Sample: TabbedAppBarSample
98
99See also:
100  - The "Components-Tabs" section of the material design specification:
101    <https://material.io/go/design-tabs>
102*/
103