Button

1@override
2Widget build(BuildContext _) =>
3    FButton(mainAxisSize: .min, onPress: () {}, child: const Text('Button'));
4

CLI

To generate and customize this style:

dart run forui style create button

Usage

`FButton(...)`

1FButton(
2  style: const .context(),
3  selected: false,
4  onPress: () {},
5  child: const Text('Button'),
6)

`FButton.icon(...)`

1FButton.icon(
2  style: const .context(),
3  selected: false,
4  onPress: () {},
5  child: const Icon(FIcons.mail),
6)

`FButton.raw(...)`

1FButton.raw(
2  style: const .context(),
3  selected: false,
4  onPress: () {},
5  child: const Text('Button'),
6)

Examples

Appearance

Primary

1@override
2Widget build(BuildContext _) =>
3    FButton(mainAxisSize: .min, onPress: () {}, child: const Text('Button'));
4

Secondary

1@override
2Widget build(BuildContext _) => FButton(
3  variant: .secondary,
4  mainAxisSize: .min,
5  onPress: () {},
6  child: const Text('Button'),
7);
8

Destructive

1@override
2Widget build(BuildContext _) => FButton(
3  variant: .destructive,
4  mainAxisSize: .min,
5  onPress: () {},
6  child: const Text('Button'),
7);
8

Outline

1@override
2Widget build(BuildContext _) => FButton(
3  variant: .outline,
4  mainAxisSize: .min,
5  onPress: () {},
6  child: const Text('Button'),
7);
8

Ghost

1@override
2Widget build(BuildContext _) => FButton(
3  variant: .ghost,
4  mainAxisSize: .min,
5  onPress: () {},
6  child: const Text('Button'),
7);
8

Sizes

1@override
2Widget build(BuildContext _) => Column(
3  mainAxisSize: .min,
4  spacing: 20,
5  children: [
6    Row(
7      mainAxisSize: .min,
8      spacing: 10,
9      children: [
10        FButton(
11          variant: .outline,
12          size: .xs,
13          mainAxisSize: .min,
14          onPress: () {},
15          child: const Text('xs'),
16        ),
17        FButton(
18          variant: .outline,
19          size: .sm,
20          mainAxisSize: .min,
21          onPress: () {},
22          child: const Text('sm'),
23        ),
24        FButton(
25          variant: .outline,
26          mainAxisSize: .min,
27          onPress: () {},
28          child: const Text('base'),
29        ),
30        FButton(
31          variant: .outline,
32          size: .lg,
33          mainAxisSize: .min,
34          onPress: () {},
35          child: const Text('lg'),
36        ),
37      ],
38    ),
39    Row(
40      mainAxisSize: .min,
41      spacing: 10,
42      children: [
43        FButton.icon(
44          size: .xs,
45          onPress: () {},
46          child: const Icon(FIcons.chevronRight),
47        ),
48        FButton.icon(
49          size: .sm,
50          onPress: () {},
51          child: const Icon(FIcons.chevronRight),
52        ),
53        FButton.icon(onPress: () {}, child: const Icon(FIcons.chevronRight)),
54        FButton.icon(
55          size: .lg,
56          onPress: () {},
57          child: const Icon(FIcons.chevronRight),
58        ),
59      ],
60    ),
61  ],
62);
63

Toggleable

1class ButtonToggleExample extends StatefulWidget {
2  @override
3  State<ButtonToggleExample> createState() => _ButtonToggleExampleState();
4}
5
6class _ButtonToggleExampleState extends State<ButtonToggleExample> {
7  bool _italic = false;
8
9  @override
10  Widget build(BuildContext _) => FButton(
11    variant: .outline,
12    size: .sm,
13    mainAxisSize: .min,
14    selected: _italic,
15    onPress: () => setState(() => _italic = !_italic),
16    prefix: const Icon(FIcons.italic),
17    child: Text(
18      'Italic',
19      style: TextStyle(decoration: _italic ? .underline : null),
20    ),
21  );
22}
23

Content

With Text and Icon

1@override
2Widget build(BuildContext _) => FButton(
3  mainAxisSize: .min,
4  prefix: const Icon(FIcons.mail),
5  onPress: () {},
6  child: const Text('Login with Email'),
7);
8

With Only Icon

1@override
2Widget build(BuildContext _) =>
3    FButton.icon(child: const Icon(FIcons.chevronRight), onPress: () {});
4

With Circular Progress

1@override
2Widget build(BuildContext _) => FButton(
3  mainAxisSize: .min,
4  prefix: const FCircularProgress(),
5  onPress: null,
6  child: const Text('Please wait'),
7);
8

On this page