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 .inherit(),
3  selected: false,
4  onPress: () {},
5  child: const Text('Button'),
6)

`FButton.icon(...)`

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

`FButton.raw(...)`

1FButton.raw(
2  style: const .inherit(),
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  variants: {.secondary},
4  mainAxisSize: .min,
5  onPress: () {},
6  child: const Text('Button'),
7);
8

Destructive

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

Outline

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

Ghost

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

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