Flutter: the first UI platform designed for ambient computing

December 11, 2019


Link copied to clipboard
Posted by the Flutter team

We’re writing to you from Flutter Interact, our biggest Flutter event to date, where we’re making a number of announcements about Flutter, including a new updated release and a series of partnerships that demonstrate our commitment to supporting the ever-growing ecosystem around Flutter.

From Device-centric to App-centric development

Our original release for Flutter was focused on helping you build apps that run on iOS and Android from a single codebase. But we want to go further.

We live in a world where internet-connected devices are pervading every area of our lives. Many of us transition throughout the day between multiple devices: phones, watches and other wearable devices, tablets, desktop or laptop computers, televisions and increasingly, smart displays such as the Google Nest Hub.

In this emerging world, the focus starts to move away from any individual device towards an environment where your services and software are available wherever you need them. We call this ambient computing, and it’s core to our vision for Flutter: a portable toolkit for building beautiful experiences wherever you might want to paint pixels on the screen.

Flutter for ambient computing hero image

With Flutter, instead of being forced to start your app development by asking “which device am I targeting?”, we want you to be able to begin by focusing on what you want to build. In this multi-device, multi-platform world, Flutter aims to provide a framework and tooling for creating user experiences without compromise on any device or form factor. The Dart-powered Flutter engine supports fast development with stateful hot reload, and fast performance in production with native compilation, whether it is running on mobile, desktop, web, or embedded devices.

If you’re a startup, Flutter lets you test your idea on your total addressable market, rather than being forced to target just one user base due to a lack of resources. If you’re a larger company, Flutter lets you consolidate your team’s resources onto shipping a single experience, reusing code across mobile, web and desktop as you see fit. Flutter is unique in supporting such a diversity of natively-compiled experiences from a single codebase.

It’s been great to see how Flutter has flourished in the short time since its initial release. Well over a million developers are already using Flutter for apps both large and small. In GitHub’s 2019 State of the Octoverse report, Dart and Flutter ranked #1 and #2 for fastest-growing language and open source project respectively over the last twelve months, and Flutter is now one of the ten most starred software repos on their site. And in a recent analysis by LinkedIn, Flutter is described as “the fastest-growing skill among software engineers”.

The rest of this article talks about our progress towards this ambient computing vision, and specifically focuses on the announcements we made today to help designers and developers collaborate together on stunning visual experiences built with Flutter.

Flutter on mobile, desktop, and web

Today at Flutter Interact, we are announcing Flutter 1.12, our latest stable release of the Flutter framework. This latest quarterly release represents the work of hundreds of contributors from inside and outside Google, and brings new performance improvements, more control over adding Flutter content to existing apps, and updates to the Material and Cupertino libraries. We also have a new Google Fonts package that provides direct access to almost 1,000 open sourced font families, putting beautiful typography within reach in just a line of code. More information about what’s new in Flutter 1.12 can be found in our dedicated blog post on the Flutter Medium channel.

Google is increasingly using Flutter for mobile app development, thanks to the productivity benefits it offers for multiplatform development. At Interact, the Stadia team showcased their app, running on both iOS and Android from the same codebase and built with Flutter. Talking about their experiences, the team had this to say:

“As Stadia was initially investigating mobile, Flutter enabled us to prototype quickly, demonstrate gameplay on Android, and then staff one team to build our cross-platform experience without compromise. We’re delighted with the results and are continuing to build new features in Flutter.”

Stadia

Of course, many companies outside Google are also using Flutter for their app development. Splice provides a library of millions of sounds, loops, and presets that help musicians bring their ideas to life. When they decided to add a mobile app to supplement their existing desktop experience, they chose Flutter because, as they put it: “Speed to validate our product hypothesis was critical. We are a small team, so we needed a single solution that could deliver an equally great experience to all our users on iOS and Android.”

Within six weeks, they had built a prototype that validated their choice, and their new mobile experience is live in both the Apple Store and the Google Play Store:

mobile experience

Adding a mobile experience is already showing results, with a significant percentage of purchases now coming through their mobile app. And with Flutter providing consistency across multiple platforms, they’re now experimenting with bringing some of the same experiences into their desktop app.

On the subject of desktop, we’ve made much progress with macOS support. For the first time, you can use the release mode to build a fully-optimized macOS application using Flutter, and we’ve been working to expand the Material design system in Flutter to support apps that are designed for desktop-class form factors. More information on building for desktop can be found at flutter.dev/desktop.

Flutter gallery window

