Flutter- How to use Tab widget

In this tutorial, We are going to learn how the tab bar works in Flutter. The tabs are mainly used for mobile navigationIf your want to display some content, it's quite common to separate the contents into multiple tabs. We can make a Tab view using Tabar and Tab widgets. Let's understand by example.

How to Add Tab Bar widget in Flutter:

In flutter, we can't directly use the tab bar we need to wrap the widget tree with DefaultTabController().

Syntax:

  const DefaultTabController({
    super.key,
    required this.length,
    this.initialIndex = 0,
    required this.child,
    this.animationDuration,
  })

 

Example :

DefaultTabController( 
  initialIndex: 0,  // first tab selected by default
  length:3,  // No of tabs
  child:Scaffold(
     
  )
)

 

Then add, TabBar() with tabs where you want to display the Tabs. Here, we are showing below the AppBar example like the following.

AppBar(
  bottom: TabBar(
    tabs: [
        Tab(text: "CHATS",),
        Tab(text: "STATUS",),
        Tab(text: "CALLS",)
    ]
  )
)

 

Now we are going to use TabBarView in the body of  Scaffold which will show the full content of the tab same as whats app.

Example :

TabBarView(children: [
              Container(
                color: Colors.greenAccent,
                child: Center(child: Text("Errorgram")),
              ),
              Container(
                color: Colors.yellow,
                child: Center(child: Text("Errorgram")),
              ),
              Container(
                color: Colors.orange,
                child: Center(child: Text("Errorgram")),
              )
            ])

 

Full example : 

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        initialIndex: 1,
        length: 3,
        child: Scaffold(
            appBar: AppBar(
              title: Text("Errorgram"),
              backgroundColor: Colors.red,
              bottom: TabBar(tabs: [
                Tab(
                  text: "CHATS",
                ),
                Tab(
                  text: "STATUS",
                ),
                Tab(
                  text: "CALLS",
                )
              ]),
            ),
            body: TabBarView(children: [
              Container(
                color: Colors.greenAccent,
                child: Center(child: Text("Errorgram")),
              ),
              Container(
                color: Colors.yellow,
                child: Center(child: Text("Errorgram")),
              ),
              Container(
                color: Colors.orange,
                child: Center(child: Text("Errorgram")),
              )
            ])));
  }
}

I hope it can help you...

 

 

 

Tags: