GF Flutter TabBar

Banner image

GF Flutter Tab

GF Flutter Tab is a combination of the Tabbar and TabBarView controlled by the tab controller. Whereas GFTabBar contains tab buttons that navigate to a particular tabBarView page in GFTabBarView.

GF Flutter TabBar

The GFTabBar is a component that contains a set of tab buttons. A tab bar must be provided tabController to communicate with each tabBarView Component.

GF Flutter TabBar

TabController should be initialized, to communicate between Tabbar and Tabbarview.

late TabController tabController;

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

@override
void dispose() {
  tabController.dispose();
  super.dispose();
}

The below example code gives, default GFTabBar with 3 children, children can be any type of widget

import 'package:getwidget/getwidget.dart';

GFTabBar(
  length: 3,
  controller: tabController,
  tabs: [
    Tab(
      icon: Icon(Icons.directions_bike),
      child: Text(
        "Tab1",
       ),
    ),
    Tab(
      icon: Icon(Icons.directions_bus),
      child: Text(
        "Tab2",
      ),
    ),
    Tab(
      icon: Icon(Icons.directions_railway),
      child: Text(
        "Tab3",
      ),
    ),
  ],
),

Flutter Tab Bar Custom Properties

The look and feel of the GFTabBar can be customized using the GFTabBar properties.

NameDescription
lengthtotal number of tabs. Typically greater than one. Must match [TabBar.tabs]'s and [TabBarView.children]'s length
tabBarHeightsets [GFTabBar] height
tabBarColorsets [TabBar] color using GFColor or material color [Color]
tabstypically a list of two or more [Tab] widgets. The length of this list must match the [controller]'s [TabController.length] and the length of the [TabBarView.children] list
controllercontrols widget's selection and animation state. Must provide [TabController]
indicatorColorcolor of the line that appears below the selected tab. If this parameter is null, then the value of the Theme's indicatorColor property is used.
indicatorWeightthickness of the line that appears below the selected tab. The value of this parameter must be greater than zero and its default value is 2.0.
indicatorPaddinghorizontal padding for the line that appears below the selected tab.
indicatordefines the appearance of the selected tab indicator.
indicatorSizedefines how the selected tab indicator's size is computed.
labelColorcolor of selected tab labels.
unselectedLabelColorcolor of unselected tab labels.
labelStyletext style of the selected tab labels.
unselectedLabelStyletext style of the unselected tab labels.
labelPaddingpadding added to each of the tab labels.
shapedefines the shape of tabBar
isScrollableIf [isScrollable] is true, then each tab is as wide as needed for its label and the entire [TabBar] is scrollable. Otherwise each tab gets an equal share of the available space.

GF Flutter TabBar View

A page view that displays the widget which corresponds to the currently selected tab. This widget is typically used in conjunction with a GFTabBar and must provide TabBarController.

The tab controller's __TabController.length must equal the length of the children list and the length of the TabBar.tabs list.

import 'package:getwidget/getwidget.dart';

GFTabBarView(
  controller: tabController,
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue)
  ]
),

Look and feel of the GFTabBarVIew can be customized using the GFTabBarView properties.

Flutter TabBar Custom Properties

NameDescription
controllercontrols widget's selection and animation state. Must provide [TabController]
childrenone widget per tab. Its length must match the length of the [GFTabBar.tabs] list, as well as the [controller]'s [TabController.length].
heightGFTabBarView height can be fixed

GF Flutter Tab with TabBarView

GFTabs component is the combination of GFTabBar with GFTabBarView with default controller to controls page view that displays the widget which corresponds to the currently selected tab.

import 'package:getwidget/getwidget.dart';

GFTabs(
  length: 3,
  tabs: <Widget>[
    Tab(
      icon: Icon(Icons.directions_bike),
      child: Text(
        "Tab1",
      ),
     ),
     Tab(
       icon: Icon(Icons.directions_bus),
       child: Text(
         "Tab2",
       ),
      ),
      Tab(
        icon: Icon(Icons.directions_railway),
        child: Text(
          "Tab3",
        ),
      ),
   ],
   tabBarView: GFTabBarView(
     children: <Widget>[
       Container(child: Icon(Icons.directions_bike), color: Colors.red,),
       Container(child: Icon(Icons.directions_bus), color: Colors.blue,),
       Container(child: Icon(Icons.directions_railway), color: Colors.orange,),
     ],
    ),
),

Look and feel of the GFTabs can be customized using the GFTabs properties.

