Button

A focusable button, drawn as [ content ] by default, that calls onPressed on Enter, Space, or a click.

Learn more: Input & gestures

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Button(
  text: 'Save',
  variant: ButtonVariant.primary,
  onPressed: () => save(),
)

Details

Provide exactly one of text or child. text is the convenience form for a plain label; child accepts composed content with the same frame and interaction styling. Do not put other interactive controls inside child. appearance defaults to ButtonAppearance.bracketed; ButtonAppearance.plain removes the frame and left-aligns either content form.

A null onPressed disables the button: it is shown muted and can’t take focus.

variant tints the label from the theme’s ColorScheme (primary for the default action, error for a destructive one, etc.); when focused the button shows the theme’s selection highlight.

A button is normally as wide as its label. Give it a tight width, such as SizedBox(width: 14, child: Button(...)), to center the label and expand the bracketed button to that width.

Constructors

Button()

Parameter	Type	Default	Description
text:	String?	—	Text shown using appearance.
child:	Widget?	—	Composed content shown using the same appearance as text. More
semanticLabel:	String?	—	Accessible action name. Defaults to text for a plain-text button. More
onPressed:	void Function()?	required	Called when the button is pressed with Enter, Space, a click, or a semantic activate action; null disables the button. The button doesn’t wait for asynchronous work the handler starts. To decline a press, such as when the action it runs turns out to be unavailable, throw SemanticActionDeclined: a key press or click ignores it, and a semantic activation reports unsupported instead of completed.
onSecondaryPressed:	void Function()?	—	Called after a completed right-button click, without calling onPressed. The click also focuses the button. Null onPressed disables both actions. Provide a keyboard-accessible route to this action as well, such as a separate Details button or a shortcut in an enclosing KeyBindings.
variant:	ButtonVariant	ButtonVariant.normal	Accent applied to the label, resolved from the theme’s ColorScheme.
appearance:	ButtonAppearance	ButtonAppearance.bracketed	Visual frame, independent of variant and the text/child choice.
focusNode:	FocusNode?	—	Focus node for the button.
autofocus:	bool	false	Whether the button requests focus when mounted.
style:	CellStyle?	—	Base styling, plus optional hover, focus, pressed, and disabled entries from CellStyle.interactive.

• child: Text descendants inherit the button’s resolved interaction style. Mutually exclusive with text.
• semanticLabel: Supply this for composed content whose name is not conveyed by its descendant semantics, or to omit decorative shortcuts from the name. An explicit name replaces descendant semantics, not visible content.

Source

Button is defined in packages/fleury/lib/src/widgets/button.dart.

Category: Inputs & controls · All widgets

Live demo

button_example.dart

Restart Run Expand

Example · editable Revert Format

class _ButtonExampleState extends State<_ButtonExample> {
  int _count = 0;
  @override
  Widget build(BuildContext context) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      Text('Pressed $_count×'),
      const SizedBox(height: 1),
      Button(
        text: 'Press me',
        variant: ButtonVariant.primary,
        autofocus: true,
        onPressed: () => setState(() => _count++),
      ),
    ],
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand