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" />