// Copyright 2017 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; class TabbedAppBarSample extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new DefaultTabController( length: choices.length, child: new Scaffold( appBar: new AppBar( title: const Text('Tabbed AppBar'), bottom: new TabBar( isScrollable: true, tabs: choices.map((Choice choice) { return new Tab( text: choice.title, icon: new Icon(choice.icon), ); }).toList(), ), ), body: new TabBarView( children: choices.map((Choice choice) { return new Padding( padding: const EdgeInsets.all(16.0), child: new ChoiceCard(choice: choice), ); }).toList(), ), ), ), ); } } class Choice { const Choice({ this.title, this.icon }); final String title; final IconData icon; } const List<Choice> choices = const <Choice>[ const Choice(title: 'CAR', icon: Icons.directions_car), const Choice(title: 'BICYCLE', icon: Icons.directions_bike), const Choice(title: 'BOAT', icon: Icons.directions_boat), const Choice(title: 'BUS', icon: Icons.directions_bus), const Choice(title: 'TRAIN', icon: Icons.directions_railway), const Choice(title: 'WALK', icon: Icons.directions_walk), ]; class ChoiceCard extends StatelessWidget { const ChoiceCard({ Key key, this.choice }) : super(key: key); final Choice choice; @override Widget build(BuildContext context) { final TextStyle textStyle = Theme.of(context).textTheme.display1; return new Card( color: Colors.white, child: new Center( child: new Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ new Icon(choice.icon, size: 128.0, color: textStyle.color), new Text(choice.title, style: textStyle), ], ), ), ); } } void main() { runApp(new TabbedAppBarSample()); } /* Sample Catalog Title: Tabbed AppBar Summary: An AppBar with a TabBar for navigating pages just below it. Description: A TabBar can be used to navigate among the pages displayed in a TabBarView. Although a TabBar is an ordinary widget that can appear anywhere, it's most often included in the application's AppBar. Classes: AppBar, DefaultTabController, TabBar, Scaffold, TabBarView Sample: TabbedAppBarSample See also: - The "Components-Tabs" section of the material design specification: <https://material.io/guidelines/components/tabs.html> */