Pressable

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


Pressable(
  onPress: () => print('Pressed!'),
  child: StyledText('Press Me'),
);

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

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)
      .paddingAll(16)
      .borderRounded(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(16)
      .borderRadius(8)
      .onPressed(BoxStyler().color(Colors.red))
      .onHovered(BoxStyler().color(Colors.green))
      .onFocused(BoxStyler().border(Border.all(color: Colors.white, width: 2)))
      .onDisabled(BoxStyler().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
`onLongPressed`	Styles applied when the widget is being long-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