Lastly, we’re delighted to announce the beta release of Flutter’s web support, adding stability and maturity over the previews that we shipped earlier this year. It’s now possible to build and consume web plug-ins, enabling Flutter apps to take advantage of a growing ecosystem of Dart components for everything from Firebase to the latest web APIs. Since we announced our early adopter program a couple of months ago, we’ve been working with customers like Journey to test web-based experiences with Flutter, and now we’re ready for a broader set of developers to start building web content with Flutter. More information on Flutter’s web support can be found at flutter.dev/web and at the companion blog article that was published today.

explore page

All this is possible thanks to Dart, the programming language and platform that powers Flutter across an array of ambient computing experiences. Dart is somewhat unique in offering develop-mode and release-mode toolchains for ARM, Intel, and JavaScript, enabling native compilation to almost any platform you could want to target. Today we’re releasing Dart 2.7, which adds new capabilities to the Dart language including extension methods. You can find more information about these features on the Dart blog. We’ve also released an update to DartPad that allows users to not only edit Flutter code, but also to run it and view the rendered UI.

Flutter as a canvas for creative exploration

We focused our event this year primarily on the creative technologists, prototypers, interactive designers, and visual coders. A core motivation for building Flutter was that we don’t think multi-platform development should require compromise on visual quality. We see Flutter as a canvas for creative expression and exploration, since it removes many of the restrictions that visually-oriented developers have often faced. Flutter’s stateful hot reload feature makes it easy to make changes and see the results in real-time; and with every pixel drawn by Flutter, you can blend UI, graphical content, text and video with custom animations and transformations.

In preparing for this event, we’ve been particularly inspired by the work of Robert Felker, a digital artist who has created a series of generative art explorations with Flutter that combine geometry, texture and light in stunning ways. We never envisioned Flutter being used to create images like this, but it speaks to the expressive power of Flutter, combined with artistic creativity, that the image on the right below is generated with less than 60 lines of Dart code:

Flutter art by digital artist Robert Felker

Today we’re honored to be joined by several partners who are launching tools for designers to more fully participate in the creative process of building Flutter applications.

Supernova has integrated Flutter into their design and prototyping tool, with animation support, Material Design integration, and an updated interface designed for Flutter. They also announced a new browser-based tool, Supernova Cloud, which is built entirely with Flutter’s web support.

Supernova app

Rive (previously 2Dimensions, who published the Flare graphics tool) announced that they’re consolidating their company name and product into one brand. They unveiled their new company and product name, Rive, as well as a number of new product features. Perhaps the most notable feature in Rive is support for importing Lottie files created with Adobe After Effects, enabling deeper integration of Flutter into existing workflows for animated content. Rive now supports real-time dynamic layering effects like drop shadows, inner shadows, glows, blurs, and masking.

Rive eliminates the need to recreate designs and animations in code, greatly simplifying the designer-to-developer handoff. This means that designers are free to iterate and make changes at any time. And because it outputs real assets that integrate directly with Flutter, not just MP4 videos or GIF images, Rive allows you to create sophisticated and dynamic interactions, game characters, animated icons, and onboarding screens.

Lastly, another big endorsement of Flutter as a canvas for creatives comes from Adobe, who are announcing Flutter support in Creative Cloud with a plugin that exports designs from Adobe XD into Flutter. Adobe XD, Adobe’s user experience design platform, allows product design teams to design and prototype user experiences for mobile, web, desktop, and beyond. Instead of simply handing off design specs and leaving development teams to understand and interpret a designer’s vision, the new XD-to-Flutter plugin automatically converts XD designs into code that is immediately usable as part of your Flutter application development.

Flutter support in Creative Cloud

The XD to Flutter plugin will be available as open source early next year. You can find out more about XD to Flutter and sign up for early access on Adobe’s website. We’re thrilled to partner with Adobe; their pedigree in extensible design tooling will give product designers a huge head start in creating amazing Flutter experiences.

Conclusion

Flutter is at its heart an open source project. The value we derive for Google comes in part from the productivity gains realized by other product teams inside the company who use Flutter, but we build Flutter with you and for you, knowing that a larger ecosystem and community benefits us all. Our journey thus far has broadened from our original mobile-centric release to incorporate a wider range of form factors, and we continue to invest in designer and developer tools that increase both the productivity and the beauty of your finished application.

But what perhaps brings us the greatest satisfaction is when Flutter helps an individual turn their idea into a completed work that they can share with the world. The story in the below video of one family is a touching tribute to all those who have made Flutter possible, whether by contributing code, bug reports or fixes, or sharing knowledge with others in the community. We’re so grateful to be on this journey with you!