Create Tabbar in Flutter: The tabs are mainly use for mobile navigation. The styling of tabs is different for different operating systems. For example, it is placed at the top of the screen in android devices while it is placed at the bottom in iOS devices.

Flutter already handles how to switch between tabs, which makes it easier for us. In addition, Flutter also makes it possible to customize the style and behavior of the tab layout.

Working with tabs is a common pattern in Android and iOS apps that follow the Material Design guidelines. Flutter provides a convenient way to create a tab layout. To add tabs to the app, we need to create a TabBar and TabBarView and attach them with the TabController. The controller will sync both so that we can have the behavior which we need.

TabBar and TabBarView require a TabController to work. There are two different ways to provide the controller. The first one is having a DefaultTabController as an ancestor widget. DefaultTabController can be create using the constructor below.

If you want to implement tab layout, first you need to have a tab bar which contains the list of tabs. In Flutter, you can use the TabBar widget. The TabBar can be placed anywhere according to the design. If you want to place it right under the AppBar, you can pass it as the bottom argument of the AppBar. Below is the constructor.

Create Tabbar in Flutter :

To implement a tab bar in a flutter, we’re going to use widgets called DefaultTabController, TabBarView, and Tab.

• DefaultTabController is use to control the navigation between tabs, we’re setting the default length is 3 which means, we’re declaring 3 tabs
• Inside the App bar bottom, we are declaring Tabbar widget which has 3 Tab widget
• Inside the Scaffold body, we are having TabBarView which is containing 3 pages

Full Code:Create Tabbar in Flutter

import 'package:flutter/material.dart';

class TabbarExample extends StatefulWidget {
  const TabbarExample({Key? key}) : super(key: key);

  @override
  State<TabbarExample> createState() => _TabbarExampleState();
}

class _TabbarExampleState extends State<TabbarExample> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text("AppMaking.com"),
          backgroundColor: Colors.blueGrey[900],
          bottom: const TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.chat_bubble),
                text: "Chats",
              ),
              Tab(
                icon: Icon(Icons.video_call),
                text: "Calls",
              ),
              Tab(
                icon: Icon(Icons.settings),
                text: "Settings",
              )
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            Center(
              child: Text("Chats"),
            ),
            Center(
              child: Text("Calls"),
            ),
            Center(
              child: Text("Settings"),
            ),
          ],
        ),
      ),
    );
  }
}

For More : To know about Dropdown in Flutter