Focus

Makes its subtree focusable: wires a FocusNode into the tree so the widget can hold keyboard focus and join Tab and arrow traversal.

Learn more: Focus management

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

Usage

// A custom control becomes one focus stop. Handle its keys outside the
// Focus: keys travel from the focused node up through its ancestors.
KeyBindings(
  bindings: [
    KeyBinding(KeySequence.enter, label: 'Play', onTrigger: (_) => play()),
  ],
  child: const Focus(child: TrackRow()),
)

// In TrackRow's build, reading Focus.of rebuilds it when focus changes:
final focused = Focus.of(context).hasFocus;
return Text(focused ? '▸ Track 1' : '  Track 1');

Details

In its simplest form: Focus(autofocus: true, child: ...). Pass your own focusNode to move focus from code or to read FocusNode.hasFocus. Handle keys with KeyBindings, whose shortcuts the hint bar can list, or with KeyDetector inside a custom control.

Constructors

Focus()

Parameter	Type	Default	Description
focusNode:	FocusNode?	—	The node this widget attaches to the tree. Pass your own, created and disposed by your State, to move focus from code or to read FocusNode.hasFocus; when null, the widget creates and disposes one.
autofocus:	bool	false	Whether this node takes focus when it first mounts. It does so only when nothing in its enclosing FocusScope (or, outside any scope, nothing in the app) has focus yet, and never for a node that can’t take focus or that traversal skips.
canRequestFocus:	bool?	—	Whether the node can take focus. A non-null value makes this widget the owner of the node’s FocusNode.canRequestFocus flag, including on a caller-provided focusNode: the value is applied when this widget mounts and each time it rebuilds. Null leaves the flag to the node, which is focusable by default. More
skipTraversal:	bool?	—	Whether traversal should skip this node while still allowing it to take focus through a click or an explicit FocusNode.requestFocus call. More
debugLabel:	String?	—	Optional diagnostic label included when the internally owned node is printed or inspected.
child:	Widget	required	The widget subtree represented by this focus target.

• canRequestFocus: While this widget owns the flag, don’t also set it on the node directly (the next rebuild overwrites it), and don’t let two Focus widgets manage one node. Setting it to false while the node has focus clears focus. An applied value stays on the node after this widget unmounts; to keep your own value across uses of a node, pass null and set the flag on the node.
• skipTraversal: When null, this widget leaves the node’s existing value unchanged.

Source

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

Category: Input handling & focus · All widgets

Live demo

focus_example.darttrack_row.dart

Restart Run Expand

Example · editable Revert Format

class _FocusExampleState extends State<_FocusExample> {
  static const _tracks = ['Intro', 'Night drive', 'Outro'];
  String _playing = 'nothing';

  @override
  Widget build(BuildContext context) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      for (final (i, track) in _tracks.indexed)
        // Each row is one focus stop. Keys travel from the focused node up
        // through its ancestors, so Enter reaches the focused row's binding.
        KeyBindings(
          bindings: [
            KeyBinding(
              KeySequence.enter,
              label: 'Play',
              onTrigger: (_) => setState(() => _playing = track),
            ),
          ],
          child: Focus(autofocus: i == 0, child: _TrackRow(track)),
        ),
      const SizedBox(height: 1),
      const Text(
        'Tab or arrows move · Enter plays',
        style: CellStyle(dim: true),
      ),
      Text('Playing: $_playing'),
    ],
  );
}

Live preview

Live · interactive

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