WhichKey

Wraps child and, once the user presses a leader key (Space, Ctrl+X) and the dispatcher is holding for the next step, shows a popup listing the available continuations — f Find file, b Buffers.

Learn more: Key handling

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

Usage

KeyBindings(
  bindings: <KeyBinding>[
    KeyBinding(KeySequence.space.f, label: 'Find file', onTrigger: (_) => findFile()),
    KeyBinding(KeySequence.space.b, label: 'Buffers', onTrigger: (_) => buffers()),
    KeyBinding(KeySequence.space.g, label: 'Git', onTrigger: (_) => git()),
  ],
  child: WhichKey(
    child: Focus(autofocus: true, child: editor),
  ),
)

Details

The popup appears only after showDelay of a sequence staying pending, so a fast completion (a vim dd in ~80 ms) never flashes it. It reads KeyBindings.pendingOf, so it updates as the sequence advances and vanishes the moment it completes, cancels, or times out.

Only completions whose binding carries a KeyBinding.label are listed; an unlabeled binding still fires but isn’t advertised. Unlike KeyHintBar, the popup lists a labeled binding even when it sets hideFromHintBar. For a custom layout, read KeyBindings.pendingOf directly instead of using this widget.

Constructors

WhichKey()

Parameter	Type	Default	Description
child:	Widget	required	The app (or subtree) the popup overlays. It shows through unchanged until a key sequence is pending, then the popup floats above it.
showDelay:	Duration	const Duration(milliseconds: 150)	How long a sequence must stay pending before the popup appears. Keeps fast sequences from flashing it.
maxCompletions:	int	12	Cap on how many completions the popup lists before collapsing the rest into a trailing +N more, so a leader with many bindings doesn’t produce a very tall popup. The cap is a count, not the screen height; lower it for short terminals.

Source

WhichKey is defined in packages/fleury/lib/src/catalog/which_key.dart.

Category: Input handling & focus · All widgets

Live demo

whichkey_example.dart

Restart Run Expand

Example · editable Revert Format

Widget example() => KeyBindings(
  bindings: <KeyBinding>[
    KeyBinding(KeySequence.space.f, label: 'Find file', onTrigger: (_) {}),
    KeyBinding(KeySequence.space.b, label: 'Buffers', onTrigger: (_) {}),
    KeyBinding(KeySequence.space.g, label: 'Git', onTrigger: (_) {}),
  ],
  // Zero delay so the popup appears the instant Space is pressed in the
  // demo; real apps keep the default (a short delay hides it for fast
  // completions).
  child: const WhichKey(
    showDelay: Duration.zero,
    child: Focus(autofocus: true, child: Text('Press Space, then a key')),
  ),
);

Live preview

Live · interactive

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