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;

1. Create a TabController.
2. Create the tabs.
3. 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),
  ],
);