Button

FButton(style: FButtonStyle.primary(), mainAxisSize: MainAxisSize.min, onPress: () {}, child: const Text('Button'));

CLI

To generate and customize this style:

dart run forui style create button

Usage

`FButton(...)`

FButton(
  child: const Text('Button'),
  style: FButtonStyle.primary(),
  prefix: const Icon(FIcons.mail),
  suffix: const Icon(FIcons.chevronRight),
  mainAxisSize: MainAxisSize.min,
  onPress: () {},
  onLongPress: () {},
  onSecondaryPress: () {},
  onSecondaryLongPress: () {},
  shortcuts: {SingleActivator(LogicalKeyboardKey.enter): ActivateIntent()},
  actions: {ActivateIntent: CallbackAction<ActivateIntent>(onInvoke: (_) {})},
);

`FButton.raw(...)`

FButton.raw(
  child: const Text('Button'),
  style: FButtonStyle.primary(),
  onPress: () {},
  onLongPress: () {},
  onSecondaryPress: () {},
  onSecondaryLongPress: () {},
  shortcuts: {SingleActivator(LogicalKeyboardKey.enter): ActivateIntent()},
  actions: {ActivateIntent: CallbackAction<ActivateIntent>(onInvoke: (_) {})},
);

Examples

Appearance

Primary

FButton(style: FButtonStyle.primary(), mainAxisSize: MainAxisSize.min, onPress: () {}, child: const Text('Button'));

Secondary

FButton(style: FButtonStyle.secondary(), mainAxisSize: MainAxisSize.min, onPress: () {}, child: const Text('Button'));

Destructive

FButton(style: FButtonStyle.destructive(), mainAxisSize: MainAxisSize.min, onPress: () {}, child: const Text('Button'));

Outline

FButton(style: FButtonStyle.outline(), mainAxisSize: MainAxisSize.min, onPress: () {}, child: const Text('Button'));

Ghost

FButton(style: FButtonStyle.ghost(), mainAxisSize: MainAxisSize.min, onPress: () {}, child: const Text('Button'));

Content

With Text and Icon

FButton(
  style: FButtonStyle.primary(),
  mainAxisSize: MainAxisSize.min,
  prefix: const Icon(FIcons.mail),
  onPress: () {},
  child: const Text('Login with Email'),
);

With Only Icon

FButton.icon(child: const Icon(FIcons.chevronRight), onPress: () {});

With Circular Progress

FButton(
  mainAxisSize: MainAxisSize.min,
  prefix: const FCircularProgress(),
  onPress: null,
  child: const Text('Please wait'),
);

On this page