Zapp!
Zapp! is a free online Dart & Flutter sandbox that lets you run Dart code in the browser. It's great for sharing code snippets in your documentation.
Embedding Zapp!#
Use the <Zapp>
component and pass the ID of the Zapp! you want to embed.
<Zapp id="flutter" />
Lazy Loading#
To prevent the sandbox from loading until the user interacts, pass the lazy
prop.
<Zapp lazy id="flutter" />
From GitHub#
To load a Zapp! from GitHub, set the id
prop to github/<path>
.
<Zapp id="github/roaa94/flutter_3d_calculator" />
You can also pass a path relative to the root of the repository.
<Zapp id="github/rrousselGit/riverpod/tree/master/packages/flutter_riverpod/example" />
From GitHub Gists#
To load a Zapp! from a GitHub Gist, set the id
prop to gist/<id>
.
Gist: https://gist.github.com/flutterdevrelgists/ecabed4a17a3aad8bee7c6327e472fc8
Zapp:
<Zapp id="gist/ecabed4a17a3aad8bee7c6327e472fc8" />
Final product:
From Pub#
To load a Zapp! from a https://pub.dev example, set the id
prop to pub/<package>
or pub/<package>/<version>
.
<Zapp id="pub/http" />
<Zapp id="pub/http/0.13.4" />