Google's cross-platform UI toolkit has a Flutter on 'social development' with CodePen

"Social development environment" CodePen has unfurled support for Flutter, Google's open-source cross-platform framework for mobile and web.

CodePen is an online editor for HTML, CSS and JavaScript, intended for sharing design ideas, getting help with bugs, prototyping, or forming an online portfolio. A CodePen file is called a Pen, and is public by default. A Pen is limited to 1MB of code, but you can also create multi-file projects. Free users are limited to Pens, or one project with up to 10 files. Paying users get the option to mark their work as private, do collaborative editing, and eliminate ads. You can also use CodePen for deploying projects to production websites, though it is really optimised for demos and experiments.

The official guide for setting up a Flutter editor suggests using Android Studio, IntelliJ or Visual Studio Code, though any text editor will do. But online editors have advantages, with zero setup and easy use from iPads and Chromebooks as well as desktop PCs. There is an existing solution in the form of DartPad, for which Google announced Flutter support in December 2019. DartPad is limited, however, since you cannot directly save code; you have to copy and paste into a GitHub gist.

Flutter product manager Zoey Fan said CodePen's support builds on work done for DartPad. The heart of it is the open-source Dart Services, described as a "small, stateless Dart server". It provides features including static analysis, code completion, code formatting and documentation. CodePen is not directly aimed at mobile development, only web. "You can't compile to native platforms right here on CodePen. Our integration compiles Flutter apps to web apps you can use to learn the Flutter SDK and share anywhere on the web," said CodePen's co-founder Chris Coyier. Google's Material Components are built in, though, and you could export the code to a mobile project.

The Dart language, used by Flutter, was developed by Google and first announced in 2011. It compiles either to native code or JavaScript, making it suitable for cross-platform development that targets both web and mobile platforms. Flutter is another Google project announced in 2017 and reaching its 1.0 release in December 2018. The announcement came from Tim Sneath, formerly a Silverlight guy at Microsoft. Indeed, Flutter is in the same designer-focused tradition as predecessors like Windows Presentation Framework, Silverlight and Adobe Flash, but without the burden of a cross-platform runtime.

Google's Fuchsia OS Flutters into view: We're just trying out some new concepts, claims exec

READ MORE

Google appears to have invested substantially in the project. Flutter helps to further Google's ambitions in several ways. It is a nice framework for Android development, while in web guise it fits with the notion of raising the standard and capabilities of browser-based applications. What may prove even more important is that Flutter is the native framework for Fuchsia, a Google-developed operating system which may turn out to be a future alternative to Android or Chrome OS. Google has said little officially about its plans for Fuchsia, though you can glean plenty from reviewing the source code and documentation, or even install it on a device.

Flutter adoption is increasing and in the latest StackOverflow survey it scored over 75 per cent as a "loved" framework, third behind .NET Core and Torch/PyTorch in the "other frameworks" category. Redmonk analyst Stephen O'Grady, discussing language popularity, noted: "Dart has made some recent gains that are roughly correlated with a spike in popularity of the UI toolkit Flutter. Eighteen months ago, Dart checked in at #33. Since the Dart-based Flutter went 1.0 six months after that, the language has jumped all the way up to #24 in the latest rankings." This is happening, he said, despite "years of stagnation".

Provided that Google sustains its investment, it seems likely that both Dart and Flutter will continue to grow in popularity, and in that context the CodePen news looks like a neat way to showcase its abilities. ®