Flutter

You can now use CodePen to create and share UI for Flutter on the web

Kyle Bradshaw | Apr 15 2020 - 11:00 am PT

One of the most satisfying things to do after you’ve created a cool new design is to find a way to show it off, and for web developers, one of the best ways to do that is through CodePen. Today, Google is announcing a partnership between CodePen and Flutter to let developers easily create and share their designs online.

Whether you’re looking for a place to just quickly prototype an idea or share your latest project with the world at large, CodePen is a great way to write and play with web apps using just your web browser. Starting today, in addition to making standard web apps, you can now use CodePen in combination with Flutter’s recent web support to also create Flutter apps right in the browser.

Of course, developing with Flutter on the web is nothing new. At the end of last year, Flutter support launched in Google’s own online Dart development playground DartPad. In fact, Google has shared that CodePen’s Flutter capabilities are actually built on the same “dart-services” backend as DartPad, which means CodePen should be able to handle nearly anything you can throw at it.

To that end, Google has enlisted the help of the Flutter community to create and share some fantastic “pens” — what CodePen calls each shareable project — to act as demonstrations of how well Flutter can run in the browser and how complex of an application demo you can build with just your browser.

What makes the CodePen support so great is that you can start with a public Flutter pen, make some changes to personalize it to your tastes and needs, and see those changes almost instantly reflected on-screen. I actually tried out the Flutter support myself and found it to be more than ready for any developer looking to fiddle with Flutter for the first time or even experienced developers who want to test something out without creating a full project.