Console · App Shell
Console · App Shell is a production-ready Console Flutter Web screen from FlutterKit Pro, installable with flutterkit add con-shell-appframe.
App Shell is the structural foundation of Console, a dark developer-tool-styled SaaS admin built for Flutter Web. It is the frame every other Console screen hangs off. The left sidebar is 240px wide and opens with a _LogoMarkPainter mark beside the 'Acme Inc / Pro · Production' workspace switcher, then grouped navigation — a MAIN group (Overview, Analytics, Users, Events, Revenue, Reports) and a WORKSPACE group (Integrations, Settings) — where the active row is painted with a #2A2540 selection fill and a 3px indigo #635BFF left indicator bar. A user footer pins an _AvatarMonogramPainter disc with the name and 'Owner' role. The top bar carries a ⌘K search field with a keyboard-hint chip, an environment pill with a live green status dot, a notifications bell whose count is drawn by _CountBadgePainter, a help icon and an avatar. The content region has a sticky page header — breadcrumb, 'Overview' h1, an outlined Export button and a filled 'New report' primary action — above a dashboard body: four KPI tiles, each with a value, a coloured delta and a _SparklinePainter micro-chart, then a two-column row pairing a _TrendChartPainter dual-series area chart (this week vs last week, with gridlines, weekday axis labels and a legend) against a _FunnelBarPainter signup funnel of four proportional bars. Responsiveness is the point: at ≥1024 the sidebar is fully expanded and the body is multi-column; between 768 and 1023 the sidebar collapses to a 72px icon rail; below 768 it disappears behind a hamburger Drawer and the KPI grid folds to a single column. Pure Flutter with bundled static-weight Inter, no packages and no network images — every graphic is a CustomPainter.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓A responsive AppShell with three breakpoint states — expanded 240px sidebar (≥1024), 72px icon rail (768–1023) and a hamburger Drawer (<768)
- ✓_LogoMarkPainter, _AvatarMonogramPainter and _CountBadgePainter — painted logo, initials avatar and notification count badge, no icon fonts or images
- ✓_TrendChartPainter — a dual-series area chart with gradient fills, gridlines, weekday axis labels and a legend
- ✓_SparklinePainter and _FunnelBarPainter — KPI micro-charts and a four-step proportional signup-funnel bar chart
- ✓A sticky page header with breadcrumb, h1, outlined Export and filled primary-action buttons
- ✓Injected onNavSection, onSearch, onWorkspace, onNotifications, onPrimaryAction and onProfile hooks — no hardcoded routing
Use cases
- ✓The base layout for a Flutter Web SaaS admin, analytics console or internal back-office tool
- ✓A desktop-first dashboard home showing KPIs, trends and a conversion funnel at a glance
- ✓A single shell reused across every page of an admin product, with the content region swapped per route
- ✓A responsive admin frame that has to work on desktop, tablet and phone from one codebase
