Embedding Flutter Applications in Websites Using DartPad
Article Summary
Jose Alba from Google's Material team shows how to turn your Flutter apps into embeddable web demos. No hosting required—just GitHub and DartPad.
Flutter now runs on web, and DartPad (Google's browser-based Dart playground) supports Flutter apps. This tutorial walks through embedding live, interactive Flutter demos directly into websites using GitHub Gists or repos, letting users see both code and running app simultaneously.
Key Takeaways
- Two embedding methods: GitHub Gists for single files or repos for multi-file projects
- Convert any Gist URL to DartPad by replacing domain with dartpad.dev/gistID
- Use embed-flutter.html?id= prefix to create iframe-ready Flutter demos
- Requires only main.dart and dartpad_metadata.yaml for basic multi-file setups
- No separate hosting needed—GitHub serves the code, DartPad runs it
You can now embed fully functional Flutter apps in documentation or blogs using just GitHub and DartPad's embed URLs, eliminating the need for separate hosting infrastructure.
About This Article
Developers hit a wall when trying to share Flutter web apps on DartPad. They were stuck with a single Dart file, couldn't customize pubspec settings, and had no way to import non-Dart libraries or plugins.
Jose Alba created a tutorial that showed how to use a GitHub repository with dartpad_metadata.yaml and multiple Dart files like main.dart, test.dart, and solution.dart. This approach let developers work around DartPad's limitations while still sharing code easily.
Two methods emerged for different needs. Gists work well for simple demos, while repositories handle complex projects. Together they removed the need for separate hosting, so developers can now embed working Flutter applications directly into websites using iframe URLs.