Tab Bar

Examples

Basic Usage
With Icons
Expanded Layout

Basic tab bar example — A simple tab bar with text-only tabs.

NeoTabBar(
  tabs: [
    NeoTab(id: "dashboard", label: "Dashboard"),
    NeoTab(id: "products", label: "Products"),
    NeoTab(id: "settings", label: "Settings"),
  ],
  activeTabId: "dashboard",
  onChange: (value) {
    // Handle state change
  },
),

NeoTabBar(
  tabs: [
    NeoTab(id: "dashboard", label: "Dashboard", icon: PhosphorIconsRegular.house),
    NeoTab(id: "products", label: "Products", icon: PhosphorIconsRegular.package),
    NeoTab(id: "settings", label: "Settings", icon: PhosphorIconsRegular.gear),
  ],
  activeTabId: "dashboard",
  onChange: (value) {
    // Handle state change
  },
),

Expanded tab bar example — Tab bar with expanded layout that fills the available width.

NeoTabBar(
  tabs: [
    NeoTab(id: "dashboard", label: "Dashboard"),
    NeoTab(id: "products", label: "Products"),
    NeoTab(id: "settings", label: "Settings"),
  ],
  isExpanded: true,
  activeTabId: "dashboard",
  onChange: (value) {
    // Handle state change
  },
),

Properties

Required

List<NeoTab>

required

A list of tabs to display in the tab bar. Each tab must have a unique id.

String

required

The ID of the currently active tab. Must match one of the tab IDs in the tabs list.

ValueChanged<String>

required

Callback function called when a tab is selected. Receives the ID of the selected tab.

Content

double

Custom spacing between tabs. If not provided, uses theme default spacing.

Layout

bool

default:"false"

Whether the tab bar should expand to fill the available width. When true, tabs are distributed evenly. When false, tabs wrap naturally.

Tab Properties

The NeoTab class represents individual tabs within the tab bar:

Required

String

A unique identifier for the tab. This is used to track the active tab and is passed to the onChange callback.

String

The text label displayed on the tab.

Content

PhosphorIconData

An optional icon to display alongside the label.

Best Practices

Width Constraints: When using isExpanded: true, always provide width constraints to prevent layout issues by wrapping in Expanded, ConstrainedBox, SizedBox, etc.
Combine with NeoHaptics in the onChanged callback for enhanced user experience on supported devices.
Always ensure tab IDs are unique within a single NeoTabBar to prevent errors.

Integration Notes

NeoTabBar uses NeoButton widgets internally, which means it inherits all the theming and interaction behaviors of buttons.
The active tab uses the filled variant while inactive tabs use the ghost variant.

Getting Started

AI

Neo CLI

Widgets

Layouts

Theming

Utilities

Examples

Properties

Required

Content

Layout

Tab Properties

Required

Content

Best Practices

Integration Notes

​Examples

​Properties

​Required

​Content

​Layout

​Tab Properties

​Required

​Content

​Best Practices

​Integration Notes

Examples

Properties

Required

Content

Layout

Tab Properties

Required

Content

Best Practices

Integration Notes