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 thematerial library.

This recipe creates a tabbed example using the following steps;

1. Create aTabController.
2. Create the tabs.
3. Create content for each tab.

For tabs to work, you need to keep the selected tab and content sections in sync. This is the job of theTabController.

Either create aTabController manually, or automatically by using aDefaultTabController widget.

UsingDefaultTabController is the simplest option, since it creates aTabController and makes it available to all descendant widgets.

return MaterialApp(  home:DefaultTabController(length:3, child:Scaffold()),);

When a tab is selected, it needs to display content. You can create tabs using theTabBar widget. In this example, create aTabBar with threeTab widgets and place it within anAppBar.

return MaterialApp(  home:DefaultTabController(    length:3,    child:Scaffold(      appBar:AppBar(        bottom:const TabBar(          tabs: [            Tab(icon:Icon(Icons.directions_car)),            Tab(icon:Icon(Icons.directions_transit)),            Tab(icon:Icon(Icons.directions_bike)),          ],        ),      ),    ),  ),);

By default, theTabBar looks up the widget tree for the nearestDefaultTabController. If you're manually creating aTabController, pass it to theTabBar.

Now that you have tabs, display content when a tab is selected. For this purpose, use theTabBarView widget.

body:const TabBarView(  children: [    Icon(Icons.directions_car),    Icon(Icons.directions_transit),    Icon(Icons.directions_bike),  ],),

import 'package:flutter/material.dart';void main() {  runApp(const TabBarDemo());}class TabBarDemo extends StatelessWidget {  const TabBarDemo({super.key});  @override  Widget build(BuildContext context) {    return MaterialApp(      home: DefaultTabController(        length: 3,        child: Scaffold(          appBar: AppBar(            bottom: const TabBar(              tabs: [                Tab(icon: Icon(Icons.directions_car)),                Tab(icon: Icon(Icons.directions_transit)),                Tab(icon: Icon(Icons.directions_bike)),              ],            ),            title: const Text('Tabs Demo'),          ),          body: const TabBarView(            children: [              Icon(Icons.directions_car),              Icon(Icons.directions_transit),              Icon(Icons.directions_bike),            ],          ),        ),      ),    );  }}