Creating a complete TabBar in flutter

Hey, guys, this is my first article on flutter. So if you love the article then please give a thumb up!

So before starting let me tell you what we are going to design

So to create this complete Tab Bar we need to use 3 components

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

Material App SubTree in flutter

So now let’s get started with

1st Step : TabBar (or Tabs)

In order to create tabs we need a Scaffold and inside that we need to have bottom attribute

bottom: TabBar(
  unselectedLabelColor: Colors.white,
  labelColor: Colors.amber,
  tabs: [
  new Tab(icon: new Icon(Icons.call)),
  new Tab(
    icon: new Icon(Icons.chat),
  ),
  new Tab(
    icon: new Icon(Icons.notifications),
  )
],

2nd Step : Creating a TabBar Controller

TabBar Controller will control the movement between the Tabs that we created.

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin
{

  TabController _tabController;

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

Now attach the above create a controller to that Tabs we created in the bottom attribute of Scaffold in the following way :

bottom: TabBar(
  unselectedLabelColor: Colors.white,
  labelColor: Colors.amber,
  tabs: [
  new Tab(icon: new Icon(Icons.call)),
  new Tab(
    icon: new Icon(Icons.chat),
  ),
  new Tab(
    icon: new Icon(Icons.notifications),
  )
],  
controller: _tabController,       // Here is the new code added to
                                  // attach the tabController

3rd Step : Creating a TabView

What TabView will do is that when we are on Call Tab then a new View will be shown to us taking eg. of all users we called as shown in Whatsapp and similarly for the other two tabs a new View is shown.

So to create a TabView we need to add body attribute to the scaffold as follow :

body: TabBarView(
    children: [
  new Text("This is call Tab View"),
  new Text("This is chat Tab View"),
  new Text("This is notification Tab View"),
],
controller: _tabController,
),

As in the above code, the TabBarView will have 2 attributes that we need to add :

children → here we need to add all the views that we want to show for all the three-tab. NOTE: there should be exactly the same number of View as there are tabs we create (in this eg. we have 3 tabs so we have 3 views).

controller → here also we need to attach the same controller we attached to the TabBar in step1. Keep in mind the controller should be the same in both step1 and step3.

The final code is given below, there are some changes too in the below code but they are not a necessary thing that we needed to write, they are just to make the design more attractive.

import 'package:flutter/material.dart';

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

class StartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "New Task",
      debugShowCheckedModeBanner: false,
      home: new HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{

  TabController _tabController;

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("GrubX"),
        bottom: TabBar(
          unselectedLabelColor: Colors.white,
          labelColor: Colors.amber,
          tabs: [
          new Tab(icon: new Icon(Icons.call)),
          new Tab(
            icon: new Icon(Icons.chat),
          ),
          new Tab(
            icon: new Icon(Icons.notifications),
          )
        ],
        controller: _tabController,
        indicatorColor: Colors.white,
        indicatorSize: TabBarIndicatorSize.tab,),
        bottomOpacity: 1,
      ),
      body: TabBarView(
          children: [
        new Text("This is call Tab View"),
        new Text("This is chat Tab View"),
        new Text("This is notification Tab View"),
      ],
      controller: _tabController,),
    );
  }
}

That’s all about creating TabBar in Flutter, in the upcoming posts I will be writing more articles on flutter.

Please do like the article if you loved reading it and comment if you stuck somewhere or found it difficult reading and writing the above code.!Cheers.

Thanks for Reading…!!!