MouseRegion

Reports the pointer entering, moving within, and leaving its child. Hover requires motion tracking (TerminalMode.mouseMotion); without it, enter/exit still fire on clicks.

Learn more: Input & gestures

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

Usage

MouseRegion(
  onEnter: () => setHover(true),
  onExit: () => setHover(false),
  child: Text('hover me'),
)

Constructors

MouseRegion()

Parameter	Type	Default	Description
onEnter:	PointerTapCallback?	—	Called when the pointer enters the child’s painted bounds.
onExit:	PointerTapCallback?	—	Called when the pointer leaves the child’s painted bounds.
onHover:	PointerCallback?	—	Called on pointer motion with coordinates relative to this region and the surface.
onScroll:	PointerScrollCallback?	—	Return true to consume the wheel step, false to offer it to an ancestor.
cursor:	MouseCursor?	—	Overrides the host’s pointer shape inside this region. Null lets the host use its ordinary control cursor. Descendant controls can override it.
child:	Widget	required	Subtree whose painted bounds define the hover region.

Source

MouseRegion is defined in packages/fleury/lib/src/widgets/pointer.dart.

Category: Input handling & focus · All widgets

Live demo

Interaction

Restart Run Expand

Example · editable Revert Format

bool hovered = false;
bool pinned = false;

@override
Widget build(BuildContext context) => Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    MouseRegion(
      onEnter: () => setState(() => hovered = true),
      onExit: () => setState(() => hovered = false),
      child: Container.framed(
        width: 26,
        padding: const EdgeInsets.symmetric(horizontal: 1),
        border: BoxBorder(
          cellStyle: CellStyle(foreground: hovered ? Colors.cyan : null),
        ),
        child: Row(
          children: [
            const Text('notes.md'),
            const SizedBox(width: 2),
            Button(
              text: pinned ? 'Unpin' : 'Pin',
              onPressed: () => setState(() => pinned = !pinned),
            ),
          ],
        ),
      ),
    ),
    const SizedBox(height: 1),
    Text(hovered ? 'Inside file row' : 'Outside file row'),
    Text(pinned ? 'Pinned to sidebar' : 'Not pinned'),
  ],
);

Live preview

Live · interactive

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