The Tab Bar widget in Flutter is a simple and powerful part of Mobile app development. As you would imagine, a tab system matches N tabs with N widgets. When the user presses tab 1, they see widget 1, when they press tab 2, they see another widget which was assigned to tab 2 and so forth. The matching is done with a TabBar widget, a TabBarView widget, and a TabBarController.
Okay now, Lat’s talk about the Tab Controller which is also a very important part when creating a Tab Bar.
Tab Controller
The TabController is the least obvious part. Just know that you have to have one or you get the error in the image below;
The easiest way to create one is to wrap everything in a DefaultTabController() with a length property. Problem solved. This part is pretty simple – so simple you may wonder why Flutter doesn’t create one implicitly for you. If you were thinking that, you wouldn’t be wrong:
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
...
);
}Wrapping it in the Flutter default Tab controller solves your error.
TabBar View
Next, you’ll want to add a TabBarView widget. This holds the widgets that will eventually be shown when the user presses a tab, defining where they will be shown. Usually, this is the entire rest of the screen, but you have the opportunity to put widgets above the TabBarView or below it or really anywhere around it:
child: Scaffold(
body: TabBarView(
children: <Widget>[
WidgetA(),
WidgetB(),
WidgetC(),
],
),
You may choose to code up your Widget screen in another dart file or inside your TabBarView, all fall to your coding style. Now, we should go to the important part – “Building our Tabs“.
TabBar and Tabs
Lastly, we define the tabs themselves. Tabs can either hold text or an icon or both. Here’s a TabBar with three tabs, each having both an icon and text:
child: Scaffold(
appBar: AppBar(
title: const Text('Tab Navigating'),
bottom: TabBar(
tabs: const <Widget>[
Tab(icon: Icon(Icons.looks_one), child:Text('Show A')),
Tab(icon: Icon(Icons.looks_two), child:Text('Show B')),
Tab(icon: Icon(Icons.looks_3), child: Text('Show C')),
]),
...NOTE THAT: There’s a one-to-one correspondence between each tab and each TabBarView child; they are matched positionally. You must have the same number of tabs as you do widgets inside the TabBarView.
Let say you have 3 widgets inside your Tab Bar View, you must make sure that the children of your TabBar is also 3, else you’ll get an error.
Bottom TabBar
Sometimes, your UI plan may not permit a top appBar, and also note that previously we chose to put the TabBar in the appBar, which of course appears at the top of the screen. But
sometimes your design calls for the tabs to appear at the bottom of the screen. That’s easy because the Scaffold has a property called bottomNavigationBar and it is built to hold a TabBar:
child: Scaffold(
...
bottomNavigationBar: Material(
color: Theme.of(context).colorScheme.primary,
child: TabBar(tabs: const <Widget>[
Tab(icon: Icon(Icons.looks_one), child: Text('Show A')),
Tab(icon: Icon(Icons.looks_two), child: Text('Show B')),
Tab(icon: Icon(Icons.looks_3), child: Text('Show C')),
]),
),
),ALSO NOTE: The TabBar has the normal appearance of light text on a dark background. Thus, when you place the TabBar on top of a light background, it may be difficult to see the text (light on light). To fix this, wrap your TabBar in a Material widget with a darker background color as we did earlier.
The TabBar widget is an easy one to code up, popular website like Facebook, Telegram, WhatsApp still uses TabBar.
