Navigation

Tabs

A set of layered sections of content—known as tab entries—that are displayed one at a time.

CLI

To generate a specific style for customization:

dart run forui style create tabs

Usage

FTabs(...)

1FTabs(
2 scrollable: false,
3 physics: null,
4 contentPhysics: const BouncingScrollPhysics(),
5 style: const .delta(spacing: 10),
6 mouseCursor: .defer,
7 onPress: (index) {},
8 children: const [
9 FTabEntry(label: Text('Tab 1'), child: Text('Content 1')),
10 FTabEntry(label: Text('Tab 2'), child: Text('Content 2')),
11 ],
12 expands: false,
13)

FTabEntry(...)

1FTabEntry(
2 label: Text('Tab Label'),
3 child: Text('Tab Content'),
4)

Examples

Swipeable

Hold Shift while scrolling to swipe between tabs on desktop and web.

On this page