How to make tab bar view in flutter

We use TabBarView widget to display the Widget which corresponds to the currently selected tab. It basically follows the principle of PageView and this widget is typically used in conjunction with a TabBar.

In our previous section we’ve learned how to use various toolbars in an AppBar, so that we can navigate to other pages.

However, we’ve not taken any concrete steps to make it happen. In this section, we’ll learn how we can do that.

In the last section, we’ve build an AppBar like the following screenshot.

Although we’ve successfully designed the above AppBar, we couldn’t move to any other pages, except the home page. By default, it opens up.

Now, we want to navigate to other pages shown in the tabs, such as Log in, Accounts, or Settings.

Firstly, we’ve wrapped our main Dash Board Home page with a DefaultTabController.

It is customary that if a TabController is not provided, then there must be a DefaultTabController ancestor.

Why so?

Because the tab controller’s TabController.length must equal the length of the children list of the Widgets. Moreover, it should also match the length of the TabBar.tabs list that houses the pages.

Let us see the code, so that we can understand this feature in a better way.

import 'package:flutter/material.dart';
import '/model/all_tab_bars.dart';
import '/model/shaping_painter.dart';

import 'all_containers.dart';
import 'all_pages.dart';

class DashBoardHome extends StatelessWidget {
  const DashBoardHome({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          //backgroundColor: Colors.grey[400],
          flexibleSpace: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Colors.pink,
                  Colors.grey,
                ],
                begin: Alignment.topRight,
                end: Alignment.bottomRight,
              ),
            ),
          ),
          elevation: 20,
          titleSpacing: 80,
          leading: const Icon(Icons.menu),
          title: const Text(
            'Let\'s Go!',
            textAlign: TextAlign.center,
          ),
          actions: [
            buildIcons(
              const Icon(Icons.ac_unit),
            ),
            buildIcons(
              const Icon(
                Icons.notification_add,
              ),
            ),
            buildIcons(
              const Icon(Icons.ac_unit),
            ),
            buildIcons(
              const Icon(Icons.search),
            ),
          ],
          bottom: allTabBars(),
        ),
        body: TabBarView(
          children: [
            FirstPage(size: size),
            SecondPage(size: size),
            ThirdPage(size: size),
            FourthPage(size: size),
          ],
        ),
      ),
    );
  }

  IconButton buildIcons(Icon icon) {
    return IconButton(
      onPressed: () {},
      icon: const Icon(Icons.ac_unit),
    );
  }
}

As we can see, we’ve provided the DefaultTabController‘s length property first.

Next, according to the number of length, we return the equal number of list of Widgets in actions property.

actions: [
            buildIcons(
              const Icon(Icons.ac_unit),
            ),
            buildIcons(
              const Icon(
                Icons.notification_add,
              ),
            ),
            buildIcons(
              const Icon(Icons.ac_unit),
            ),
            buildIcons(
              const Icon(Icons.search),
            ),
          ],
...

After that, we’ve followed the same rule in case of Tab Bar View pages.

body: TabBarView(
          children: [
            FirstPage(size: size),
            SecondPage(size: size),
            ThirdPage(size: size),
            FourthPage(size: size),
          ],
        ),
...

We’ve provided just four pages.

As a result, when we click the Log in, the Log in page opens up.

When we click the Account page, it opens up.

And finally, when we click the Settings page, it also opens up. Moreover, when each tab is clicked, it is highlighted by a blue shadow.

To get the full code, please visit the respective GitHub repository.

In this section, we’ve learned how the tab bar works in Flutter. We use the tabs mainly for mobile navigation.

The styling of tabs may vary according to the operating systems. For example, we can place the tabs at the top of the screen in android devices. On the contrary, we can place them at the bottom in iOS devices.

However, don’t assume that we cannot apply the same rule in Android. We can use the tabs at the bottom in Android in a different way.

To sum up, working with tabs is a common pattern in Android and iOS apps.

And, in addition to that, we’ve already learned that they follow the Material Design principles. Flutter is in advantage, because it provides a convenient way to create a tab layout.

Moreover, you may think app bar as a continuation of material design component.

An app bar consists of a toolbar and other widgets that we’ve just seen. In addition, an app bar exposes many kind of actions with icon buttons.

And the story of multipurpose AppBar is not finished yet. We’ll learn how we can make AppBar transparent in our next section.

So stay tuned, and happy Fluttering.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter