Work with tabs
Working with tabs is a common pattern in apps that follow the Material Design guidelines. Flutter includes a convenient way to create tab layouts as part of the material library.
This recipe creates a tabbed example using the following steps;
- Create a
TabController
. - Create the tabs.
- Create content for each tab.
TabController
1. Create a For tabs to work, you need to keep the selected tab and content
sections in sync. This is the job of the
TabController
.
Either create a TabController manually, or automatically by using a DefaultTabController widget.
Using DefaultTabController
is the simplest option, since it
creates a TabController
and makes it available to all descendant widgets.
DefaultTabController(
// The number of tabs / content sections to display.
length: 3,
child: // Complete this code in the next step.
);
2. Create the tabs
When a tab is selected, it needs to display content.
You can create tabs using the
TabBar
widget. In this example, create a TabBar
with three
Tab
widgets and place it within an
AppBar
.
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
),
);
By default, the TabBar
looks up the widget tree for the nearest
DefaultTabController
. If you’re manually creating a TabController
,
pass it to the TabBar
.
3. Create content for each tab
Now that you have tabs, display content when a tab is selected.
For this purpose, use the
TabBarView
widget.
TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
);
Complete example
import 'package:flutter/material.dart';
void main() {
runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}