CodePen Tag

CodePen is adding the support for Flutter

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.

pic courtesy : medium.com

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.

pic courtesy : medium.com

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.

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.

pic courtesy: medium.com

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”, 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.

pic courtesy: medium.com

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

pic courtesy: medium.com

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!

pic courtesy: medium.com

pic courtesy: medium.com

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.

For more information and to develop mobile apps using Flutter, Hire Flutter Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Flutter, please visit our technology page.

Content Source:

1. medium.com