Skip to content

gf-tab.md

Latest commit

 

History

History
281 lines (236 loc) · 18.3 KB

gf-tab.md

File metadata and controls

281 lines (236 loc) · 18.3 KB
description GF Flutter TabBar is a TabBarView that consists of a pageview that displays the currently selected tab.

GF Flutter TabBar

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.

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.

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',
            ),
          ),
        ],
      ),
    )