How to Create TabBar in Flutter Complete Guide To Make TabBar

Hello Guys How are you all ? Hope you all are fine. Today We are going to learn How to Create TabBar in Flutter Complete Guide To Make TabBar.

The TabBar can contain one or more tabs. Here is how an AppBar containing a TabBar with tabs look like. In Very Easy way we will create tabbar in our flutter app. so without wasting your time. lets start this article.

How to Create TabBar in Flutter ?

• First of all Import material.dart package in your app’s main.dart file.

import 'package:flutter/material.dart';

• Create Stateless widget and Define in runApp.

void main() => runApp(MyApp());

• Create new StateLess Widget named MyApp And Define Home like below.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

• Lets Move Forward to tabBar view in our Tutorial.
• Make StateFul Widget named MyHomePage with _HomePageState extends with SingleTickerProviderStateMixin to use its property. Same like below.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
}

• To create this complete Tab Bar we need to use 3 components

1. TabBar (or Tabs)
2. Controller Of TabBar
3. View Of TabBar

• First Of All Define Make Scaffold Class in our _HomePageState and in our Scaffold Lets Make Tab Bar view.
• in our appbar, we have Property like title, backgroundcolour, same as this property we have bottom property.
• bottom is our AppBar Bottom.
• in bottom, we will Use TabBar Class and TabBar has many properties but we are looking only for tabs, controller, indicator colour. as like below.

      appBar: AppBar(
        title: Text("Tab Bar Example - FlutterCorner"),
        backgroundColor: Colors.black,
        bottom: TabBar(
          unselectedLabelColor: Colors.white,
          labelColor: Colors.green,
          tabs: [
            Tab(
              child: Text("CALLS"),
            ),
            Tab(
              child: Text("CHATS"),
            ),
            Tab(
              child: Text("CONTACTS"),
            )
          ],
          controller: _tabController,
          indicatorColor: Colors.white,
          indicatorSize: TabBarIndicatorSize.tab,
        ),
        bottomOpacity: 1,
      ),

• After making of TabBar we can see like this in our App.

• Now, lets move to our functionality for tabbar.
• Just Define TabController like below.

  TabController _tabController;

• Then After initialize TabController in initState.

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

• length: 3 means we have 3 tab layout.
• After That, we have to make all TabBar body.
• So, we are going to use TabBarView in our body. TabBarView has children and controller property. that we use.

      body: TabBarView(
        children: [
          Center(child: Text("Call Tab Bar View")),
          Center(child: Text("Chats Tab Bar View")),
          Center(child: Text("Contacts Tab Bar View")),
        ],
        controller: _tabController,
      ),

• I am just Add center Text to make sure which tab it is. You can customize as you need.
• here is my full source code. for batter understanding.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Tab Bar Example - FlutterCorner",
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tab Bar Example - FlutterCorner"),
        backgroundColor: Colors.black,
        bottom: TabBar(
          unselectedLabelColor: Colors.white,
          labelColor: Colors.green,
          tabs: [
            Tab(
              child: Text("CALLS"),
            ),
            Tab(
              child: Text("CHATS"),
            ),
            Tab(
              child: Text("CONTACTS"),
            )
          ],
          controller: _tabController,
          indicatorColor: Colors.white,
          indicatorSize: TabBarIndicatorSize.tab,
        ),
        bottomOpacity: 1,
      ),
      body: TabBarView(
        children: [
          Center(child: Text("Call Tab Bar View")),
          Center(child: Text("Chats Tab Bar View")),
          Center(child: Text("Contacts Tab Bar View")),
        ],
        controller: _tabController,
      ),
    );
  }
}

Faq

Summery

So Guys That’s It For How to Create TabBar in Flutter Complete Guide To Make TabBar. Hope you like our tutorial. Comment below Your thoughts and your queries. And Also Comment below your suggestion here.

Also Check Out Below Tutorials

• How to Remove TextField Underline in Flutter?
• How to Generate SHA-1 for Flutter app? 3 Method Explained
• Also Read How to Create Popup in Flutter Popup Menu Example.
• How to change the appBar back button color in flutter
• How to Change StatusBar Color in Flutter?