Flutter Tabbar - A widget that navigates through different pages

Flutter Tabbar Widget
Flutter Tabbar Widget 

Flutter TabBar is a TabBarView that consists of a page view that displays the currently selected tab.‌‌‌‌ It has many custom properties by using which we can create different tab patterns.

‌Flutter Tab Widget

Flutter Tab widget is used to navigate to different pages in a single page view. The Flutter Tabbar typically displays a horizontal list of tabs. The tabs can be of any number. It shows the selected page to make the UI more interactive to users.

Flutter Tabs are used to navigate different pages by using its routing. To create tabs we mostly follow the material designs so it includes tabs layout as a part of the material library. In Flutter, we can define tabs of widgets inside the scaffold. Therefore before adding a tab of a widget we need to define a Scaffold.

GF Flutter Tabbar

GF Flutter Tab is a combination of the Tabbar and TabBarView controlled by the tab controller. GFTab is a Flutter Tab that has a horizontal list of pages that are navigated through the Tabbar. The Tabbar will contain the tab that can be icon, text, or a combination of icons, and text upon clicking takes to the respective pages.  

‌Now here is I am going to talk about what is GetWidget Tab widget is and how we implement this on the Flutter app to build an awesome Flutter Tab widget for an app.

GF Flutter TabBar
GF Flutter TabBar is a TabBarView that consists of a pageview that displays the currently selected tab.

So, are you ready to make use of this type of Tab widget in your application? If so, then let's quickly jump into the usage and the ways a Tab can be modified and used to make user-friendly apps. Here I am going to use an open-source UI Library known as GetWidget to build this widget.

How to Start:

Now here is the guide about how we should start developing the GFTabs Widget with the use of the GetWidget Flutter UI Library.

Getting started will guide you on how to start building a beautiful flutter application with the GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^ 2.0.4

Keep playing with the pre-built UI components.

GF Flutter TabBar Example

GFTab is a combined feature of the Tabbar and TabBarView that is controlled by the tab controller. Whereas GFTabBar contains tab buttons that navigate to a particular tabBarView page in GFTabBarView.

The Tabs are designed by using the tabbar widget. A tabbar must be assigned a tabController to communicate with tab bar view widget.  

The example shown below tells how to initialize a tabController in Flutter

late TabController tabController;

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

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

We can use the below code to build the Flutter TabBar Widget with many custom properties.‌‌‌

The below code gives, default GFTabBar with 2 children, children can be any type of widget.

import 'package:getwidget/getwidget.dart';

GFTabBar(
  length: 2,
  controller: tabController,
  tabs: [
    Tab(
      icon: Icon(Icons.home),
      child: Text(
        "Home",
       ),
    ),
    Tab(
      icon: Icon(Icons.access_time_sharp),
      child: Text(
        "History",
      ),
    ),
     ],
),
Flutter Tabbar with ICON Child

GF Flutter TabBarView

A page view that displays the content by a selection of the corresponding tab is known as TabBarView. This widget is typically used in conjunction with a GFTabBar and must provide TabBarController. When a tab is selected, it shows some content. We can create tabs by using the TabBar widget. The length of the tab controller must be equal to the children of the tab.

The below Example code shows how a flutter tab bar view is initialized:

import 'package:getwidget/getwidget.dart';
 
GFTabBarView(
  controller: tabController,
  children: <Widget>[
    Container(color: Colors.red,child:Center(child:Text('Home Page'))),
    Container(color: Colors.green,child:Center(child:Text('History Page'))),
    Container(color: Colors.blue,child:Center(child:Text('Profile Page')))
  ]
),
Flutter Tabbar view

GF Flutter Tabs Example Code

GFTabs widget is the combination of GFTabBar and GFTabBarView. It has a default controller to control the page view which response to the currently selected tab. we can use the below code to build the Flutter Tabs Widget.‌‌‌

import 'package:getwidget/getwidget.dart';
 
GFTabs(
  length: 2,
  tabs: <Widget>[
    Tab(
      icon: Icon(Icons.home),
      child: Text(
        "Home",
      ),
     ),
     Tab(
       icon: Icon(Icons.account_circle),
       child: Text(
         "Profile",
       ),
      ),
   ],
   tabBarView: GFTabBarView(
     children: <Widget>[
       Container(child: Icon(Icons.home), color: Colors.red,),
       Container(child: Icon(Icons.account_circle), color: Colors.green,),
     ],
    ),
),
Flutter Tab widget with GFTAB

GF Flutter Segmented Tabs

Tabs organize and allow routing between groups of components that are co-related and are at the same level of hierarchy.‌‌‌ Segmented tabs are the linear set of tabs that are mostly used to display different views. GFSegmentedTabs is the best alternative to tabs. we can use the given code to display segmented tabs.


Flutter Bottom Navigation Bar with GFTabBar

GFTabBar can be used as a bottom navigation bar. The basic code 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: 2,
        controller: tabController,
        tabs: [
                    Tab(
            icon: Icon(Icons.directions_bus),
            child: const Text(
              'Tab2',
            ),
          ),
          Tab(
            icon: Icon(Icons.directions_railway),
            child: const Text(
              'Tab3',
            ),
          ),
        ],
      ),
    )
Flutter Bottom Navigation bar

GF Flutter TabBar 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 TabBarView 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

How to create a Tab in Flutter?

