Flutter Tabbar Widget implementation with Steps

Suppose you want the users to quickly navigate to the categories or other UI then you must use the flutter tabbar. It is part of the Scaffold Material Design of the Flutter. This widget show below the AppBar widget. In this tutorial, you will know how to build a beautiful Fluter Tabbar with steps.

Steps to Design the Flutter Tabbar

In this section, you will know all the steps you need to follow to build a beautiful Tabbar.

Step 1:  Create Controller for the Tabs

This is the first step to create a tab bar. Here you have to create a controller for the Flutter Tab so that the selected tab and its content must be synced to each other.  You can do so by using the DefaultTabController() widget. Inside it, you have to define the number of tabs you want. In our example, it is 3. Use the below lines of code.

DefaultTabController(
        initialIndex: 1,
        length: 3,

The intialIndex tells from where the tab should be start and length is the number of tabs.

Step 2: Create Flutter Tabbar tabs

Now the next step is to create tabs for your tab bar. To do so you have to define bottom: TabBar()  inside the app bar. It will create tabs for you. In our example, I am creating three tabs as defined in the controller (Step 1). So let’s create it.

bottom: TabBar(
               tabs: [
                 Tab(child: Text("Tab A"),),
                 Tab(child: Text("Tab B"),),
                 Tab(child: Text("Tab B"),),

               ],
             ),

Here you can see I have created three tabs using the tab widget. Each tab will get the name Tab A, Tab B, Tab C.

Step 3: Create Content for Tabs

Now the last step is to create content for tabs. You can create anything you want like a listview, listview builder or any other widgets that flutter support.

But for the sake of simplicity let’s create demo content for each tab. You can create content for tabs using flutter TabBarView() inside the body of the Scaffold. Use the below lines of code.

TabBarView(
            children: [
              Center(child: Text("This is tab bar A"),),
              Center(child: Text("This is tab bar B"),),
              Center(child: Text("This is tab bar C"),)
            ],
          ),

Here I have created a text widget for each tab bar inside the TabBar View.

Below is the complete code.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        initialIndex: 1,
        length: 3,
        child: Scaffold(
           appBar: AppBar(
             title: Text("Tab App"),
             flexibleSpace: Container(
               decoration: BoxDecoration (
                 gradient: LinearGradient(
                   colors: [Colors.orange,Colors.redAccent]

                 )
               ),
             ),
             bottom: TabBar(
               tabs: [
                 Tab(child: Text("Tab A"),),
                 Tab(child: Text("Tab B"),),
                 Tab(child: Text("Tab B"),),
               ],
             ),
           ),
          body: TabBarView(
            children: [
              Center(child: Text("This is tab bar A"),),
              Center(child: Text("This is tab bar B"),),
              Center(child: Text("This is tab bar C"),)
            ],
          ),
        ),
      ),
    );
  }
}

Output

Conclusion

Flutter TabBar Widget is a very useful widget. It allows the user to interact with the UI quickly. You can categorise navigation and other navigations using it. I hope you have liked this tutorial. If you have any queries then you can contact us for more help.