TabBar Widget – Flutter Widget Guide By Flutter Agency

TabBar Widget – Flutter Widget Guide By Flutter Agency

What is TabBar Widget?

TabBar Widget is nothing but a horizontal row of tabs and displays a widget that corresponds to the currently selected tab. To display a horizontal row of tabs, we can use the TabBar Widget.

To display a widget that corresponds to the currently selected tab, we can use the TabBarView page view. When we use the TabBar Widget and TabBarView, we should use a TabController to handle various aspects of a tab.

In this tutorial, we will use DefaultTabController, which makes our job. You can also use a custom TabController, but that requires additional inputs.

TabBar Widget

In Mobile Screen above Red Line represent TabBar while Greenline represents Tab and Greyline represents TabBar View.

Code Snippet for Tab will look like below :

        tabs: [
          Tab(icon: Icon(Icons.android), text: "Tab 1",),
          Tab(icon: Icon(Icons.phone_iphone), text: "Tab 2"),
        ],

TabBar will represent a list of all tabs to include. Code Snippet will look like below.

TabBar(
            tabs: [
              Tab(icon: Icon(Icons.android), text: "Tab 1",),
              Tab(icon: Icon(Icons.phone_iphone), text: "Tab 2"),
            ],
          ),

TabBarView: This is will represent the body part of the tab. All change operation will be performed here.

TabBarView(
            children: [
              Icon(
                Icons.local_movies,
              ),
              Icon(
                Icons.face,
              ),
              Icon(
                Icons.favorite,
              ),
            ],
          ),

The complete Source Code will be like below :

import 'package:flutter/material.dart';

class TabBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(
                  icon: Icon(Icons.local_movies),
                  text: 'Tab 1',
                ),
                Tab(
                  icon: Icon(Icons.face),
                  text: 'Tab 2',
                ),
                Tab(
                  icon: Icon(Icons.favorite),
                  text: 'Tab 3',
                ),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(
                Icons.local_movies,
              ),
              Icon(
                Icons.face,
              ),
              Icon(
                Icons.favorite,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Which will generate output like below :

Tab Bar Example

Thanks for reading !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.