KeyHintBar

A one-line bar listing the labeled key bindings active for the current focus, as [key] label · [key] label. It updates when focus moves.

Learn more: Key handling

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

Usage

KeyBindings(
  bindings: <KeyBinding>[
    KeyBinding(KeyCode.char('s'), label: 'Save', onTrigger: (_) => save()),
    KeyBinding(KeyCode.char('q'), label: 'Quit', onTrigger: (_) => quit()),
  ],
  child: Column(
    children: [
      // The bar lists the bindings above whatever holds focus.
      Expanded(child: Focus(autofocus: true, child: editor)),
      const KeyHintBar(),
    ],
  ),
)

Details

When the width runs out, it shows as many whole hints as fit and collapses the rest into a trailing +N, rather than clipping a label mid-word or silently dropping hints. The deepest (most local) bindings come first, so the outermost ones are the first to collapse. A binding with aliases (KeyBinding(↑, aliases: [↓], …)) shows a combined key: [↑↓] move.

A binding appears only when it has a label, does not set hideFromHintBar: true, and is enabled. When two scopes bind the same key, the nearer (deeper) binding is shown. While focus is in a dialog shown with context.present, or inside any other KeyBindings(modal: true), the bindings outside it aren’t shown: keys don’t reach them.

Constructors

KeyHintBar()

Parameter	Type	Default	Description
maxBindings:	int	12	Hard cap on how many bindings are considered, applied before width fitting. Anything past the fitted width or this cap collapses into a trailing +N — so extra bindings degrade visibly rather than vanishing.
separator:	String	' · '	Separator between bindings. Default: ' · '.
style:	CellStyle	CellStyle.none	Style applied to the description text (and separators / +N marker).
keyStyle:	CellStyle?	—	Style for the [key chord] portion of each hint, so the chord reads distinctly from its description. Defaults to the theme’s focus color in bold, layered on style.

Source

KeyHintBar is defined in packages/fleury/lib/src/catalog/key_hint_bar.dart.

Category: Input handling & focus · All widgets

Live demo

keyhintbar_example.dart

Restart Run Expand

Example · editable Revert Format

Widget example() => KeyBindings(
  bindings: <KeyBinding>[
    KeyBinding(KeyCode.char('s'), label: 'Save', onTrigger: (_) {}),
    KeyBinding(KeyCode.char('r'), label: 'Run', onTrigger: (_) {}),
    KeyBinding(KeyCode.char('q'), label: 'Quit', onTrigger: (_) {}),
  ],
  child: const Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Focus(autofocus: true, child: Text('Focused editor')),
      SizedBox(height: 1),
      KeyHintBar(),
    ],
  ),
);

Live preview

Live

ⓘ how this demo runs ⛶ Expand