BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Flutter Now Runs in Codepen Code Playgrounds

Flutter Now Runs in Codepen Code Playgrounds

This item in japanese

Bookmarks

Zoey Fan, product manager for Flutter, recently announced that Codepen, a popular online code playground, is now supporting Flutter. Flutter developers interested in sharing code snippets, or developers interested in quickly trying Flutter out without installation nor setup, can interactively write Flutter code in a Codepen window and observe the web output in another one.

Developers may now create Flutter code snippets from existing templates or from scratch:

Flutter codepen templates

As usual with Codepen, developers will be able to enter their code in a dedicated window, and have a separate output window display application resulting from the code running. As developers make changes in the code, the output window will, after a few seconds, update to reflect the result of the changes. Syntax errors in the code are additionally reflected in the code windows with warning messages.

The new Codepen functionality leverages the existing, recently open-source backend service that powers DartPad, an online code playground that can run Dart and Flutter code. While DartPad and Codepen overlap in some functionalities, Codepen is home to an active and socially-minded design community that uses Codepen to try out ideas, share, promote and get feedback from other designers. Codepen thus proposes social sharing and discovery features that are not replicated in DartPad.

Those social features may be useful to promote and extend the Flutter community at a time when Flutter is striving to cover the implementation of mobile, web, and desktop applications from a single source base. The Flutter team encourages developers and designers to build up their Codepen portfolios, showcase their ideas and share their designs on Twitter using the #FlutterPen tag.

Some Twitter users expressed their enthusiasm, one of them wishing to have Flutter also support the codesandbox playground, in addition to Codepen. While noting that performance in codepens can be improved, a reddit user remained optimistic about Flutter cross-platform vision:

I think the performance, especially in codepen, seems week.

But I see the hard work that they put into the beta version of the web. And for me the hope that it will really work later out of the box for every environment is impressive.

Rate this Article

Adoption
Style

BT