flutterkit.app/con-nav-command-palette
Console · Command Palette — Console Flutter Web screen
Console
73 views

Console · Command Palette

Console · Command Palette is a production-ready Console Flutter Web screen from FlutterKit Pro, installable with flutterkit add con-nav-command-palette.

Command Palette is the ⌘K surface for Console, a dark developer-tool-styled SaaS admin. It renders as a full-screen dim overlay above the app: tapping the scrim fires onDismiss, while the panel itself swallows taps so a click inside never closes it. The panel is centred and capped at 620px wide, sitting on the #14171A surface with a hairline border, 16px radius and a deep drop shadow. Its head is a search row with a leading magnifier, a 'Type a command or search…' field and a trailing ESC chip. Below, results are grouped under small uppercase headers — RECENT ('Users — All active', 'Revenue — MRR breakdown'), NAVIGATE ('Go to Overview', 'Go to Analytics', 'Go to Events Explorer', 'Go to Settings') and ACTIONS ('Create report', 'Create funnel', 'Invite teammate', 'Export current view'). Each row pairs a rounded icon tile with an ellipsis-guarded label; rows that have a shortcut show a monospace-styled _KbdChip such as 'G O', 'G A' or 'C R' on the right, and the selected row is filled with the #2A2540 selection colour and shows a return-key glyph. A pinned footer hints the interaction model with ↑ ↓ navigate · ↵ select · esc close chips. The list scrolls independently, so the palette never overflows on short viewports. Pure Flutter and self-contained: bundled static-weight Inter, its own dark theme, SafeArea, no packages and no network images, with onSelect and onDismiss injected so the host app owns all behaviour.

Reveal the one-line command to drop this screen into your project.

Licensed for unlimited commercial projects · resale prohibited · License

What's included

  • A full-screen scrim overlay where tapping outside dismisses and tapping the panel does not
  • A 620px max-width centered palette panel with search row, ESC chip and a deep drop shadow
  • Grouped command rows under RECENT / NAVIGATE / ACTIONS headers with rounded leading icon tiles
  • _KbdChip keyboard-shortcut chips ('G O', 'G A', 'C R') and a selected-row state with a return glyph
  • A pinned footer hint bar — ↑ ↓ navigate, ↵ select, esc close
  • Injected onSelect and onDismiss callbacks plus bundled Inter and a self-contained dark theme

Use cases

  • A ⌘K / Ctrl-K quick launcher for navigating a Flutter Web admin or analytics console
  • A power-user action runner for creating reports, funnels or invites without leaving the keyboard
  • A recent-items jump list surfacing the screens and records a user touched most recently
  • A discoverability surface that teaches users the app's keyboard shortcuts as they browse

Related screens