Tabs

Tabs let users switch between different sections of content within the same context. They provide quick navigation without leaving the current screen.

Common alternative names:
Segmented control

---

Variants

Basic

Simple text-based tabs with clean styling.

Preview

Code

Tabs(
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ],
)

---

Top Icon

Tabs with icons positioned above the text labels.

Preview

Code

Tabs(
  tabs: [
    Tab(
      text: 'Tab 1',
      icon: Icon(Icons.circle_outlined, size: 20),
    ),
    Tab(
      text: 'Tab 2',
      icon: Icon(Icons.circle_outlined, size: 20),
    ),
    Tab(
      text: 'Tab 3',
      icon: Icon(Icons.circle_outlined, size: 20),
    ),
  ],
)

---

Bottom Icon

Custom tabs with icons positioned below the text labels using custom layout.

Preview

Code

Tabs(
  onTap: (value) => setState(() => selectedIndex = value),
  tabs: [
    Tab(
      child: Column(
        spacing: 4,
        children: [
          SvgPicture.asset(
            'assets/home.svg',
            width: 16,
            height: 16,
            colorFilter: ColorFilter.mode(
              active ? context.color.accentModerate : context.color.fgSubtle,
              BlendMode.srcIn,
            ),
          ),
          Text(
            'Home',
            style: TextStyle(
              fontSize: 14,
              fontWeight: active ? FontWeight.w600 : FontWeight.w400,
            ),
          ),
        ],
      ),
    ),
  ],
)

---

Properties

Property	Type	Description
tabs	List<Widget>	The list of tabs to display. Required.
controller	TabController?	Tab controller for managing tab state. Auto-created if null.
indicatorColor	Color?	Color of the line below the selected tab. Defaults to accent color.
labelColor	Color?	Color of the selected tab’s label. Defaults to accent color.
unselectedLabelColor	Color?	Color of unselected tab labels. Defaults to subtle foreground color.
indicatorSize	TabBarIndicatorSize	How the indicator size is computed. Defaults to TabBarIndicatorSize.tab.
indicatorPadding	EdgeInsetsGeometry	Padding around the tab indicator. Defaults to EdgeInsets.zero.
labelPadding	EdgeInsetsGeometry	Padding around each tab’s label. Defaults to EdgeInsets.zero.
onTap	ValueChanged<int>?	Callback when a tab is tapped. Receives the tapped tab’s index.
indicatorWeight	double	Thickness of the selected tab indicator line. Defaults to 1.0.
isScrollable	bool	Whether tabs can scroll horizontally. Defaults to false.
overlayColor	WidgetStateProperty<Color?>?	Color shown during tab interactions. Defaults to transparent.