Flutter UI Essentials — Tabs

Tabs help to navigate between different screens with a horizontal scroll.

Material tab bar

• Categorize contents in to groups
• There are two types : primary and secondary
• Horizontally scrollable
• Can implement many tabs as needed

What’s different from Material 2

Color: New color mappings and compatibility with dynamic color

Layout: Icons and labels are now vertically centered within the container

Flutter tab bar

We normally place the tab bar as the bottom of the AppBar widget. Tab views will display the content of the given main destinations.

We can use

• A TabController or DefaultTabController ancestor to control the tab bar

Following values must be the same

• tab controller’s TabController.length
• length of the tabs list
• length of the TabBarView.children list

Constructors

This will create a Material Design primary tab bar

TabBar({
  Key? key, 
  required List<Widget> tabs, 
  TabController? controller, 
  bool isScrollable = false…