Tabs

1@override
2Widget build(BuildContext _) => Column(
3  mainAxisAlignment: .center,
4  children: [
5    Padding(
6      padding: const .all(16),
7      child: FTabs(
8        children: [
9          .entry(
10            label: const Text('Account'),
11            child: FCard(
12              title: const Text('Account'),
13              subtitle: const Text(
14                'Make changes to your account here. Click save when you are done.',
15              ),
16              child: Column(
17                children: [
18                  const FTextField(label: Text('Name'), hint: 'John Renalo'),
19                  const SizedBox(height: 10),
20                  const FTextField(label: Text('Email'), hint: 'john@doe.com'),
21                  const SizedBox(height: 16),
22                  FButton(child: const Text('Save'), onPress: () {}),
23                ],
24              ),
25            ),
26          ),
27          .entry(
28            label: const Text('Password'),
29            child: FCard(
30              title: const Text('Password'),
31              subtitle: const Text(
32                'Change your password here. After saving, you will be logged out.',
33              ),
34              child: Column(
35                children: [
36                  const FTextField(label: Text('Current password')),
37                  const SizedBox(height: 10),
38                  const FTextField(label: Text('New password')),
39                  const SizedBox(height: 16),
40                  FButton(child: const Text('Save'), onPress: () {}),
41                ],
42              ),
43            ),
44          ),
45        ],
46      ),
47    ),
48  ],
49);
50

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.

1@override
2Widget build(BuildContext _) => Padding(
3  padding: const .all(16),
4  child: SizedBox(
5    height: 350,
6    child: FTabs(
7      // Swiping between tabs requires expands to be true and contentPhysics to not be NeverScrollableScrollPhysics.
8      expands: true,
9      contentPhysics: const BouncingScrollPhysics(),
10      children: [
11        .entry(
12          label: const Text('Account'),
13          child: FCard(
14            title: const Text('Account'),
15            subtitle: const Text(
16              'Make changes to your account here. Click save when you are done.',
17            ),
18            child: Column(
19              children: [
20                const FTextField(label: Text('Name'), hint: 'John Renalo'),
21                const SizedBox(height: 10),
22                const FTextField(label: Text('Email'), hint: 'john@doe.com'),
23                const SizedBox(height: 16),
24                FButton(child: const Text('Save'), onPress: () {}),
25              ],
26            ),
27          ),
28        ),
29        .entry(
30          label: const Text('Password'),
31          child: FCard(
32            title: const Text('Password'),
33            subtitle: const Text(
34              'Change your password here. After saving, you will be logged out.',
35            ),
36            child: Column(
37              children: [
38                const FTextField(label: Text('Current password')),
39                const SizedBox(height: 10),
40                const FTextField(label: Text('New password')),
41                const SizedBox(height: 16),
42                FButton(child: const Text('Save'), onPress: () {}),
43              ],
44            ),
45          ),
46        ),
47      ],
48    ),
49  ),
50);
51

CLI

Usage

FTabs(...)

FTabEntry(...)

Examples

Swipeable

On this page

`FTabs(...)`

`FTabEntry(...)`