Announcing CodePen support for Flutter

Zoey Fan
Zoey Fan
Apr 15 · 4 min read
Image for post
Image for post

Today we’re excited to announce that CodePen, the leading social development environment for millions of front-end developers and designers, is adding support for Flutter! For web developers CodePen has long been a great place for sharing design explorations, new techniques, and ideas. Now with the introduction of Flutter, CodePen enables a new audience to learn, share and promote their creativity.

In the words of Alex Vazquez, one of the co-founders of CodePen:

“CodePen has been a big fan of Flutter and the Dart programming language for years. We’re pretty pumped that Flutter now supports mobile and the web. The Flutter community is growing fast, which is why we’re excited to support Flutter with its own custom CodePen editor! Flutter is officially a first-class member of the CodePen community. We can’t wait to see what you build with Flutter on CodePen.”

Since the inception of Flutter, we’ve designed it as a canvas for creative expression. It has been encouraging to see growing recognition of its design capabilities, from the partnerships we announced with Adobe and SuperNova at our design-orientated Flutter Interact event, to the naming of Flutter as one of the most important design ideas of the decade by Fast Company. With the new addition of a CodePen-based Flutter environment, creative professionals can now leverage CodePen to discover artistic Flutter inspirations, build up impressive Flutter portfolios, and showcase amazing Flutter ideas to the world!

CodePen’s Flutter editor is built on top of the same backend service, dart-services, that currently powers DartPad (the web-based editor created by the Flutter and Dart teams that has been recently updated to support Flutter). When we built DartPad, we designed it to be an educational tool to help developers learn Flutter and Dart, and share code snippets with each other. We specifically decided to open-source dart-services so that sites like CodePen could tailor it to new scenarios and audiences.

DartPad is an excellent tool for quickly testing an idea in code, or for sharing your snippet with other developers, and it’s useful for reproducing (and filing) bugs. You can do this in CodePen, too, but CodePen has the advantage of an active design community where you can share, comment, promote, try out design ideas, and get input from other designers. CodePen’s Flutter editor is more like your “right brain” that you use to prototype ideas for creative expression and design inspiration, while DartPad is more like your “left brain” when you need to quickly test an idea or code up a technical concept.

Image for post
Image for post
“Light effect” animation by Mariano Zorrilla

Flutter editor on CodePen

Let’s take a quick tour of the Flutter editor on CodePen. You can create a new Flutter pen (CodePen’s term for “code snippet”) either from scratch or from an existing template. Many thanks to our esteemed Flutter community members (@aednlaxer, @ayushnishad, @diegoveloper, @divyanshub024, @egorbelibov, @gskinnerTeam, @mkiisoft, @orestesgaolin, @SlaxXxX, and others) for contributing some cool samples to the template list.

Let’s start with the “GooeyEdge” template. As you can see, the Flutter code is on the left side, and Flutter’s web output is on the right side. You can play with this interactive design by dragging the edge of the visual using your mouse.

Image for post
Image for post
“Gooey edge” animation by Grant Skinner

You can also make changes to the Flutter code, and see them take effect accordingly. For example, if we change the color of the page control indicator from “white” to “blue” (line 326), you can see the color gets updated within a few seconds! CodePen automatically recompiles your code each time you make a change. Just update a line, wait a few seconds, and the new output appears.

Image for post
Image for post
Page control indicator changed into blue

Now let’s see what happens if I introduce a syntax error. Say I accidentally delete a semicolon at the end of line 1. I’ll immediately see a red bar warning of the syntax error. This allows you to easily spot and correct mistakes.

Image for post
Image for post
Warning message when introducing a syntax error

Social features

What we particularly love about CodePen is the social and community features it offers. Once you create a new pen or discover Flutter “pens” created by the community, you can save, favorite, add to a collection, share on social media, or even fork to create your own version!

Image for post
Image for post
Image for post
Image for post

Give it a try!

We hope this new Flutter playground on CodePen empowers you to build and showcase your cool Flutter animations, ideas, vignettes, and more. Please share your designs with us on Twitter using #FlutterPen. We can’t wait to see what you build! If you missed last week’s announcement about free training, you might want to check that out. And keep an eye out: we’ll have more news very soon.

Flutter

Flutter is Google's mobile UI framework for crafting…

Zoey Fan

Written by

Zoey Fan

Product Manager for Flutter, Google

Flutter

Flutter

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Zoey Fan

Written by

Zoey Fan

Product Manager for Flutter, Google

Flutter

Flutter

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store