Working with Tabs in Flutter

 In the last post, we looked at how to work with Flutter navigation as well as the different forms of routing that Google officially offers. Today we will discover the tab bars and the different options available in Flutter.

Tab Bar + Material Design 

The first thing we should comment on is that as many of you already know most of the widgets are migrated to Material Design 3. This has been a hard road for 2022 onwards. But today we can celebrate with an aesthetic change like the one you can see below.

By default, at the time of writing this post the application loads Material Design 2. If you want to use Material Design 3 we must enable it in the creation of the MaterialApp. We do this via the theme parameter with the following way.

TabBar and TabBarView

The TabBar object represents the top tab bar that many applications have. It is added as a property of the AppBar widget. 

Its only mandatory property is called tabs and contains an array of Tab objects. This widget describes the visual representation of each tab. If we look at its definition...

We can deduce two things from this. 

1. A Tab can be a text, an image or another widget (child).
2. A Tab with text cannot have a child property or vice versa.

Now, to tell it what to display when a certain Tab is clicked, Flutter provides a widget called TabBarView. In the body of the view we will pass this object and introduce its only mandatory parameter (children) with an array containing each of the widgets to be displayed.

Remember that it is most common to work with pages within tabs where each page is the content of a tab. A page is not a view or screen, as the latter are contained within a Scaffold and may or may not have pages. But if a view contains tabs then it will have as many pages as tabs which are nothing more than a widget that corresponds to the content of that tab. This widget does not contain a scaffold as it uses the parent's scaffold.

Now we can launch the app and see the wonderful error:

What is going on?

Flutter doesn't know how to control the TabBar and TabBarView, nor does it know how to link them. For that we will need a tab controller. Here we have 2 options:

The TabController object where we can manually configure all the parameters in a very manual but customizable way.

The DefaultTabController object. A much simpler controller implementation that automatically connects the TabBar and the TabBarView.

Most applications do not require deep control over the behaviour of the TabBar and TabBarView and that's why I see no reason why you should have to do it by hand instead of using the DefaultTabController that Flutter offers.

Let's take a look at DefaultTabController documentation:

To use DefaultTabController requires that we wrap the entire view by making the Scaffold widget the child property of the DefaultTabController. Finally we will need to tell it the number of tabs we have with the length property as well as their initial index if it is other than 0.

Conclusions

It is very easy to work with tabs since we have the DefaultTabController object. As you can see there is no routing or navigation to define. 

This simplifies a lot and makes it easy to include this kind of tabs in the development of many of our Flutter applications. I hope you found it interesting and if you have any questions I'll read you in the comments.

See you next time!