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.
Note: To create tabs in a Cupertino app, see the Building a Cupertino app with Flutter codelab.
This recipe creates a tabbed example using the following steps;
-
Create a
TabController
. - Create the tabs.
- Create content for each tab.
1. Create a TabController
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.
Note: Order is important and must correspond to the order of the tabs in the
TabBar
.
TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
);