Work with tabs
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 the tabs.
- Create content for each tab.
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
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
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
3. Create content for each tab
Note: Order is important and must correspond to the order of the tabs in the
TabBarView( children: [ Icon(Icons.directions_car), Icon(Icons.directions_transit), Icon(Icons.directions_bike), ], );
You create a layout by composing widgets to build more complex widgets. For example, the first screenshot below shows 3 icons with a label under each one:. The second screenshot displays the visual layout, showing a row of 3 columns where each column contains an icon and a label.. Here’s a diagram of the widget tree for this UI:.