Console · Search Results
Console · Search Results is a production-ready Console Flutter Web screen from FlutterKit Pro, installable with flutterkit add con-nav-search-results.
Global Search Results is Console's unified search surface, showing matches from every object type in one ranked list. A sticky head pairs a back arrow (wired to onBack) with a filled search field echoing the live query 'acme', under a muted '8 results for “acme”' count line. Filter tabs follow — All 8, Users 3, Events 3, Reports 2 — each carrying its own count in a pill; the selected tab is filled indigo #635BFF while the rest sit on the dark surface with hairline borders, and selecting one filters the list in place via setState. Results are capped at 1000px and centred so the page stays readable on ultra-wide monitors. Every row is a _ResultTile: a rounded leading icon tile tinted per kind, a title, a muted subtitle, a _TypeBadge pill and a trailing meta string with a chevron. The three kinds are colour-coded end to end — indigo for users ('Aarav Mehta · aarav@acme.io · Active · Pro plan', 'Acme Corp (Org) · 48 members · $4.2k MRR', 'Priya Nair · Trial · 4 days left'), cyan for events ('acme_checkout_completed · 128,402 events · 30d', 'acme_signup_started', 'acme_feature_used · 2.1M events · 30d') and amber for reports ('Acme — Weekly growth · Owner: Rhea · Scheduled Mon 9:00', 'Acme — Revenue by plan · Owner: Dev · Shared'). Below 768px the tile drops its wide meta column and restacks into a compact card so nothing truncates awkwardly on a phone. Pure Flutter, bundled static-weight Inter, its own dark theme, SafeArea and ellipsis guards throughout; onResult is injected so the host app owns navigation.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓A sticky search head with back arrow, filled query field and a live '8 results for “acme”' count line
- ✓Count-bearing filter tabs (All / Users / Events / Reports) with an indigo selected state that filters the list in place
- ✓_ResultTile — a result row with tinted leading icon tile, title, subtitle, type badge, meta column and chevron
- ✓_TypeBadge — colour-coded kind pills: indigo users, cyan events, amber reports
- ✓A responsive tile that restacks into a compact card below 768px, plus a 1000px centred content cap
- ✓Injected onBack and onResult callbacks with bundled Inter and a self-contained dark theme
Use cases
- ✓The full-page results view behind a global search box in a SaaS admin console
- ✓A cross-object search that mixes people, analytics events and saved reports in one ranked list
- ✓A filterable results page where users narrow by object type without a new round trip
- ✓A search surface that has to stay usable from ultra-wide desktop down to a 390px phone
