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              builder: (context, style, _) => Padding(
13                padding: style.padding,
14                child: Column(
15                  mainAxisSize: .min,
16                  crossAxisAlignment: .start,
17                  children: [
18                    Text('Account', style: style.titleTextStyle),
19                    const SizedBox(height: 2),
20                    Text(
21                      'Make changes to your account here. Click save when you are done.',
22                      style: style.subtitleTextStyle,
23                    ),
24                    const SizedBox(height: 6),
25                    const FTextField(label: Text('Name'), hint: 'John Renalo'),
26                    const SizedBox(height: 10),
27                    const FTextField(
28                      label: Text('Email'),
29                      hint: 'john@doe.com',
30                    ),
31                    const SizedBox(height: 16),
32                    FButton(child: const Text('Save'), onPress: () {}),
33                  ],
34                ),
35              ),
36            ),
37          ),
38          .entry(
39            label: const Text('Password'),
40            child: FCard(
41              builder: (context, style, _) => Padding(
42                padding: style.padding,
43                child: Column(
44                  mainAxisSize: .min,
45                  crossAxisAlignment: .start,
46                  children: [
47                    Text('Password', style: style.titleTextStyle),
48                    const SizedBox(height: 2),
49                    Text(
50                      'Change your password here. After saving, you will be logged out.',
51                      style: style.subtitleTextStyle,
52                    ),
53                    const SizedBox(height: 6),
54                    const FTextField(label: Text('Current password')),
55                    const SizedBox(height: 10),
56                    const FTextField(label: Text('New password')),
57                    const SizedBox(height: 16),
58                    FButton(child: const Text('Save'), onPress: () {}),
59                  ],
60                ),
61              ),
62            ),
63          ),
64        ],
65      ),
66    ),
67  ],
68);
69

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            builder: (context, style, _) => Padding(
15              padding: style.padding,
16              child: Column(
17                mainAxisSize: .min,
18                crossAxisAlignment: .start,
19                children: [
20                  Text('Account', style: style.titleTextStyle),
21                  const SizedBox(height: 2),
22                  Text(
23                    'Make changes to your account here. Click save when you are done.',
24                    style: style.subtitleTextStyle,
25                  ),
26                  const SizedBox(height: 6),
27                  const FTextField(label: Text('Name'), hint: 'John Renalo'),
28                  const SizedBox(height: 10),
29                  const FTextField(label: Text('Email'), hint: 'john@doe.com'),
30                  const SizedBox(height: 16),
31                  FButton(child: const Text('Save'), onPress: () {}),
32                ],
33              ),
34            ),
35          ),
36        ),
37        .entry(
38          label: const Text('Password'),
39          child: FCard(
40            builder: (context, style, _) => Padding(
41              padding: style.padding,
42              child: Column(
43                mainAxisSize: .min,
44                crossAxisAlignment: .start,
45                children: [
46                  Text('Password', style: style.titleTextStyle),
47                  const SizedBox(height: 2),
48                  Text(
49                    'Change your password here. After saving, you will be logged out.',
50                    style: style.subtitleTextStyle,
51                  ),
52                  const SizedBox(height: 6),
53                  const FTextField(label: Text('Current password')),
54                  const SizedBox(height: 10),
55                  const FTextField(label: Text('New password')),
56                  const SizedBox(height: 16),
57                  FButton(child: const Text('Save'), onPress: () {}),
58                ],
59              ),
60            ),
61          ),
62        ),
63      ],
64    ),
65  ),
66);
67

CLI

Usage

FTabs(...)

FTabEntry(...)

Examples

Swipeable

On this page

`FTabs(...)`

`FTabEntry(...)`