CommandPalette

A fuzzy command palette.

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

Usage

// Present it over the app; choosing a command closes it and runs it.
context.present<void>(
  CommandPalette(
    commands: [
      CommandPaletteItem(
        label: 'Open file…',
        shortcut: 'Ctrl-P',
        onInvoke: openFile,
      ),
      CommandPaletteItem(
        label: 'Toggle theme',
        category: 'View',
        onInvoke: toggleTheme,
      ),
      CommandPaletteItem(
        label: 'Run tests',
        shortcut: 'Ctrl-T',
        onInvoke: runTests,
      ),
    ],
  ),
);

// Or list the commands the app registered as AppCommands:
CommandPalette.open(context);

Details

When commands is provided, the palette is a fixed-list UI over callback commands.

Without commands, the palette reads the active CommandRegistry and surfaces AppCommands from the source command scope.

Apps that want a keyboard shortcut for the palette should register a normal AppCommand whose run passes the command context’s buildContext to CommandPalette.open, and set AppCommand.showInPalette to false so the opener does not list itself.

Type to narrow the list (exact matches first, then prefixes, substrings, and letters in order, ignoring case), Up and Down to move (wrapping at the ends), and Enter to run the highlighted command; a click runs the command clicked. A disabled command is dimmed and runs neither way. Esc dismissal comes from the modal route; the palette adds nothing there.

Constructors

`CommandPalette()`

Parameter	Type	Default	Description
`commands:`	`List<CommandPaletteItem>?`	—	Fixed callback commands to show. More
`sourceRegistry:`	`CommandRegistry?`	—	Registry to inspect for command rows. More
`sourceContext:`	`BuildContext?`	—	Context used for command visibility, enabled state, and invocation. More
`placeholder:`	`String`	`'Search commands…'`	Hint shown in the palette’s search field while it is empty.
`width:`	`int`	`50`	Width of the palette’s contents in terminal cells; the border adds one cell on each side.
`maxVisible:`	`int`	`8`	Maximum number of matching command rows shown before scrolling.

commands: When null, the palette uses the active CommandRegistry instead.
sourceRegistry: This is normally supplied by open so a palette rendered in an overlay can still surface commands from the widget tree that opened it.
sourceContext: This is intentionally separate from the palette’s overlay context. The overlay is only where the palette renders; sourceContext is where the user was acting when the palette opened.

Source

CommandPalette is defined in packages/fleury/lib/src/catalog/command_palette.dart.

Category: Navigation & overlays · All widgets

commandpalette_example.dart

Example · editable

Widget example() => CommandPalette(
  commands: <CommandPaletteItem>[
    CommandPaletteItem(
      label: 'Open file…',
      shortcut: 'Ctrl-P',
      onInvoke: () {},
    ),
    CommandPaletteItem(
      label: 'Toggle theme',
      category: 'View',
      onInvoke: () {},
    ),
    CommandPaletteItem(label: 'Run tests', shortcut: 'Ctrl-T', onInvoke: () {}),
    CommandPaletteItem(label: 'Git: commit', category: 'Git', onInvoke: () {}),
  ],
);

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs