Skip to main content

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

Properties

Required

tabs
List<NeoTab>
required
A list of tabs to display in the tab bar. Each tab must have a unique id.
activeTabId
String
required
The ID of the currently active tab. Must match one of the tab IDs in the tabs list.
onChange
ValueChanged<String>
required
Callback function called when a tab is selected. Receives the ID of the selected tab.

Content

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

Layout

isExpanded
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

id
String
A unique identifier for the tab. This is used to track the active tab and is passed to the onChange callback.
label
String
The text label displayed on the tab.

Content

icon
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.
I