Pressable

This is equivalent to Flutter’s GestureDetector, MouseRegion, and Focus widgets but with enhanced interaction state management and styling capabilities.

Use PressableBox to combine pressable interaction with box styling and state-driven variants:


final buttonStyle = BoxStyler()
    .color(Colors.blue)
    .padding(.symmetric(horizontal: 24, vertical: 12))
    .borderRadius(.circular(10))
    .shadow(
      .color(Colors.blue.shade200).blurRadius(8).offset(x: 0, y: 2),
    )
    .onHovered(
      .color(Colors.blue.shade700).shadow(
            .color(Colors.blue.shade300).blurRadius(12).offset(x: 0, y: 4),
          ),
    )
    .onPressed(.color(Colors.blue.shade900).scale(0.97))
    .animate(.ease(150.ms));
 
final labelStyle = TextStyler()
    .color(Colors.white)
    .fontSize(16)
    .fontWeight(.w600);
 
PressableBox(
  onPress: () {},
  style: buttonStyle,
  child: StyledText('Press Me', style: labelStyle),
)

Interactive Preview

Resolving preview metadata...

Constructor

Prop	Type	Required / Default Value
child	`Widget`	Required
enabled	`bool`	Optional, defaults to `true`
enableFeedback	`bool`	Optional, defaults to `false`
onPress	`VoidCallback?`	Optional
onLongPress	`VoidCallback?`	Optional
onFocusChange	`ValueChanged<bool>?`	Optional
hitTestBehavior	`HitTestBehavior`	Optional, defaults to `HitTestBehavior.opaque`
autofocus	`bool`	Optional, defaults to `false`
focusNode	`FocusNode?`	Optional
mouseCursor	`MouseCursor?`	Optional
onKey	`FocusOnKeyEventCallback?`	Optional
onKeyEvent	`FocusOnKeyEventCallback?`	Optional
canRequestFocus	`bool`	Optional, defaults to `true`
excludeFromSemantics	`bool`	Optional, defaults to `false`
semanticButtonLabel	`String?`	Optional
controller	`WidgetStatesController?`	Optional
actions	`Map<Type, Action<Intent>>?`	Optional
key	`Key?`	Optional

Usage Examples

Pressable with Focus and Long Press


Pressable(
  onPress: () => print('Pressed'),
  onLongPress: () => print('Long pressed'),
  onFocusChange: (focused) => print('Focus: $focused'),
  autofocus: true,
  child: StyledText('Interactive Button'),
);

Disabled Pressable


Pressable(
  enabled: false,
  onPress: () => print('This won\'t be called'),
  child: StyledText('Disabled Button'),
);

When mouseCursor is null, Pressable chooses SystemMouseCursors.click when enabled and SystemMouseCursors.basic when disabled.

PressableBox

PressableBox combines the functionality of Pressable with Box styling capabilities, providing a pressable area with customizable visual styling.


  PressableBox(
    style: BoxStyler()
      .color(Colors.blue)
      .padding(.all(16))
      .borderRadius(.circular(8)),
    onPress: () => print('PressableBox pressed'),
    child: StyledText('Styled Button'),
  );

PressableBox Constructor

Prop	Type	Required / Default Value
child	`Widget`	Required
style	`BoxStyler?`	Optional
enabled	`bool`	Optional, defaults to `true`
enableFeedback	`bool`	Optional, defaults to `false`
onPress	`VoidCallback?`	Optional
onLongPress	`VoidCallback?`	Optional
onFocusChange	`Function(bool)?`	Optional
hitTestBehavior	`HitTestBehavior`	Optional, defaults to `HitTestBehavior.opaque`
autofocus	`bool`	Optional, defaults to `false`
focusNode	`FocusNode?`	Optional
key	`Key?`	Optional

PressableBox with Interaction States

PressableBox integrates with Mix’s variant system to apply different styles based on interaction states:


PressableBox(
  style: BoxStyler()
      .color(Colors.blue)
      .padding(.all(16))
      .borderRadius(.circular(8))
      .onPressed(.color(Colors.red))
      .onHovered(.color(Colors.green))
      .onFocused(.border(.color(Colors.white).width(2)))
      .onDisabled(.color(Colors.grey)),
  onPress: () => print('Interactive button pressed'),
  child: StyledText('Interactive Button'),
);

Available Interaction States

State	Description
`onPressed`	Styles applied when the widget is being pressed
`onHovered`	Styles applied when a pointer hovers over the widget
`onFocused`	Styles applied when the widget gains focus
`onDisabled`	Styles applied when the widget is disabled
`onEnabled`	Styles applied when the widget is enabled and interactive