Tabs

A tab strip over swappable content.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Tabs(
  tabs: const <TabItem>[
    TabItem(label: 'Overview', content: Text('Project at a glance.')),
    TabItem(label: 'Logs', content: Text('› build finished in 1.8s')),
    TabItem(label: 'Settings', content: Text('Theme · keybindings · …')),
  ],
)

Details

Renders a row of labels (the active one highlighted) above the active tab’s content. Clicking a label switches to its tab. When the strip is focused, Left/Right switch tabs (wrapping) and Home/End jump to the first and last tab. From anywhere inside the tab area, Alt+1 through Alt+9 jump straight to a tab and Ctrl+PageUp/Ctrl+PageDown cycle through them. You can also drive controller directly for programmatic switching. The active tab’s focusable widgets join the normal focus traversal, so Tab moves into them.

Every tab stays mounted, so each one’s state (scroll position, typed text, expanded nodes…) survives switching away and back. Inactive tabs are hidden and excluded from focus traversal while they’re off-screen.

Constructors

Tabs()

Parameter	Type	Default	Description
tabs:	List<TabItem>	required	Tab labels and content, in strip order.
controller:	TabController?	—	External selected-tab controller, or null to use widget-owned state.
focusNode:	FocusNode?	—	Focus node used by the tab strip’s keyboard interaction.
autofocus:	bool	false	Whether the tab strip should request focus when mounted.
activeStyle:	CellStyle?	—	Style for the active tab’s label. Defaults to the theme’s selection style.
inactiveStyle:	CellStyle?	—	Style for inactive tab labels. Defaults to the theme’s muted style.
bordered:	bool	false	When true, the active content sits in a bordered, padded panel below the strip (separated by a gap), making the widget’s bounds and the strip → content split clear. Defaults to false — a bare strip-over-content layout.

Source

Tabs is defined in packages/fleury/lib/src/catalog/tabs.dart.

Category: Navigation & overlays · All widgets

Live demo

tabs_example.dart

Restart Run Expand

Example · editable Revert Format

Widget example() => Tabs(
  tabs: <TabItem>[
    TabItem(
      label: 'Overview',
      content: const Padding(
        padding: EdgeInsets.all(1),
        child: Text('Project at a glance.'),
      ),
    ),
    TabItem(
      label: 'Logs',
      content: const Padding(
        padding: EdgeInsets.all(1),
        child: Text('› build finished in 1.8s'),
      ),
    ),
    TabItem(
      label: 'Settings',
      content: const Padding(
        padding: EdgeInsets.all(1),
        child: Text('Theme · keybindings · …'),
      ),
    ),
  ],
);

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand