Flutter: Creating Tabs in Scaffold AppBar

Flutter: Creating Tabs in AppBar and associating it with Stateless and Stateful Widgets

Flutter is a mobile App SDK by Google which helps in creating modern mobile apps for iOS and Android using a single(almost) code base.

Unlike other frameworks like React Native, it neither uses JavaScript as a Programming Language nor it needs an interpreter bridge to convert JavaScript code into native code, instead, it compiles directly into Arm binaries and runs on the native platform.

When one opens a Mobile Application, it’s the AppBar which gets the user first attention and it’s not surprising that app developers would like to provide the most important functionalities of their app within this area.

In Flutter, we can achieve the same by using the AppBar of Scaffold

As we know that in Flutter, we can create Material Design using Scaffold which provides AppBar . The AppBar also provides a bottom area which can be used to create TabBar in the AppBar.

The TabBar can contain one or more tabs. Here is how an AppBar containing a TabBar with tabs look like

AppBar with TabBar and Tabs

In the picture above, the AppBar is having a title and a TabBar which has two tabs represented as icons.

In this post, we’ll see how we can create tabs and associate stateless and stateful widgets with them for providing the corresponding actions.

Creating a TabBar with Tabs

So let’s first create a Stateless Widget containing Material Design with Scaffold and AppBar. Here is how the code for the same shall look like

A minimal AppBar within Scaffold of MaterialApp

Here is how the resultant app bar shall look like

A simple AppBar

Along with the title, the widget AppBar can have an additional constructor parameter called bottom and this is where we provide a TabBar widget as input parameter.

TabBar widget takes a child widget called tabs, which can take the array of widgets, each one of them shall become a Tab in the TabBar.

Here is how the code for the same shall look like

AppBar with the bottom parameter which contains TabBar widget

This code will create a TabBar in the AppBar. However, before we can display our tabs, we need to add some more code. We need a TabController for our TabBar

A TabController is required to handle various aspects of a tab, including but not llimited to delegating the control to a widget when a tab is selected

There are two ways to create a TabController, We can either use the controller: parameter of the TabBar widget or we can make use of DefaultTabController which contains almost all required functionalities to use a Tab.

As a beginner, let’s start with using the DefaultTabController, because custom TabController requires addition inputs as well as constrains, about which we can discuss in some other posts.

The only constraint with DefaultTabController is that we need to wrap the complete Scaffold widget inside it because it will not work as a parameter of TabBar widget

Here is how the code for the same shall look like

MaterialApp with DefaultTabController

The DefaultAppController has two parameters, the length specifies the number of tabs that will be there in the TabBar and the child contains the Scaffold with AppBar, which in turn contains TabBar in the bottom:

And here is how the output of the code shall look like

AppBar with two Tabs (i.e. First Tab & Second Tab)

The Tabs doesn’t necessarily need to be a Text widget, we can also use other widgets like Icon over here.

Here is how we can use Tab widget for displaying Icon in the TabBar

TabBar with tabs containing Icons

Adding Actions widgets to the Tabs in TabBar

The tabs are meaningless unless we add some actions to it. However, did we realize that the actions pertaining to selecting a Tab shall be reflected in the body?

Yes, our actions of the tabs will result in some activities being done in the body of the Scaffold

Since the actions will be performed in the Scaffold body area, we need to provide the actions over there and then map the actions with the corresponding Tabs

Fortunately, the mapping is done automatically by DefaultTabController . However, we need to provide a widget in the body called TabBarView which can take multiple child widgets.

By default, the child widget declaration sequence will automatically map to the tabs, i.e. First widget will be called for the first Tab, Second Widget will be called for the second tab and so on.

Let’s first display the Text widgets as actions of the tab selection. Here is how the code of the Scaffold body: shall look like

Scaffold Body with TabBarView and Text Widgets

Adding Stateless and Stateful widgets as Actions

When we provide actions for tabs in the TabBar, we can use any widgets (built-in or custom). Let’s create our own custom widgets (stateless and stateful) and see what happens when we provide them as actions.

There is a very interesting and peculiar difference between the behavior of stateless and stateful widgets from their lifecycle perspective. It will be clear only when we see them in action below.

Lets’ first create a stateful widget as an action of Android Tab. This stateful widget shall have a couple of widgets called Text and CheckBox wrapped in a Column . The CheckBox shall increment a counter everytime it’s clicked.

Here is how the code for the stateful widget shall look like

A Stateful Widget with a Text and CheckBox

And here is how we can call this widget from the TabBarView

AndroidAction widget is called as an action widget for android Tab

Now when we run the code, on the selection of Android Tab, we’ll see the following output on the app screen

Android Tab With AndroidAction() widget

However, something interesting happens when we open the cloud Tab and come back to Android Tab. Watch the below animation carefully

Moving between Tabs

Did you notice something?

Well, when we come back to Android Tab, the counter restarts with the value zero. This effectively means that the Stateful widget AndroidAction() reloads again when we come back to it.

A stateful widget will be recreated every time the corresponding tab is selected

Now let’s see what happens when we load a Stateless widget. Let’s create a simple stateless widget which displays a Text widget. The Text widget will also display a counter created as part of the stateless widget. We’ll also increment the counter in the build function

Here is how the code look like

A Stateless widget for Cloud Tab

And here is how we’ll call this action widget from the TabBarView

CloudAction() widget is called as an action widget for cloud tab

And here is how the output looks like when we use the cloud tab

The App using Cloud Tab

As you can see over here that the Stateless Widget is not instantiated again when we come back to the cloud tab. The counter keeps on increasing which effectively means that this is the only instance for stateless widgets where a build function is called without re-instantiation of a stateless widget.

When used as a tab action widgets, A stateless widget doesn’t instantiate every time the tab is selected while for a stateful widget it does every time.

That's all about this particular post, I’ll talk about more interesting functionalities of flutter in upcoming posts.

Thanks for reading….!!!!

Daksh