Skip to content
Projects

Project

Interactive Demo Showcase

An example project page showing how a live Flutter app embeds right into the story.

· 1 min read
FlutterDartWeb
Loading demo…
Live demoOpen in new tab

Project pages can do something posts on most sites can’t: let the reader use the thing without leaving the page. The demo above is a live, embedded web app running in a phone frame — tap the button and watch it respond.

How the embedding works

  1. In your Flutter project, run flutter build web.
  2. Copy the contents of build/web/ into this site at public/demos/<name>/.
  3. Reference it in a post:
<FlutterEmbed src="/demos/weather-app" frame="phone" />

That’s it — the component handles the responsive sizing, lazy loading (the iframe only loads when scrolled near, so pages stay fast), a loading state, and an “open in new tab” fallback.

Or host the demo separately

For heavier builds, host the Flutter app on its own (its own Firebase Hosting site works nicely) and point the embed at the full URL — everything else stays the same.