Flutter UI Essentials — Tabs

Maneesha Erandi
3 min readMay 6, 2024

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


This will create a Material Design primary tab bar

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