- Client
- GrN.dk — flutter.grn.dk
- Sector
- Flutter / mobile and web apps
- Period
- July–August 2026
At a glance
flutter.grn.dk is a shelf of thirty small case studies, one per Flutter package worth knowing — routing, state management, animation, charts, maps, storage, i18n — and each one is a live demo the visitor can poke at, with the code beside it and real apps that use the package. There are no screenshots of Flutter on it: the site is itself the Flutter app, compiled for the web, with a real URL per case, a crawlable page behind each URL and a 3D “case park” where every case has its own stand.
The challenge
Flutter on the web has a reputation problem: a single canvas, no real URLs, nothing for a search engine to read, and demos that die the moment a package updates. A portfolio for Flutter work had to disprove that in the medium itself — deep links that behave like links, a back button that works, per-case metadata a crawler can index — while staying honest about what each package is good for, without inventing adopters. And it had to grow: the thirty cases were written in four batches over two months, so adding one had to be a registry entry, not a rebuild.
The solution
One registry (kCases) drives everything: the hub, the router, the counts, the sitemap and the park. Each case is a file with the demo widget, a why-it-matters section, the code sample and a list of real-world examples — adopters named only where their own pubspec or a vendor publication confirms it, otherwise phrased as a pattern with the canonical docs linked; a test asserts every case has at least two, all https, no duplicates. The deploy script builds the app, generates a static HTML page per case with its own title, description, Open Graph tags and canonical URL, syncs to the server, reloads it, purges the CDN and checks every URL — including that a made-up one still returns 404.
The park (/world) is a free-roam hub drawn with a single CustomPainter and plain perspective — no 3D package, because none is dependable on Flutter web yet — with six zones derived from the cases’ tags and one billboard stand per case; a new case plants its own stand.
The results
Thirty cases live, each with a shareable URL and a proper page behind it, 32 URLs in the sitemap, and a test suite that fails if a case is malformed, an example is missing or the registry drifts. The hub’s “in the pipeline” section hides itself when the queue is empty — which it is — and queuing the next batch is one string.
It is the other half of the Flutter story on this site: the Mit Håndværk case is about shipping an app to two stores, this one is about what goes into building one.
