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),
)

BoxStyler Shorthand (Mix 2.3.0+)

Since Mix 2.3.0, .pressable(...) creates a PressableBox directly from a composed BoxStyler:

final button = BoxStyler()
    .color(Colors.blue)
    .padding(.all(16))
    .onPressed(.color(Colors.blue.shade900));

button.pressable(
  onPress: () => print('Pressed'),
  child: const Text('Save'),
);

The method returns a PressableBox and requires child in the same call. It accepts the same interaction parameters and defaults as PressableBox, with the receiving styler supplying style. Reuse the styler to create independent widgets with their own callbacks, keys, focus nodes, and controllers.

PressableBox(style: button, ...) remains supported, including on Mix versions before 2.3.0. The shorthand is available on BoxStyler; use Pressable directly for interaction around other widget surfaces.

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.forbidden when disabled.

PressableBox

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

PressableBox(
  style: .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: .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

Dynamic Styling — variant system for hover, press, focus, and more
Box — BoxStyler API used with PressableBox

On this page