FocusNode

A long-lived focus identity. One per Focus widget; consumers can also create their own and pass it into a Focus to keep focus state stable across reparenting.

Learn more: Focus management

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

Usage

class _WorkspaceState extends State<Workspace> {
  final _searchFocus = FocusNode(debugLabel: 'search');

  void focusSearch() => _searchFocus.requestFocus();

  @override
  Widget build(BuildContext context) => Row(
    children: [
      Button(text: 'Focus search', onPressed: focusSearch),
      SizedBox(
        width: 24,
        child: TextInput(focusNode: _searchFocus, onChanged: search),
      ),
    ],
  );

  @override
  void dispose() {
    _searchFocus.dispose();
    super.dispose();
  }
}

Details

A node notifies its listeners when hasFocus flips. A control that shows a focus cue listens to its own node — context.listen(node) in build — so a focus move rebuilds the two controls it concerns, not every control that depends on the FocusManager.

Constructors

FocusNode()

Parameter	Type	Default	Description
canRequestFocus:	bool	true	Whether this node can receive focus through traversal, pointer input, or requestFocus.
skipTraversal:	bool	false	Whether Tab and arrow traversal should skip this node while explicit requestFocus and pointer focus remain available.
debugLabel:	String?	—	Optional human-readable label. Only surfaces in toString.

Source

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

Category: Input handling & focus · All widgets

Live demo

focus_tour.dart

Restart Run Expand

Example · editable Revert Format

class _ProgrammaticFocusTourState extends State<_ProgrammaticFocusTour> {
  final _searchFocus = FocusNode(debugLabel: 'search');
  String _lastAction = 'Focus search is focused';

  void _focusSearch() {
    _searchFocus.requestFocus();
    setState(() => _lastAction = 'Focus moved to Search files');
  }

  @override
  Widget build(BuildContext context) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text('PROGRAMMATIC FOCUS', style: CellStyle(bold: true)),
      const Text(
        'Press Enter on Focus search, then type.',
        style: CellStyle(dim: true),
      ),
      const SizedBox(height: 1),
      Row(
        children: [
          Button(
            text: 'Focus search',
            autofocus: true,
            onPressed: _focusSearch,
          ),
          const SizedBox(width: 2),
          SizedBox(
            width: 24,
            child: TextInput(
              focusNode: _searchFocus,
              semanticLabel: 'Search files',
              placeholder: 'Search files',
              onChanged: (query) => setState(() {
                _lastAction = 'Searching for "$query"';
              }),
            ),
          ),
        ],
      ),
      const SizedBox(height: 1),
      Text('last: $_lastAction'),
    ],
  );

  @override
  void dispose() {
    _searchFocus.dispose();
    super.dispose();
  }
}

Live preview

Live · interactive

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