Blog.

How to get rich Dart/Flutter code blocks in your blog

If you've read any of my previous blog posts you'll know that I'm a big fan of interactive demos in my blog posts.

I'm also a big fan of Flutter so it would be great if I could get the same richness using flutter code examples.

This post lays out a couple of different ways you can make that happen!

DartPad Gists

DartPad is a utility for embedding an interactive Dart (and Flutter if desired) editor via iframe.

The simplest way to get a live Dart/Flutter example on your page is to plop your code into a Gist and reference it on your site like so:

<iframe style="width: 100%; height: 500px" src="https://dartpad.dev/embed-flutter.html?id=[YOUR_GIST_ID]"></iframe>

results in the following:

There are a bunch of ways you can tweak your DartPad so check out their wiki for the full set of configurable options.

They don't presently allow hiding the code altogether or opting for a horizontal stacking of the code and the result which I think would be preferable for narrow devices but it's still pretty sweet.

Note: One of the configuration options is to set the breakdown between the code and the live demo, but for some reason I have been unable to get it to respect that configuration. As a result, all of the examples on this page have the code awkwardly squished to one side.

DartPad Code Blocks

The gists are nice if you just want a one off code block, but for something like a blog it can be kind of annoying to maintain a bunch of different gists and keep them in sync as you're editing the blog. More recently, DartPad has added support for dynamic creation of DartPads in page for declared code blocks.

Basically, you mark up that a section of your page is Dart code, and you embed their JS script on your page and it will find your Dart code and auto-magically DartPad-ify it!

So, for example, the following source code placed in my markdown file

<pre>
    <code class="language-run-dartpad:theme-light:mode-flutter:split-0">
        import 'package:flutter/material.dart';
        main() =&gt; runApp(Container(child: Center(child: Container(color: Colors.green, height: 50, width: 50, child: Text(":)")))));
    </code>
</pre>

results in the following output:

    
        import 'package:flutter/material.dart';
        main() => runApp(Container(child: Center(child: Container(color: Colors.green, height: 50, width: 50, child: Text(":)")))));

Again, for whatever reason, my current configuration gives sub-optimal layout where all the code is completely squished to one side.

Embed a Live Flutter App

The prior two solutions are great if you want the user to be able to see and edit the code but what if you want to just show the resulting app without the code along side?

The high effort solution here is to deploy the Flutter web project publicly and iframe into the deployed flutter app.

Using s3 the steps are as follows:

  • Compile your Flutter Web App
  • Create a new s3 bucket (allowing objects to be public)
  • Drop the static files generated by Flutter into the root of your new bucket (again making sure you have public read permissions)
  • Get the URL for the index.html file (e.g. https://mattkeller-dino-game.s3.amazonaws.com/index.html)

And you're ready to reference your Flutter Web App from your web page.

For example, here is an embedded version of the Chrome Dino game I made with Flutter a little while back:

So there you go, couple of different options for embedding live Dart/Flutter on the web!