Tab Bar

Examples

Basic Usage
With Icons
Expanded Layout

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
  },
),

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 and the parent must give the bar a bounded width. 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

Object?

An optional icon to display alongside the label.

Behavior

In debug mode, duplicate tab ids assert.
The active tab is a NeoButton with variant: .primary. Inactive tabs use .tertiary.

Getting Started

AI

Widgets

Layouts

Theming

Utilities

Examples

Properties

Required

Content

Layout

Tab Properties

Required

Content

Behavior

​Examples

​Properties

​Required

​Content

​Layout

​Tab Properties

​Required

​Content

​Behavior

Examples

Properties

Required

Content

Layout

Tab Properties

Required

Content

Behavior