How to Create TabBar in Flutter Complete Guide To Make TabBar - fluttercorner.com

Full Article With Source Code At Here 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 Complete Guide To Make TabBar
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
TabBar (or Tabs)
Controller Of TabBar
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.
How to Create TabBar in Flutter Complete Guide To Make TabBar
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.

Full Article With Source Code At Here How to Create TabBar in Flutter Complete Guide To Make TabBar