Tab Fragment in Flutter

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.

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.

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.

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(

            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.language)),
                Tab(icon: Icon(Icons.whatshot)),
                Tab(icon: Icon(Icons.layers)),
              ],
            ),
         
            title: Text('Tabs Demo'),
          ),
       
          body: TabBarView(
            children: [
              Icon(Icons.camera),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}