How to Create DartPad Examples from GitHub Gists

DartPad makes it easy to share your Dart & Flutter samples using GitHub gists.

Here's how to do it in three steps.

1. Put all your code inside a single file

If you're starting directly from Dartpad, you can skip this step since you'll already have all your code in one file.

But if you have a local Dart or Flutter project, you'll want to put all your code inside main.dart.

2. Create a new Gist

Head over to gist.github.com to create a new gist with all your code:

Creating a new public gist on GitHub
Creating a new public gist on GitHub

Once you've done this, you can already share your gist by sharing the URL with everyone.

But it's even better if you turn it into a DartPad!

3. Open it in Dartpad

All you have to do is to copy the gist ID:

Copy the gist ID from the URL
Copy the gist ID from the URL

Then, open dartpad.dev and append the gist ID to the URL.

Example: https://dartpad.dev/?id=cefdf4d717150397401cfe345ab6f383

This will load your code and let you run it as usual:

Dartpad with gist ID
Dartpad with gist ID

Supported Packages on DartPad

Did you know that you can import popular packages directly inside DartPad?

Just click on the small info button in the lower right corner and you'll get a list of supported packages, along with their versions:

Dartpad supported packages
Dartpad supported packages

This already includes provider, riverpod, bloc, and some Firebase packages too!

Bonus: Embed DartPad in a Web Page

You can easily embed your DartPad on your site using an iframe.

For example, here's how I use it in my online courses:

<iframe width="100%" height="800px" src="https://dartpad.dev/embed-flutter.html?&split=50&theme=dark&id=408331308d26bdbb3361ecb98a50bd12"></iframe>

For a full list of options, see the Embedding Guide on the DartPad Wiki.

Conclusion

DartPad + GitHub gists gives you a convenient way to share small Dart or Flutter examples, and you can even embed them on your site.

For larger projects, you can just create a public GitHub repo as usual.

In any case, sharing is caring! 😉

Happy coding!

Want More?

Invest in yourself with my high-quality Flutter courses.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

The Complete Flutter Course Bundle

The Complete Flutter Course Bundle

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a full-stack Flutter eCommerce app on iOS, Android, and web.

Flutter Animations Masterclass - Full Course

Flutter Animations Masterclass - Full Course

Master Flutter animations and build a completely custom habit tracking application.