Interactable

Primary use: when you build your own widgets and want the same consistent disabled effect and scale-down on press as widgets like NeoButton, wrap them with NeoInteractable.

Examples

NeoInteractable(
  onPressed: () {},
  builder: (context, state) {
    return ColoredBox(
      color: state.isActive
          ? theme.colors.fillSecondary
          : theme.colors.transparent,
      child: Text(
        "Tap me",
        style: theme.textStyles.body1.copyWith(
          color: theme.colors.fgPrimary,
        ),
      ),
    );
  },
),

NeoInteractable(
  onPressed: () {},
  child: Text(
    "Static content",
    style: theme.textStyles.body1,
  ),
),

NeoInteractable(
  isEnabled: false,
  onPressed: () {},
  child: Text("Unavailable"),
),

Provide exactly one of child or builder.

Properties

Required

Provide either child or builder (exactly one).

Content

Widget?

Static child when interaction-driven rebuilds are not needed. Mutually exclusive with builder.

NeoInteractableBuilder?

Builds content from the current interaction snapshot (isEnabled, isHovered, isPressed, isActive). Mutually exclusive with child.

Layout

HitTestBehavior

default:"HitTestBehavior.deferToChild"

Hit-test behavior passed to the underlying gesture detector when press handlers are present.

Styling

bool

default:"true"

Whether the content scales slightly while pressed.

double

default:"0.97"

Scale factor applied while pressed when enableScale is true.

MouseCursor?

Mouse cursor override. When null, uses click when enabled and forbidden when disabled.

State

VoidCallback?

Called on tap when enabled.

bool

default:"true"

When false, dims via Neo’s disabled opacity, clears hover/press, and ignores input.

VoidCallback?

Called when a press begins.

VoidCallback?

Called when a press ends or is cancelled.

VoidCallback?

Called when the pointer enters the interactable region.

VoidCallback?

Called when the pointer leaves the interactable region.

GestureDragStartCallback?

Optional horizontal drag start handler.

GestureDragUpdateCallback?

Optional horizontal drag update handler.

Duration?

Overrides theme durations.short for the minimum time pressed stays true on quick taps.

Builder state

When you need custom hover/press visuals, use builder. The snapshot includes:

isEnabled / isHovered / isPressed
isActive — true when enabled and either hovered or pressed (same feedback on touch and desktop)

Best Practices

Prefer child when you only need disabled opacity and press scale.
Use builder + state.isActive when your custom widget also needs hover/press color changes.
Keep the wrapper thin — compose layout and styling in the child/builder, leave gestures to NeoInteractable.

Integration Notes

Neo widgets such as NeoButton use this shell internally — wrapping your own widgets keeps interaction consistent with the rest of Neo.
Press scale duration follows theme.durations.short.

Getting Started

AI

Neo CLI

Widgets

Layouts

Theming

Utilities

Interactable

Examples

Properties

Required

Content

Layout

Styling

State

Builder state

Best Practices

Integration Notes

​Examples

​Properties

​Required

​Content

​Layout

​Styling

​State

​Builder state

​Best Practices

​Integration Notes

Examples

Properties

Required

Content

Layout

Styling

State

Builder state

Best Practices

Integration Notes