close

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
  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.
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.
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

  1. How to Create TabBar in Flutter ?

    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 tab.

  2. How to create a tab bar at center of the screen in flutter?

    To put the TabBar at the center of the screen, your Profile Container's height should be the screen height divided by 2

  3. How to make Flutter TabBar Without AppBar ?

    Just use the flexiblespace prop and not the bottom prop of the appBar. All in the safeArea widget and you can add some vertical padding.

  4. How to make a custom TabBar ?

    You can use the TabBar widget to achieve this. I added a full example demonstrating how you can create this using the TabBar widget:

  5. How to Change the current tab in tab bar view using a button in Flutter ?

    just add this line to your onPressed of your button and make sure to change the index number to your preferred index: DefaultTabController.of(context).animateTo(1);

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

Leave a Comment

%d bloggers like this: