GF Flutter TabBar

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.

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.

Name	Description
length	total number of tabs. Typically greater than one. Must match [TabBar.tabs]'s and [TabBarView.children]'s length
tabBarHeight	sets [GFTabBar] height
tabBarColor	sets [TabBar] color using GFColor or material color [Color]
tabs	typically 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
controller	controls widget's selection and animation state. Must provide [TabController]
indicatorColor	color 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.
indicatorWeight	thickness 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.
indicatorPadding	horizontal padding for the line that appears below the selected tab.
indicator	defines the appearance of the selected tab indicator.
indicatorSize	defines how the selected tab indicator's size is computed.
labelColor	color of selected tab labels.
unselectedLabelColor	color of unselected tab labels.
labelStyle	text style of the selected tab labels.
unselectedLabelStyle	text style of the unselected tab labels.
labelPadding	padding added to each of the tab labels.
shape	defines the shape of tabBar
isScrollable	If [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

Name	Description
controller	controls widget's selection and animation state. Must provide [TabController]
children	one widget per tab. Its length must match the length of the [GFTabBar.tabs] list, as well as the [controller]'s [TabController.length].
height	GFTabBarView 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

Name	Description
length	total number of tabs. Typically greater than one. Must match [TabBar.tabs]'s and [TabBarView.children]'s length
tabBarColor	sets [TabBar] color using GFColor or material color [Color]
tabs	typically 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
controller	controls widget's selection and animation state. Must provide [TabController]
indicatorColor	color 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.
indicatorWeight	thickness 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.
indicatorPadding	horizontal padding for the line that appears below the selected tab.
indicator	defines the appearance of the selected tab indicator.
indicatorSize	defines how the selected tab indicator's size is computed.
labelColor	color of selected tab labels.
unselectedLabelColor	color of unselected tab labels.
labelStyle	text style of the selected tab labels.
unselectedLabelStyle	text style of the unselected tab labels.
labelPadding	padding added to each of the tab labels.
tabBarView	one 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.
tabBarHeight	defines the tabBar height
height	defines the complete GFTabs height includes tabBar and tabBarView.
shape	defines 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

Name	Description
length	total number of tabs. Typically greater than one. Must match [TabBar.tabs]'s and [TabBarView.children]'s length
height	sets [GFSegmentTabs] height
tabBarColor	sets [TabBar] color using GFColor or material color [Color]
tabs	typically 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
controller	controls widget's selection and animation state. Must provide [TabController]
indicatorColor	color 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.
indicatorWeight	thickness 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.
indicatorPadding	horizontal padding for the line that appears below the selected tab.
indicator	defines the appearance of the selected tab indicator.
indicatorSize	defines how the selected tab indicator's size is computed.
labelColor	color of selected tab labels.
unselectedLabelColor	color of unselected tab labels.
labelStyle	text style of the selected tab labels.
unselectedLabelStyle	text style of the unselected tab labels.
labelPadding	padding added to each of the tab labels.
border	defines outer border of the tabs
borderRadius	defines outer border, border radius
width	defines 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: September 26, 2023

Elevated Button

Pills Button

Square Button

Icon Button

Social Button

GF Flutter TabBar

GF Flutter Tab

GF Flutter TabBar

Flutter Tab Bar Custom Properties

GF Flutter TabBar View

Flutter TabBar Custom Properties

GF Flutter Tab with TabBarView

Flutter GFTab Custom Properties

GF Flutter Segment Tabs

Flutter Segment Tabs Custom Properties

GF Flutter Bottom Navigation TabBar

GF Tile

GF Floating Widget