Flutter GFTab Custom Properties

NameDescription
lengthtotal number of tabs. Typically greater than one. Must match [TabBar.tabs]'s and [TabBarView.children]'s length
tabBarColorsets [TabBar] color using GFColor or material color [Color]
tabstypically a list of two or more [Tab] widgets. The length of this list must match the [controller]'s [TabController.length] and the length of the [TabBarView.children] list
controllercontrols widget's selection and animation state. Must provide [TabController]
indicatorColorcolor of the line that appears below the selected tab. If this parameter is null, then the value of the Theme's indicatorColor property is used.
indicatorWeightthickness of the line that appears below the selected tab. The value of this parameter must be greater than zero and its default value is 2.0.
indicatorPaddinghorizontal padding for the line that appears below the selected tab.
indicatordefines the appearance of the selected tab indicator.
indicatorSizedefines how the selected tab indicator's size is computed.
labelColorcolor of selected tab labels.
unselectedLabelColorcolor of unselected tab labels.
labelStyletext style of the selected tab labels.
unselectedLabelStyletext style of the unselected tab labels.
labelPaddingpadding added to each of the tab labels.
tabBarViewone widget per tab. LIst of widgets given to TabBarView. The length of this list must match the [controller]'s [TabController.length] and the length of the [TabBarView.children] list.
tabBarHeightdefines the tabBar height
heightdefines the complete GFTabs height includes tabBar and tabBarView.
shapedefines the shape of tabBar

GF Flutter Segment Tabs

GFSegmentTabs is best used as an alternative for tabs. It looks like pills shaped button tab bar with all features of GFTabBar.

This component is typically used in conjunction with a GFTabBarView and must provide TabBarController to control A page view that displays the widget which corresponds to the currently selected tab.

import 'package:getwidget/getwidget.dart';

GFSegmentTabs(
  tabController: tabController,
  length: 3,
  tabs: <Widget>[
    Text(
       "Tab1",
    ),
    Text(
       "Tab2",
    ),
    Text(
       "Tab3",
    ),
   ],
),

Look and feel of the GFSEgmentTabs can be customized using the GFSegmentTabs properties.

Flutter Segment Tabs Custom Properties

NameDescription
lengthtotal number of tabs. Typically greater than one. Must match [TabBar.tabs]'s and [TabBarView.children]'s length
heightsets [GFSegmentTabs] height
tabBarColorsets [TabBar] color using GFColor or material color [Color]
tabstypically a list of two or more [Tab] widgets. The length of this list must match the [controller]'s [TabController.length] and the length of the [TabBarView.children] list
controllercontrols widget's selection and animation state. Must provide [TabController]
indicatorColorcolor of the line that appears below the selected tab. If this parameter is null, then the value of the Theme's indicatorColor property is used.
indicatorWeightthickness of the line that appears below the selected tab. The value of this parameter must be greater than zero and its default value is 2.0.
indicatorPaddinghorizontal padding for the line that appears below the selected tab.
indicatordefines the appearance of the selected tab indicator.
indicatorSizedefines how the selected tab indicator's size is computed.
labelColorcolor of selected tab labels.
unselectedLabelColorcolor of unselected tab labels.
labelStyletext style of the selected tab labels.
unselectedLabelStyletext style of the unselected tab labels.
labelPaddingpadding added to each of the tab labels.
borderdefines outer border of the tabs
borderRadiusdefines outer border, border radius
widthdefines width of the tab row

GF Flutter Bottom Navigation TabBar

GFTabBar can be used as a bottom navigation bar.

The basic example code for a bottom flutter tab bar is given below.

import 'package:getwidget/getwidget.dart';

Scaffold(
      appBar: GFAppBar(
        title: const Text('UI Kit'),
      ),
      body: GFTabBarView(controller: tabController, children: <Widget>[
        Container(color: Colors.red),
        Container(color: Colors.green),
        Container(color: Colors.blue)
      ]),
      bottomNavigationBar: GFTabBar(
       length: 3,
        controller: tabController,
        tabs: [
          Tab(
            icon: Icon(Icons.directions_bike),
            child: const Text(
              'Tab1',
            ),
          ),
          Tab(
            icon: Icon(Icons.directions_bus),
            child: const Text(
              'Tab2',
            ),
          ),
          Tab(
            icon: Icon(Icons.directions_railway),
            child: const Text(
              'Tab3',
            ),
          ),
        ],
      ),
    )

Last Updated: February 4, 2022