#1 TabBar (Flutter Famous Widgets’ Guide)

Hey everyone! In this article, I’ll be starting my new series of Flutter Famous Widgets’ Guide. This is going to be a series of Flutter’s most famous widgets and I’ll be making a guide on how to use them.

TabBar

Yes, we will be focusing on the widget TabBar. It’s a really famous widget and today I‘ll walk you through it.

What is it?

It is very simply a material design widget that displays a horizontal row of tabs. It basically makes navigation a lot simpler in your app and hence, you would have seen this in many apps.

How To Make It?

1. Create a new Flutter project in your IDE (Any would work but I’m using Android Studio).
2. Open the main.dart file. Make a new stful widget. Name it TabBarDemo.

We need a DefaultTabController for the functioning of the TabBar. It is necessary to wrap the Scaffold with this.

DefaultTabController

1. You can add many Tabs, but we are only making 3 for now. Place the int 3 as the property of the DefaultTabController, length.
2. Return Scaffold as the child of the DefaultTabController.
3. Place the AppBaras the appBarproperty of the Scaffold.
4. Place the TabBarwidget as the bottom property.
5. The TabBar has a propert of tabs in which you can add the tabs you want for navigation. We usually use the Tab widget for that. Add the tabs of your wish.

The Tab widget has a property of icon in which you can the icon of your wish. It also has the child property in which you can add some text.

6. Provide TabBarViewwidget as the bodyof the Scaffold.

7. Add the widgets you want to show when the TabBaris used. You can multiple widgets because the TabBarViewhas a childrenproperty.

TabBarViewis like PageView, which is used mostly with TabBarbecause it shows the widget based on the selected tab.

Complete Code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: TabBarDemo());
  }
}

class TabBarDemo extends StatefulWidget {
  const TabBarDemo({Key key}) : super(key: key);

  @override
  _TabBarDemoState createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo> {
  TabController tabController;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(
                icon: Icon(
                  Icons.done,
                  color: Colors.green,
                ),
                child: Text('First Tab'),
              ),
              Tab(
                icon: Icon(
                  Icons.create,
                  color: Colors.yellow,
                ),
                child: Text('Second Tab'),
              ),
              Tab(
                  icon: Icon(
                    Icons.cancel,
                    color: Colors.red,
                  ),
                  child: Text('Third Tab')),
            ],
          ),
          title: Text('Tabs Demo'),
        ),
        body: TabBarView(
          children: [
            Icon(
              Icons.done,
              size: 350,
              color: Colors.green,
            ),
            Icon(
              Icons.edit,
              size: 350,
              color: Colors.yellow,
            ),
            Icon(
              Icons.cancel,
              size: 350,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

We are done🏁. Hope you enjoyed making this TabBar with me.

Make sure to hit the claps👏if you liked this article. If I got something wrong, mention it in the comments.

Buy me a coffee☕ to show me your support.

Reach me out at LinkedIn, GitHub and Twitter.