Integrating Tab bar Flutter Component

May 15, 2020October 20, 2021 Dhrumil Shah 2 Comments flutter custom tabbar, navigation, tab bar, tab bar flutter, tab bar in mobile, tab view flutter, tabbar, tabbarview flutter, tabcontroller flutter, tabs bar

Tab bar Flutter is used to display horizontal tabs in mobile apps. You can display tab bar flutter at top of the screen (below the navigationbar) or bottom of the screen. You can also check out github sample..

In android, Tabbar is displayed mostly at the top and for iOS, it is mostly displayed at bottom. Title and icon are attached with tab. Using this article, You can learn to create tabbar in flutter application.

There are main three components used to create flutter tabbar: Tabs, TabBar Controller, TabBar View.

Create Tabs

We need to use scaffold widget to create tabs. Scaffold widget has bottom attribute. We have to pass TabBar widget to this attribute.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Tabbar Sample"),
        bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.call)),
            Tab(icon: Icon(Icons.chat)),
            Tab(icon: Icon(Icons.notifications))
          ],
        ),
      ),
    );
  }
}

Create Tabbar Controller

Tabbar controller is used to control movement between already created tabs. length parameter of tabbar controller asks total number of tabs we created.

class _MyHomePageState extends State<MyHomePage> 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("Flutter Tabbar Sample"),
        bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.call)),
            Tab(icon: Icon(Icons.chat)),
            Tab(icon: Icon(Icons.notifications))
          ],
          controller: tabController,
        ),
      ),
    );
  }
}

Create Tab bar flutter View With Custom Text Widget

We need to add TabBarView widget to body attribute in scaffold widget. TabBarView widget has two attributes: children and controller.

For children attribute, We need to add array of all views which we will be shown for all tabs. If we created three tabs then we should add three views to children array. Number of views and number of tabs should be same.

Now We attach already created tabbar controller to controller parameter in TabBarView widget. You can also create custom widget if you want to reuse same widget multiple times like i created MyText widget.

class MyText extends StatelessWidget{

  String text;

  MyText(this.text);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(text,style:TextStyle(fontSize: 25,fontWeight: FontWeight.bold)),
    );
  }

}

body: TabBarView(
        children: <Widget>[
          MyText("Call"),
          MyText("Chat"),
          MyText("Notifications"),
        ],
        controller: tabController,
      )

Make Tab bar flutter Design Changes

We can also customize tabbar design using some parameters like: unselectedLabelColor, labelColor, indicatorColor and indicatorSize.

If we want to change text color of tab then we should use labelColor for selected tab and unselectedLabelColor for unselected tabs.

indicatorColor is used to change color of indicator which identifies selected tab among all tabs. We can also change its size using indicatorSize parameter.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Tabbar Sample"),
        bottom: TabBar(
          unselectedLabelColor: Colors.white,
          labelColor: Colors.red,
          tabs: [
            Tab(icon: Icon(Icons.call)),
            Tab(icon: Icon(Icons.chat)),
            Tab(icon: Icon(Icons.notifications))
          ],
          controller: tabController,
          indicatorColor: Colors.red,
          indicatorSize: TabBarIndicatorSize.tab,
        ),
      ),
      body: TabBarView(
        children: <Widget>[
          MyText("Call"),
          MyText("Chat"),
          MyText("Notifications"),
        ],
        controller: tabController,
      )
    );
  }
}

Integrate in main.dart file

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> 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("Flutter Tabbar Sample"),
        bottom: TabBar(
          unselectedLabelColor: Colors.white,
          labelColor: Colors.red,
          tabs: [
            Tab(icon: Icon(Icons.call)),
            Tab(icon: Icon(Icons.chat)),
            Tab(icon: Icon(Icons.notifications))
          ],
          controller: tabController,
          indicatorColor: Colors.red,
          indicatorSize: TabBarIndicatorSize.tab,
        ),
      ),
      body: TabBarView(
        children: <Widget>[
          MyText("Call"),
          MyText("Chat"),
          MyText("Notifications"),
        ],
        controller: tabController,
      )
    );
  }
}

class MyText extends StatelessWidget{

  String text;

  MyText(this.text);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(text,style:TextStyle(fontSize: 25,fontWeight: FontWeight.bold)),
    );
  }

}