Tabs in Flutter is a horizontal list of items upon clicking them will render respective pages that are coordinated with the tabs. The Tabs can be icons or texts that represent the names of the pages to be rendered. We can either click on the tab icons or the scrolling will also yield the same as clicking the icon ie, it gives the respective page. The Tabs function in such a way that the rendered pages will be only in one single page and just the view of the pages changes accordingly.

First of all, we will see how to set up the tabs code in the GFTabs component that will be used to render the pages upon clicking.

import 'package:getwidget/getwidget.dart';

GFTabBar(
  length: 2,
  controller: tabController,
  tabs: [
    Tab(
      icon: Icon(Icons.directions_bike),
      child: Text(
        "Tab1",
       ),
    ),
    Tab(
      icon: Icon(Icons.directions_bus),
      child: Text(
        "Tab2",
      ),
    ),
    
  ],
),
Create Flutter Simple Tab with GFTabs

The above code gives two tabs in length and we have the tab controller in the tab code. The tab controller is used to control the functions between the tab and its contents. So in the next step, we will initialize the tab controller.

late TabController tabController;

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

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

So, the above code tells us that the tab controller has been initialized to use the tabs. Next, we should have the pages to display upon clicking the tab icons, this is called the TabBar View, now we need to show the code for the tab bar view so that when the tabs are clicked the respective pages will show up.

In the below code we will see the TabBarView of the tabs:


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

now we have all the bits and pieces of the tabs, tab controller, and its view, we have to put that together to build a simple appbar using GFAppBar component.

Let us see the full example in the below code.

late TabController? tabController;

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

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

body:ListView(
          children: <Widget>[
            GFTabBar(
              length: 3,
              controller: tabController,
              tabs: [
                Icon(
                  Icons.home,
                ),
                Icon(
                  Icons.music_note,
                ),
                Icon(
                  Icons.games,
                ),
                
              ],
              
            ),
            Container(
              height: MediaQuery.of(context).size.height
              child: GFTabBarView(
                controller: tabController,
                children: <Widget>[
                  Center(
                    child: Icon(
                      Icons.home,
                      size: 150,
                      color: Colors.grey.withOpacity(0.44),
                    ),
                  ),
                  Center(
                    child: Icon(
                      Icons.music_note,
                      size: 150,
                      color: Colors.grey.withOpacity(0.44),
                    ),
                  ),
                  Center(
                    child: Icon(
                      Icons.games,
                      size: 150,
                      color: Colors.grey.withOpacity(0.44),
                    ),
                  ),
                  
                ],
              ),
            )
          ],
        ),

How to create a Custom TabBar in Flutter

GFTabs has more variants in it for the tabs like only icon tab, text tab, or a combination of both icon and text tabs. The tabs can be customized according to the need. The only icon tab should have a proper and reasonable icon so that the user will understand for what page the user is been navigating. The text icon will simply be the name of the page so the user will understand by just seeing the name of the tab.

GF Flutter TabBar
GF Flutter TabBar is a TabBarView that consists of a pageview that displays the currently selected tab.

We can customize the above tab bar with many options and to view those properties visit GetWidget official documentation.

How to create Flutter Bottom TabBar?

GFTabs can be used as Bottom Tabs with the same functionality that will be used for the default GFTabs. The difference is that the tabs will be placed at the bottom of the screen. We have Segmented Tabs in GFTabs wherein the tabs will be placed at the top with acts like a segment for every tab we declare and the customization option is vast.

GFTabs can be used as the bottom tab bar as said earlier. It is a simple tab that will be placed at the bottom of the screen with the same functions and the customization of the default tabs.

The below code shows the example of bottom tabs.

import 'package:getwidget/getwidget.dart';

Scaffold(
      appBar: GFAppBar(
        title: const Text('Bottom Tabs'),
      ),
      body: GFTabBarView(controller: tabController, children: <Widget>[
        Container(color: Colors.orange),
        Container(color: Colors.blue),
        Container(color: Colors.black)
      ]),
      bottomNavigationBar: GFTabBar(
       length: 3,
        controller: tabController,
        tabs: [
          Tab(
            icon: Icon(Icons.help),
            child: const Text(
              'HELP',
            ),
          ),
          Tab(
            icon: Icon(Icons.settings),
            child: const Text(
              'SETTINGS',
            ),
          ),
          Tab(
            icon: Icon(Icons.home),
            child: const Text(
              'HOME',
            ),
          ),
        ],
      ),
    )

The GFTabs and the bottom tabs have many customization options that can be useful according to the need of the application and design. For more properties on the Tabs head to GetWidget official documentation.

getwidget | Flutter Package
GetWidget is open source library that come with pre-build 1000+ UI components. It makes development faster & more enjoyable. You can customize the component as per your need.
Buy Flutter Apps, Themes, Templates and Plugin Source Code
Search From our Templates Why Buy From Us? Subscribe To Get Discounts, Updates & More

What is the use of a controller here?

GFTabBar and GFTabBarView don't have any conjunction between them. To co-relate them, we are using a TabController here to manage the controls.

Are there any specified child components to use in it?

No, there isn't any specification of child components that we use here. We can use all components in tabs.‌

What if the no. of Tabs and TabBarView would be the same?

The no. of tabs and its view should be the same because the widget displays the view corresponds to its tabs. If it won't be the same then it will throw errors.

Conclusion:

Here we discuss what GFTabs is? And how we can use it in our Flutter app through GetWidget TabBar, Tabs, TabBarView & SegmentedTabs components.

GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app. - GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ W...