FocusDetector

Reports when keyboard focus enters or leaves its subtree.

Learn more: Focus management

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

Usage

// Panel already accents itself while focus is inside it. Use a detector
// when your own chrome or state should follow the active pane.
FocusDetector(
  onFocusChange: (hasFocus) => setState(() => editorActive = hasFocus),
  child: Container(
    border: BoxBorder(
      style: theme.borderStyle,
      cellStyle: editorActive
          ? CellStyle(foreground: theme.colorScheme.primary)
          : theme.mutedStyle,
    ),
    child: editor,
  ),
)

Details

onFocusChange fires with true when focus moves onto this subtree (the child or any descendant) and false when it leaves. It also fires true on mount if focus is already inside, so state that starts out false is always correct.

Detectors nest like CSS :focus-within: focus inside an inner detector is inside every detector around it, so each of them reports it. Widgets that watch focus with their own detector, such as a list or a table, don’t hide focus from a detector wrapped around them.

Use it for focus-reactive chrome: a tooltip that shows while its target is focused, an active-pane highlight, a section that styles itself when something inside has focus. To rebuild, call setState from the callback.

Constructors

FocusDetector()

Parameter	Type	Default	Description
onFocusChange:	void Function(bool hasFocus)	required	Called when focus enters or leaves child’s subtree. More
child:	Widget	required	The subtree whose focus boundary is observed.

• onFocusChange: Moving focus between descendants of child does not call this again.

Source

FocusDetector is defined in packages/fleury/lib/src/widgets/focus.dart.

Category: Input handling & focus · All widgets

Live demo

focus_detector.dart

Restart Run Expand

Example · editable Revert Format

class _FocusDetectorTourState extends State<_FocusDetectorTour> {
  bool _inside = false;
  int _changes = 0;

  void _onFocusChange(bool inside) => setState(() {
    _inside = inside;
    _changes++;
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        const Text(
          'FOCUSDETECTOR · ONE SUBTREE BOUNDARY',
          style: CellStyle(bold: true),
        ),
        Text(
          'editor: ${_inside ? 'ACTIVE' : 'inactive'} · '
          'boundary changes: $_changes',
        ),
        const SizedBox(height: 1),
        FocusDetector(
          onFocusChange: _onFocusChange,
          // The border follows the detector: accented while focus is inside.
          child: Container(
            border: BoxBorder(
              style: theme.borderStyle,
              cellStyle: _inside
                  ? CellStyle(foreground: theme.colorScheme.primary)
                  : theme.mutedStyle,
            ),
            padding: const EdgeInsets.symmetric(horizontal: 1),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Editor region', allowSelect: false),
                Button(text: 'Title', autofocus: true, onPressed: () {}),
                Button(text: 'Body', onPressed: () {}),
              ],
            ),
          ),
        ),
        const SizedBox(height: 1),
        Button(text: 'Preview (outside)', onPressed: () {}),
        const Text(
          'Tab Title → Body: same region · Preview: leaves once',
          style: CellStyle(dim: true),
        ),
      ],
    );
  }
}

Live preview

Live · interactive

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