Flutter Widgets (TabBar & TabBarView) The Whole Picture

Murtaza Sulaihi
Flutter Community
7 min readOct 23, 2020

--

Hello readers, a couple of weeks back one of the readers commented on my story asking me to write about TabBar and TabBarView widgets. So here it is, we will be talking about these two widgets and also we will be discussing the DefaultTabBarController and TabController as well.

If you are coming from Android Development you might agree with me on this that creating Tabbed layout in Android is not as easy as it is in Flutter. I am an Android Developer as well, and around 7 months back I started with Flutter development, well I struggled a bit at the start but when you compare it to Android development it is very easy to learn and I was actually zapped by the customizations you can do in Flutter. We will go through it all and a lot more in this story on TabBar and TabBarView.

Look at the image below to get an overview of what TabBar looks like.

TabBar Layout Overview

Now let us look at the constructor of TabBar first, which is pretty long, but I will bifurcate it into 3 parts so that it is easier to understand.

TabBar(           
indicatorColor: Colors.white,
indicatorWeight: 2.0,
indicatorPadding: EdgeInsets.zero

--

--

Murtaza Sulaihi
Flutter Community

By profession, I am a school professor and I also develop Android applications and also Flutter applications.