A closer look at building a Flutter web app with Google Developer products
If you attended Google I/O this year, you probably stopped by the Google I/O photo booth for a selfie with our Google Developer mascots: Flutter’s Dash, Android Jetpack, Chrome’s Dino, and Firebase’s Sparky. If you didn’t, it’s not too late to jump in, take a selfie, and share it on social media! We loved seeing all of the pictures you posted and your favorite props! Want to learn more about building a camera plugin, layouts, and gestures used in a photo booth for Flutter on the web?
It took a combination of Google developer products to make the photo booth successful. The Flutter and Firebase teams joined forces to build a best in class example of Flutter on the web that used Firebase for hosting, auth, performance monitoring, and social sharing. Take a closer look at how the photo booth was built here and then grab the open source code on Github!
Flutter team members having fun in the photo booth!
Posted by Brian Shen, Program Manager, Google Developers
Google Developer Groups are one of the largest community networks of developers in the world. Every group has an organizer that helps curate events based on the interests of their local developer community.
As we continue to explore how different Google Developer Groups build their communities, we interviewed Hebe He, an organizer of Google Developer Group Guangzhou in China. Learn more about how she is building the developer scene in China, thinking up new events for her community, and more below.
Hebe He, an organizer of Google Developer Group Guangzhou in China.
Tell us about yourself.
I am Hebe from China and I’m a native of Guangzhou. I’m the organizer of GDG Guangzhou, as well as an ambassador for Women Techmakers (WTM). I work at one of China’s new electric-vehicle brands, where I’m responsible for the intelligent business operation of the Internet of Vehicles. I’m relatively outgoing and active, so I really like to deal with different people, whether it’s at work or in other activities.
How did you learn about Google Developer Groups?
In 2014, I participated in GDG Guangzhou DevFest for the first time by coincidence and met the founder of GDG Guangzhou. Afterward, I joined the founder’s company and volunteered at many GDG programs. In 2017, I officially became an organizer after the existing organizers recognized my ability and desire to contribute more to the GDG Guangzhou community.
Tell us more about Guangzhou and the developer community there.
Our community members are talented, passionate, and amazing. I see all kinds of possibilities in them. They’re always excited for every event we hold, keep a fanatical attitude toward Google’s technological innovation, and are particularly interested in Android, Kotlin, and Flutter.
What are events like in your community?
We highly value feedback from event participants, who are interested in a wide range of topics. For this reason, we generally use 15% of every event to cover non-technical topics, such as entrepreneurship, business management, and careers. For more comprehensive activities, such as DevFest, we increase the amount of non-technical content to roughly 30%.
What is your Google Developer Group focused on right now?
We devote most of our energy to improving the quality of activities. We try to add more elements to the event to strengthen the interaction of participants in hopes of improving the feedback mechanism and gaining more valuable suggestions for future event optimization. We also try to improve the quality of guests and themes, and pay more attention to event details, such as event announcements, registration, and check-in.
What’s your favorite community memory from a Google Developer Group event?
The memory that touches me the most is the construction of WTM Guangzhou. From the first event with only 80 developers to the audience of more than 500 people in recent years, it represents the recognition of, and support for, our events. There are many people who come to participate every year; some are actively encouraging their friends to participate and others are even urging us to hold events. They feel honored to be invited to our events and their enthusiasm endured during the pandemic.
What’s next for you and your Google Developer Group?
There’s still lots of room to grow in our community. We hope that we can continue to develop a Google Developer Group that reflects the best of Guangzhou. We also hope to find better ways to accumulate the experience shared by speakers and the value of community users.
Our next generation of Flutter, built for web, mobile, and desktop
Today, we’re announcing Flutter 2: a major upgrade to Flutter that enables developers to create beautiful, fast, and portable apps for any platform. With Flutter 2, you can use the same codebase to ship native apps to five operating systems: iOS, Android, Windows, macOS, and Linux; as well as web experiences targeting browsers such as Chrome, Firefox, Safari, or Edge. Flutter can even be embedded in cars, TVs, and smart home appliances, providing the most pervasive and portable experience for an ambient computing world.
Our goal is to fundamentally shift how developers think about building apps, starting not with the platform you’re targeting but rather with the experience you want to create. Flutter allows you to handcraft beautiful experiences where your brand and design comes to the forefront. Flutter is fast, compiling your source to machine code, but thanks to our support for stateful hot reload, you still get the productivity of interpreted environments, allowing you to make changes while your app is running and see the results immediately. And Flutter is open, with thousands of contributors adding to the core framework and extending it with an ecosystem of packages.
In Flutter 2, released today, we’ve broadened Flutter from a mobile framework to a portable framework, unleashing your apps to run on a wide variety of different platforms with little or no change. There are already over 150,000 Flutter apps out there on the Play Store alone, and every app gets a free upgrade with Flutter 2 because they can now grow to target desktop and web without a rewrite.
Customers from all around the world are using Flutter, including popular apps like WeChat, Grab, Yandex Go, Nubank, Sonos, Fastic, Betterment and realtor.com. Here at Google, we’re depending on Flutter, and over a thousand engineers at Google are building apps with Dart and Flutter. In fact, many of those products are already shipping, including Stadia, Google One, and the Google Nest Hub.
Google Pay switched to Flutter a few months ago for their flagship mobile app, and they already achieved major gains in productivity and quality. By unifying the codebase, the team removed feature disparity between platforms and eliminated over half a million lines of code. Google Pay also reports that their engineers are far more efficient, with a huge reduction in technical debt and unified release processes such as security reviews and experimentation across both iOS and Android.
Flutter on the web
Perhaps the single largest announcement in Flutter 2 is production-quality support for the web.
The early foundation of the web was document-centric. But the web platform has evolved to encompass richer platform APIs that enable highly sophisticated apps with hardware-accelerated 2D and 3D graphics and flexible layout and paint APIs. Flutter’s web support builds on these innovations, offering an app-centric framework that takes full advantage of all that the modern web has to offer.
This initial release focuses on three app scenarios in particular:
Progressive web apps (PWAs) that combine the web’s reach with the capabilities of a desktop app.
Single page apps (SPAs) that load once and transmit data to and from internet services.
Bringing existing Flutter mobile apps to the web, enabling shared code for both experiences.
In the last months, as we prepared for the stable release of web support, we made lots of progress on performance optimization, adding a new CanvasKit-powered rendering engine built with WebAssembly. Flutter Plasma, a demo built by community member Felix Blaschke, showcases the ease of building sophisticated web graphics experiences with Dart and Flutter that can also run natively on desktop or mobile devices.
We’ve been extending Flutter to offer the best of the web platform. In recent months, we added text autofill, control over address bar URLs and routing, and PWA manifests. And because desktop browsers are as important as mobile browsers, we added interactive scrollbars and keyboard shortcuts, increased the default content density in desktop modes, and added screen reader support for accessibility on Windows, macOS, and Chrome OS.
Some examples of web apps built with Flutter are already available. Among educators, iRobot is well known for their popular Root educational robots. Flutter’s production support for the web allows iRobot to take their existing educational programming environment and move it to the web, expanding its availability to Chromebooks and other devices where the browser is the best choice. iRobot’s blog post has all the details on their progress so far and why they chose Flutter.
Another example is Rive, who offers designers a powerful tool for creating custom animations that can ship to any platform. Their updated web app, now available in beta, is built entirely with Flutter, and is a love letter to all that Flutter can offer in this environment.
You can find out more about Flutter on the web from our dedicated blog post over at our Medium publication.
Flutter 2 on desktops, foldables, and embedded devices
Beyond traditional mobile devices and the web, Flutter is increasingly stretching out to other device types, and we highlighted three partnerships in today’s keynote that demonstrate Flutter’s portability.
To start with, Canonical is partnering with us to bring Flutter to desktop, with engineers contributing code to support development and deployment on Linux. During today’s event, the Ubuntu team showed an early demo of their new installer app that was rewritten with Flutter. For Canonical, it is critical that they can deliver rock-solid yet beautiful experiences on a huge variety of hardware configurations. Moving forward, Flutter is the default choice for future desktop and mobile apps created by Canonical.
Secondly, Microsoft is continuing to expand its support for Flutter. In addition to an ongoing collaboration to offer high-quality Windows support in Flutter, today Microsoft is releasing contributions to the Flutter engine that support the emerging class of foldable Android devices. These devices introduce new design patterns, with apps that can either expand content or take advantage of the dual-screen nature to offer side-by-side experiences. In a blog post from the Surface engineering team, they demonstrate their work and invite others to join them in completing a high-quality implementation that works on Surface Duo and other devices.
Lastly, Toyota, the world’s best-selling automaker, announced its plans to bring a best-in-market digital experience to vehicles, by building infotainment systems powered by Flutter. Using Flutter marks a large departure in approach from how in-vehicle software has been developed in the past. Toyota chose Flutter because of its high performance and consistency of experience, fast iteration and developer ergonomics as well as smartphone-tier touch mechanics. By using Flutter’s embedder API, Toyota is able to tailor Flutter for the unique needs of an in-vehicle system.
We’re excited to continue our work with Toyota and others to bring Flutter to vehicles, TVs, and other embedded devices, and we hope to share further examples in the coming months.
Today we’re announcing the beta release of Google Mobile Ads for Flutter, a new SDK that works with AdMob and AdManager to offer a variety of ad formats, including banner, interstitial, native, and rewarded video ads. We’ve been piloting this SDK with several key customers, such as Sua Música, the largest music platform for independent artists in Latin America, and we’re now ready to open the Google Mobile Ads for Flutter SDK for broader adoption.
We’re also announcing updates to our Flutter plug-ins for several core Firebase services: Authentication, Cloud Firestore, Cloud Functions, Cloud Messaging, Cloud Storage, and Crashlytics, including support for sound null safety and an overhaul of the Cloud Messaging package.
Dart: The secret sauce behind Flutter
As we’ve noted, Flutter 2 is portable to many different platforms and form factors. The easy transition to supporting web, desktop, and embedded is thanks in large part to Dart, Google’s programming language that is optimized for multiplatform development.
Dart combines a unique set of capabilities for building apps:
Iterative development with stateful hot reload on desktop and mobile, as well as language constructs designed for the asynchronous, concurrent patterns of modern UI programming.
Google-class performance across all of these platforms, with sound null safety guaranteeing null constraints at runtime as well as during development.
Dart 2.12, available today, is our largest release since 2.0, with support for sound null safety. Sound null safety has the potential to eradicate dreaded null reference exceptions, offering guarantees at development and runtime that types can only contain null values if the developer expressly chooses. Best of all, this feature isn’t a breaking change: you can incrementally add it to your code at your own pace, with migration tooling available to help you when you’re ready.
There’s far more to say about Flutter 2 than we can include in this article. In fact, the raw list of pull requests merged is a 200 page document! Head over to the separate technical blog on Flutter 2 for more information about the many new features and performance improvements that we think will please existing Flutter developers, and download it today.
We also have a major new sample that showcases everything we just mentioned, built in collaboration with gskinner, an award-winning design team based in Edmonton, Canada. Flutter Folio is a scrapbooking app that is designed for all your devices. The small-screen experience is designed for capturing content; larger screens support editing with desktop- and tablet-specific idioms; and the web experience is tailored for sharing. All these tailored experiences share the same codebase, which is open source and available for you to peruse.
If you haven’t yet tried Flutter, we think you’ll find it to be a major upgrade for your app development experience. In Flutter, we’re offering an open source toolkit for building beautiful and fast apps that target mobile, desktop, web, and embedded devices from a single codebase, built both to solve Google’s demanding needs and those of our customers.
Flutter is free and open source. We’re excited to see what you build with Flutter 2!
Happy New Year folks. It’s the perfect time of year to learn something new! Do you have an app idea you’ve been dreaming of over the holidays? If so, we have just the opportunity for you! Starting February 1st, leading up to our big event on March 3rd, join us for #30DaysOfFlutter to kickstart your learning journey and meet Flutter experts in the community. Whether you are building your first Flutter app or looking to improve your Flutter skills, we have curated content, code labs, and demos!
Flutter is Google’s open source UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. It’s one of the fastest growing, most in-demand cross platform frameworks to learn and is used by freelance developers and large organizations around the world. Flutter uses the Dart language, so it will feel natural to many of you familiar with object-oriented languages.
Jump in, the water’s fine!
Along with the curated content, we will also have four live AskMeAnything sessions (#AMAs), where you can meet members of Google’s Flutter team and community. You can also join us on the FlutterDev Discord channel, where you can meet the other members of the community, ask and answer questions, and maybe make some new Flutter friends too!
Posted by Jennifer Kohl, Program Manager, Developer Community Programs
On October 16-18, thousands of developers from all over the world are coming together for DevFest 2020, the largest virtual weekend of community-led learning on Google technologies.
As people around the world continue to adapt to spending more time at home, developers yearn for community now more than ever. In years past, DevFest was a series of in-person events over a season. For 2020, the community is coming together in a whole new way – virtually – over one weekend to keep developers connected when they may want it the most.
The magic of DevFest comes from the people who organize and speak at the events – developers with various backgrounds and skill levels, all with their own unique perspectives. In different parts of the world, you can find a DevFest session in many local languages. DevFest speakers are made up of various types of technologists, including kid developers , self-taught programmers from rural areas , and CEOs and CTOs of startups. DevFest also features a wide range of speakers from Google, Women Techmakers, Google Developer Experts, and more. Together, these friendly faces, with many different perspectives, create a unique and rich developer conference.
The sessions and their mission
Hosted by Google Developer Groups, this year’s sessions include technical talks and workshops from the community, and a keynote from Google Developers. Through these events, developers will learn how Google technologies help them develop, learn, and build together.
At our core, Google Developers believes community-led developer events like these are an integral part of the advancement of technology in the world.
For this reason, Google Developers supports the community-led efforts of Google Developer Groups and their annual tentpole event, DevFest. Google provides esteemed speakers from the company and custom technical content produced by developers at Google. The impact of DevFest is really driven by the grassroots, passionate GDG community organizers who volunteer their time. Google Developers is proud to support them.
During DevFest 2019, 138,000+ developers participated across 500+ DevFests in 100 countries. While 2020 is a very different year for events around the world, GDG chapters are galvanizing their communities to come together virtually for this global moment. The excitement for DevFest continues as more people seek new opportunities to meet and collaborate with like-minded, community-oriented developers in our local towns and regions.
Join the conversation on social media with #DevFest.
Posted by David Ko, Engineering Director; Jeff Lim, Software Engineer; Pankaj Gupta, Director of Engineering; Will Horn, Software Engineer
Three years ago, when we launched Google Pay India (then called Tez), our vision was to create a simple and secure payment app for everyone in India. We started with the premise of making payments simple and built a user interface that made making payments as easy as starting a conversation. The simplicity of the design resonated with users instantly and over time, we have added functionality to help users do more than just make payments. Today users can pay their bills, recharge their phones, get loans instantly through banks, buy train tickets and much more all within the app. Last year, we also launched the Spot Platform in India, which allows merchants to create branded experiences within the Google Pay app so they can connect with their customers in a more engaging way.
As we looked at scaling our learnings from India to other parts of the world, we wanted to focus on a fast and efficient development environment, which was modern and engaging with the flexibility needed to keep the UI clean. And more importantly one that enabled us to write once and be able to deploy to both iOS and Android reaching the wide variety of users.
It was clear that we would need to build it, and ensure that it worked across a wide variety of payment rails, infrastructure, and operating systems. But with the momentum we had for Google Pay in India, and the fast evolving product features – we had limited engineering resources to put behind this effort.
After evaluating various options, it was easy to pick Flutter as the obvious choice. The three things that made it click for us were:
We could write once in Dart and deploy on both iOS and Android, which led to a uniform best-in-class experience on both Android and iOS;
Just-in-Time compiler with hot reload during development enabled rapid iteration on UI which tremendously increased developer efficiency; and
Ahead-of-time compilation ensured high performance deployment.
Now the task was to get it done. We started with a small team of three software engineers from both Android and iOS. Those days were focused and intense. To start with we created a vertical slice of the app — home page, chat, and payments (with the critical native plugins for payments in India). The team first tried a hybrid approach, and then decided to do a clean rewrite as it was not scalable.
We ran a few small sprints for other engineers on the team to give them an opportunity to rewrite something in Flutter and provide feedback. Everyone loved Flutter — you could see the thrill on people’s faces as they talked about how fast it was to build a user interface. One of the most exciting things was that the team could get instant feedback while developing. We could also leverage the high quality widgets that Flutter provided to make development easier.
After carefully weighing the risks and our case for migration, we decided to go all in with Flutter. It was a monumental rewrite of a moving target, and the existing app continues to evolve while we were rewriting features. After many months of hard work, Google Pay Flutter implementation is now available in open beta in India and Singapore. Our users in India and Singapore can visit the Google Play Store page for Google Pay to opt into the beta program and experience the latest app built on Flutter. Next, we are looking forward to launching Google Pay on Flutter to everyone across the world on iOS and Android.
We hope this gives you a fair idea of how to approach and launch a complete rewrite of an active app that is used by millions of users and businesses of all sizes. It would not have been possible for us to deliver this without Flutter’s continued advances on the platform. Huge thanks to the Flutter team, as today, we are standing on their shoulders!
When fully migrated, Google Pay will be one of the largest production deployments on the Flutter platform. We look forward to sharing more learnings from our transition to Flutter in the future.
Summary: Flutter Interact is happening on December 11th. Sign up here for our global livestream and watch it atg.co/FlutterInteract. Google’s conference focusing on beautiful designs and apps, Flutter Interact, is streaming worldwide on December 11. Flutter Interact is a day dedicated to creation and collaboration. Whether you are a web developer, mobile developer, front-end engineer, UX designer, or designer, this is a good opportunity to hear the latest from Google. This one-day event has several talks focused on different topics regarding development and design. Speakers include Matias Duarte, VP of Google Design; Tim Sneath, Group PM for Flutter and Dart; and Grant Skinner, CEO, GSkinner, Inc.
What to expect at Flutter Interact
Flutter Interact will focus on creating eye-catching experiences across devices. We’ll showcase the latest from Google Design and from Flutter, Google’s free and open source UI toolkit to build beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. This event is tailored to a global audience, with a worldwide livestream, hundreds of viewing parties, and the opportunity to ask questions that are answered at the event.
It will include content and announcements from the Material Design and Flutter teams, partners, and other companies.
Tune in to the livestream
Go to g.co/FlutterInteract and sign up for livestream updates. The event will be broadcasted on the website on Dec 11, with a keynote starting at 10:00 a.m. EST (GMT-5). You can also add this event directly to your Google Calendar.
Get Involved with #AskFlutter and #FlutterInteract
Flutter Interact is geared toward our online audience. There are two main ways to get involved.
The official event hashtag. We will have a social wall that is constantly showing tweets coming in with #FlutterInteract, both on site and on our livestream. Make sure to tweet your pictures, comments, videos, and thoughts while you experience Flutter Interact.
Our team will be on site, live, answering questions in real time. Tweet your questions and comments with the #AskFlutter hashtag to connect with the Flutter team (and the open source community), and get your questions answered. Your tweet may also appear on the global livestream during the event.
We are grateful to experience Flutter Interact with you on December 11th. In the meantime, follow us on twitter at @FlutterDev and get started with Flutter at flutter.dev.
Posted by Martin Aguinis, Flutter Marketing LeadFlutter Clock is a contest offered by Google, with participation from the Flutter, Google Assistant, and Lenovo teams, that challenges you to build a Flutter clock face application for the Lenovo Smart Clock that is beautiful and innovative. Whether you’re a Flutter expert or novice, we invite you to join us and see what you can create. Over $10,000 in prizes will be awarded to the winners! Visit flutter.dev/clock to enter.
High Level Details
Date: All entries must be submitted by January 20, 2020 11:59 PM PST (GMT-8).
Winners: Submissions will be rated by Google and Flutter expert judges against the following rubric: visual beauty, code quality, novelty of idea, and overall execution.
Prizes: Potential prizes include a fully loaded iMac Pro, Lenovo Smart Display, and Lenovo Smart Clock. Also, all complete and valid submissions will receive a digital certificate of completion. In addition, some of the clock contest submissions might be integrated into the Lenovo Smart Clock’s lineup of clock faces, or used as inspiration for future clock faces!
Results will be announced at our Mobile World Congress 2020 Keynote.
Posted by Chris Sells, PM for the Flutter developer experience
This week is a big one for Flutter! Today, at Google Developer Days, our flagship conference for Chinese developers, we used the keynote to announce our latest stable release: Flutter 1.9. This release is our biggest update yet with more than 1,500 PRs from more than 100 contributors. The new features and updates span a wide range, from support for macOS Catalina and iOS 13 to improved tooling support, as well as new Dart language features and new Material widgets.
At the keynote, we also announced a major milestone for Flutter’s web support, with the successful integration of Flutter’s web support into the main Flutter repository, allowing developers to write for mobile, desktop and web with the same codebase. And we showcased Tencent, one of the largest worldwide internet brands, who are using Flutter in a growing number of their mobile apps.
Let’s take a deeper look at this week’s news, starting with what’s new in Flutter 1.9.
Supporting macOS Catalina and iOS 13
As Apple prepares to release Catalina, the latest version of macOS, we’ve worked hard to make sure that Flutter is ready for you to upgrade. We’ve updated the end-to-end tooling experience to ensure it works well on Catalina and with Xcode 11. This includes adding support for the new Xcode build system, enabling 64-bit support throughout the toolchain, and simplifying platform dependencies.
Finally, in the latest development builds, you can now turn on experimental support for Bitcode, which is Apple’s platform-independent intermediate representation of a compiled program. Submitting your app as Bitcode allows Apple to optimize your binary in the future without resubmission, and opens the door to Flutter potentially supporting platforms like watchOS and tvOS that require Bitcode for app submission.
New Material widgets
The Material components and features also get an upgrade in Flutter 1.9. Material is one of the world’s leading open-source design systems, providing a comprehensive, flexible set of building blocks for implementing interactive user experiences across many platforms.
In this release, we provide several new widgets including ToggleButtons (left) and ColorFiltered (right).
The ToggleButtons widget bundles a row of ToggleButton widgets together, often composed of a set of Icon and Text widgets, to form a set of buttons with fully customizable look and behavior. Do you want single selection or multi-select? Do you want to require at least one selection or allow none? Do you want square or rounded edges, thick or thin borders, icons or text, etc? You can see some of these options above on the left and see how they’re implemented in the ToggleButtons sample.
As shown in the image above on the right, the ColorFiltered widget allows you to recolor a tree of child widgets just like you can recolor an image using one of several different algorithms (some of which are shown in the example screenshot above). This has many uses, for example, handling color blindness accessibility issues for your users. To see this in action, check out the ColorFiltered sample.
Worldwide language support
We’ve also added support for 24 new languages, from Afrikaans to Zulu.
Dart 2.5 release
The end-to-end developer experience depends not just on the features of Flutter but also on the underlying language itself. As part of the Flutter 1.9 release, we are also releasing Dart 2.5. Dart 2.5 includes a pre-release of Foreign Function Interface (FFI) support, providing native extensions so Dart can call directly into code written in C. It also introduces machine learning-powered code completions for the IDE. You can learn about both of these and more in the Dart 2.5 announcement.
With this release, new projects default to Swift instead of Objective-C and Kotlin instead of Java for iOS and Android projects respectively. Since many packages are written with Swift, making it the default language removes manual work for adding those packages to an app created with the default options. Swift 5 is ABI stable, and thanks to app thinning work Apple has done in recent releases, the Swift dynamic libraries no longer need to be included in the distribution package for iOS 12.2 or greater, reducing the size of Swift applications compared to previous releases.
And as Kotlin is now the default language for new projects in Android Studio, it seems natural to make the language switch for Android also. These options are now the default for both the flutter CLI tool and the IntelliJ/Android Studio and VS Code plugins for Flutter, but you can always switch back to Objective-C or Java if you prefer.
Additionally, we’ve been working to improve Flutter’s error messages by making them more readable, more concise and more actionable.
The Flutter User Experience team has led the charge on this project; you can read the details in a separate blog post covering the work on structured error display. We’ve just started to apply these new patterns, and you can expect more error messages to take advantage of this work in coming releases.
Flutter on the web
And finally, we are very happy to announce that the flutter_web repository is deprecated now that web support has been merged into the main flutter repository! What this means is that if you have the latest builds of Flutter from the master or dev channel, you can target the web with the latest experimental version of Flutter by running flutter run -d chrome.
When you create a project, Flutter now creates a web runner via a minimal web/index.html file that bootstraps your web-compiled Flutter code. With that file in place, you can use the Flutter CLI tool or the IDE plugins to edit and run Flutter apps on the web.
Above is a screenshot of VS Code with web support enabled for Flutter. Notice the web/index.html file, along with the dropdown list allowing you to choose Chrome as your target development device. Support for web output with Flutter is still at an early phase, but this release represents a major step forward towards enabling production support for web development with Flutter.
At the end of July, we announced an early adopter program designed to get a group of select Flutter applications deployed to production on the web over the next six to twelve months. We received over 1,000 submissions to the program. Unfortunately, we don’t have the capacity to support everyone who applied to join the program, but now web support is merged into the Flutter framework, we’re excited that everyone can now experiment with this capability.
Some community experiments have already showcased Flutter’s web output:
Flutter Widget Livebook (left) is built with Flutter for web and shows Flutter widgets running live in your browser. Panache (right) is a tool for creating themes for Flutter which you can then download and drop directly into your code.
We’re thrilled to see continuing fast growth and adoption of for Flutter. Here at Google, hundreds of developers are working on more than twenty projects using Flutter, including some that are released and many that are still in development. At GDD China this week, we highlighted how Tencent, one of the largest internet brands, is using Flutter pervasively for a wide variety of projects:
Switching gears to something just for fun, if you have Google Assistant on your phone or one of the Google Nest Hub devices, try saying “OK Google. Talk to Flutter Widget Quiz.” We loved seeing this community-powered quiz that tests your knowledge of Flutter.
We love the support we’ve received from the developer community, whether in the form of blogs and articles, published apps or issues and code contributions. For more details on upgrading to Flutter 1.9, including details on how to fix any breaking changes that you might experience as you migrate your code, check out the detailed Flutter 1.9 release notes.
Chrome OS is the fast, simple, and secure operating system that powers Chromebooks, including the Google Pixelbook and millions of devices used by consumers and students every day. The latest Flutter release adds support for building beautiful, tailored Chrome OS applications, including rich support for keyboard and mouse, and tooling to ensure that your app runs well on a Chromebook. Furthermore, Chrome OS is a great developer workstation for building general-purpose Flutter apps, thanks to its support for developing and running Flutter apps locally on the same device.
Flutter is a great way to build Chrome OS apps
Since its inception, Flutter has shared many of the same principles as Chrome OS: productive, fast, and beautiful experiences. Flutter allows developers to build beautiful, fast UIs, while also providing a high degree of developer productivity, and a completely open-source engine, framework and tools. In short, it’s the ideal modern toolkit for building multi-platform apps, including apps for Chrome OS.
Flutter initially focused on providing a UI toolkit for building apps for mobile devices, which typically feature touch input and small screens. However, we’ve been building keyboard and mouse support into Flutter since before our 1.0 release last December. And today, we’re pleased to announce that Flutter for Chrome OS is now stronger with scroll wheel support, hover management, and better keyboard event support. In addition, Flutter has always been great at allowing you to build apps that run at any size (large screen or small), with seamless resizing, as shown here in the Chrome OS Best Practices Sample:
The Chrome OS best practices sample in action
The Chrome OS Hello World sample is an app built with Flutter that is optimized for Chrome OS. This includes a responsive UI to showcase how to reposition items and have layouts that respond well to changes in size from mobile to desktop.
Because Chrome OS runs Android apps, targeting Android is the way to build Chrome OS apps. However, while building Chrome OS apps on Android has always been possible, as described in these guidelines, it’s often difficult to know whether your Android app is going to run well on Chrome OS. To help with that problem, today we are adding a new set of lint rules to the Flutter tooling to catch violations of the most important of the Chrome OS best practice guidelines:
The Flutter Chrome OS lint rules in action
When you’re able to put these Chrome OS lint rules in place, you’ll quickly be able to see any problems in your Android app that would hamper it when running on Chrome OS. To learn how to take advantage of these rules, see the linting docs for Flutter Chrome OS.
But all of that is just the beginning — the Flutter tools allow you to develop and test your apps directly on Chrome OS as well.
Chrome OS is a great developer platform to build Flutter apps
No matter what platform you’re targeting, Flutter has support for rich IDEs and programming tools like Android Studio and Visual Studio Code. Over the last year, Chrome OS has been building support for running the Linux version of these tools with the beta of Linux on Chrome OS (aka Crostini). And, because Chrome OS also supports Android natively, you can configure the Flutter tooling to run your Android apps directly without an emulator involved.
The Flutter development tools running on Chrome OS
All of the great productivity of Flutter is available, including Stateful Hot Reload, seamless resizing, keyboard and mouse support, and so on. Recent improvements in Crostini, such as high DPI support, Crostini file system integration, easier adb, and so on, have made this experience even better! Of course, you don’t have to test against the Android container running on Chrome OS; you can also test against Android devices attached to your Chrome OS box. In short, Chrome OS is the ideal environment in which to develop and test your Flutter apps, especially when you’re targeting Chrome OS itself.
Customers love Flutter on Chrome OS
With its unique combination of simplicity, security, and capability, Chrome OS is an increasingly popular platform for enterprise applications. These apps often work with large quantities of data, whether it’s a chart, or a graph for visualization, or lists and forms for data entry. The support in Flutter for high quality graphics, large screen layout, and input features (like text selection, tab order and mousewheel), make it an ideal way to port mobile applications for the enterprise. One purveyor of such apps is AppTree, who use Flutter and Chrome OS to solve problems for their enterprise customers.
“Creating a Chrome OS version of our app took very little effort. In 10 minutes we tweaked a few values and now our users have access to our app on a whole new class of devices. This is a huge deal for our enterprise customers who have been wanting access to our app on Desktop devices.”
–Matthew Smith, CTO, AppTree Software
By using Flutter to target Chrome OS, AppTree was able to start with their existing Flutter mobile app and easily adapt it to take advantage of the capabilities of Chrome OS.
Today marks an important milestone for the Flutter framework, as we expand our focus from mobile to incorporate a broader set of devices and form factors. At I/O, we’re releasing our first technical preview of Flutter for web, announcing that Flutter is powering Google’s smart display platform including the Google Home Hub, and delivering our first steps towards supporting desktop-class apps with Chrome OS.
From Mobile to Multi-Platform
For a long time, the Flutter team mission has been to build the best framework for developing mobile apps for iOS and Android. We believe that mobile development is ripe for improvement, with developers today forced to choose between building the same app twice for two platforms, or making compromises to use cross-platform frameworks. Flutter hits the sweet spot of enabling a single codebase to deliver beautiful, fast, tailored experiences with high developer productivity for both platforms, and we’ve been excited to see how our early efforts have flourished into one of the most popular open source projects.
As we started to home in on our 1.0 release last year, we began experimenting with broadening the scope of Flutter to other platforms. This was triggered both by internal teams within Google who are increasingly relying on Flutter, as well as the latent potential of the Dart platform for delivering portable experiences. In particular, a small team who were already building a web framework for Dart for internal usage started an exploratory project (codename “Hummingbird”) to evaluate the technical merits of porting the Flutter engine to support the standards-based web.
In parallel, the core Flutter project has been making progress to enable desktop-class apps, with input paradigms such as keyboard and mouse, window resizing, and tooling for Chrome OS app development. The exploratory work that we did for embedding Flutter into desktop-class apps running on Windows, Mac and Linux has also graduated into the core Flutter engine.
A Portable UI Framework for All Screens
It’s worth pausing for a moment to acknowledge the business potential of a high-performance, portable UI framework that can deliver beautiful, tailored experiences to such a broad variety of form factors from a single codebase.
For startups, the ability to reach users on mobile, web, or desktop through the same app lets them reach their full audience from day one, rather than having limits due to technical considerations. Especially for larger organizations, the ability to deliver the same experience to all users with one codebase reduces complexity and development cost, and lets them focus on improving the quality of that experience.
With support for mobile, desktop, and web apps, our mission expands: we want to build the best framework for developing beautiful experiences for any screen.
Flutter for Web
This week, we are releasing the first technical preview of Flutter for the web. While this technology is still in development, we are ready for early adopters to try it out and give us feedback. Our initial vision for Flutter on the web is not as a general purpose replacement for the document experiences that HTML is optimized for; instead we intend it as a great way to build highly interactive, graphically rich content, where the benefits of a sophisticated UI framework are keenly felt.
To showcase Flutter for the web, we worked with the New York Times to build a demo. In addition to world-class news coverage, the New York Times is famous for its crossword and other puzzle games. Since avid puzzlers want to play on whatever device they’re using at the time, their development team was attracted to Flutter as a potential solution for their needs. Discovering that they could reach the web with the same code was a huge boon. At Google I/O this week, you can get a sneak peek of their newly refreshed KENKEN puzzle game, which runs with the same code on Android, iOS, web, Mac, and Chrome OS.
Here’s what Eric von Coelln, Executive Director of Puzzles at the New York Times has to say about their experiences with Flutter:
“The New York Times Crossword has more than 400,000 stand-alone subscriptions and is a daily ritual for puzzle solvers. Along with the Crossword, we’ve grown our portfolio of digital puzzles that reaches more than two million solvers each month.
We were already beginning to explore Flutter as a potential solution to the challenge of quickly developing engaging, high-quality mobile experiences. Now the addition of being able to publish to web makes Flutter an even more appealing option to quickly deploy across all of our user platforms. This update of our old Flash-based KenKen game into a multi-platform playable experience is something we’re excited to bring to our solvers this year.”
There’s lots more to say about Flutter for web than we have space for here, so check out the dedicated article about Flutter for web on the Flutter blog.
At this early stage, we’re eager to get your feedback on how you’d like to use Flutter for web. We expect to rapidly evolve the code, with a particular focus on performance, and harmonizing the codebase with the rest of the Flutter project.
Flutter for Mobile Devices
The core Flutter framework also receives an upgrade this week, with the immediate availability of Flutter 1.5 in our stable channel. Flutter 1.5 includes hundreds of changes in response to developer feedback, including updates for new App Store iOS SDK requirements, updates to the iOS and Material widgets, engine support for new device types, and Dart 2.3 featuring new UI-as-code language features.
As the framework itself matures, we’re investing in building out the supporting ecosystem. The architectural model of Flutter has always prioritized a small core framework, supplemented by a rich package community. In the last few months, Google has contributed production-quality packages for web views, Google Maps, and Firebase ML Vision, and this week, we’re adding initial support for in-app payments. And with over 2,000 open source packages available for Flutter, there are options available for most scenarios.
One particularly exciting project that we’re announcing this week at I/O is the ML Kit Custom Image Classifier. Built using Flutter and Firebase, it offers an easy-to-use app-based workflow for creating custom image classification models. You can collect training data using the phone’s camera, invite others to contribute to your datasets, trigger model training, and use trained models, all from the same app.
Flutter continues to grow in popularity and adoption. A growing roster of demanding customers including eBay, Sonos, Square, Capital One, Alibaba and Tencent are developing apps with Flutter. And they’re having fun! Here’s what Larry McKenzie, a senior developer at eBay had to say about Flutter:
“Flutter is fast! Features that once took us multiple days to implement can be finished in a single day. Many problems we used to spend a lot of time on, simply no longer occur. Our team can now focus on creating more polished user experiences and delivering functionality. Flutter is enabling us to exceed expectations!”
Another quickly growing Flutter platform is Chrome OS, with millions of Chromebooks being sold every year, particularly in education. Chrome OS is a perfect environment for Flutter, both for running Flutter apps, and as a developer platform, since it supports execution of both Android and Linux apps. With Chrome OS, you can use Visual Studio Code or Android Studio to develop a Flutter app that you can test and run locally on the same device without an emulator. You can also publish Flutter apps for Chrome OS to the Play Store, where millions of others can benefit from your creation.
Flutter for Embedded Devices
As the final example of Flutter’s portability, we offer Flutter embedded on other devices. We recently published samples that demonstrate Flutter running directly on smaller-scale devices like Raspberry Pi, and we offer an embedding API for Flutter that allows it to be used in scenarios including home, automotive and beyond.
Perhaps one of the most pervasive embedded platforms where Flutter is already running is on the smart display operating system that powers the likes of Google Home Hub.
Within Google, some Google-built features for the Smart Display platform are powered by Flutter today. And the Assistant team is excited to continue to expand the portfolio of features built with Flutter for the Smart Display in the coming months; the goal this year is to use Flutter to drive the overall system UI.
We often get asked by developers how they can get started with Flutter. We are pleased today to announce a comprehensive new training course for Flutter, built by The App Brewery, authors of the highest-rated iOS training course on Udemy. Their new course has over thirty hours of content for Flutter, including videos, demos and labs, and with Google’s sponsorship, they are announcing today a time-limited discount of this course from the retail price of $199 to just $10.
Many developers are creating inspiring apps with Flutter. In the run-up to Google I/O, we ran a contest called Flutter Create to encourage developers to see what they could build with Flutter in 5KB or less of Dart code. We had over 750 unique entries from around the world, with some amazing examples that pushed what we imagine would be possible in such a small size.
Today, we’re announcing the winners, which can be found on flutter.dev/create. Congratulations to the overall winner, Zebiao Hu, who wins a fully-loaded iMac Pro worth over $10,000!
Flutter is no longer a mobile framework, but a multi-platform framework that can help you reach your users wherever they are. We can’t wait to see what you’ll build with Flutter on the web, desktop, mobile, and beyond!
Flutter 1.2 is the first feature update for Flutter. We’ve focused this release on a few major areas:
Improved stability, performance and quality of the core framework.
Work to polish visual finish and functionality of existing widgets.
New web-based tooling for developers building Flutter applications.
Having shipped Flutter 1.0, we focused a good deal of energy in the last couple of months on improving our testing and code infrastructure, clearing a backlog of pull requests, and improving performance and quality of the overall framework. We have a comprehensive list of these requests in the Flutter wiki for those who are interested in the specifics. This work also included broader support for new UI languages such as Swahili.
We continue to make improvements to both the Material and Cupertino widget sets, to support more flexible usage of Material and continue to strive towards pixel-perfect fidelity on iOS. The latter work includes support for floating cursor text editing, as well as showing continued attention to minor details (for example, we updated the way the text editing cursor paints on iOS for a faithful representation of the animation and painting order). We added support for a broader set of animation easing functions, inspired by the work of Robert Penner. And we added support for new keyboard events and mouse hover support, in preparation for deeper support for desktop-class operating systems.
Lastly, Flutter 1.2 includes the Dart 2.2 SDK, an update that brings significant performance improvements to compiled code along with new language support for initializing sets. For more information on this work, you can read the Dart 2.2 announcement.
(As an aside, some might wonder why this release is numbered 1.2. Our goal is to ship a 1.x release to the ‘beta’ channel on about a monthly basis, and to release an update approximately every quarter to the ‘stable’ channel that is ready for production usage. Our 1.1 last month was a beta release, and so 1.2 is therefore our first stable release.)
New Tools for Flutter Developers
Mobile developers come from a variety of backgrounds and often prefer different programming tools and editors. Flutter itself supports different tools, including first-class support for Android Studio and Visual Studio Code as well as support for building apps from the command line, so we knew we needed flexibility in how we expose debugging and runtime inspection tools.
A widget inspector, which enables visualization and exploration of the tree hierarchy that Flutter uses for rendering.
A timeline view that helps you diagnose your application at a frame-by-frame level, identifying rendering and computational work that may cause animation ‘jank’ in your apps.
A full source-level debugger that lets you step through code, set breakpoints and investigate the call stack.
A logging view that shows activity you log from your application as well as network, framework and garbage collection events.
We plan to invest further in this new web-based tooling for both Flutter and Dart developers and, as integration for web-based experiences improves, we plan to build these services directly into tools like Visual Studio Code.
What’s next for Flutter?
In addition to the engineering work, we took some time after Flutter 1.0 to document our 2019 roadmap, and you’ll see that we’ve got plenty of work ahead of us.
A big focus for 2019 is growing Flutter beyond mobile platforms. At Flutter Live, we announced a project codenamed “Hummingbird”, which brings Flutter to the web, and we plan to share a technical preview in the coming months. In addition, we continue to work on bringing Flutter to desktop-class devices; this requires work both at the framework level as described above, as well as the ability to package and deploy applications for operating systems like Windows and Mac, in which we’re investing through our Flutter Desktop Embedding project.
Flutter Create: what can you do with 5K of Dart?
This week, we’re also excited to launch Flutter Create, a contest that challenges you to build something interesting, inspiring, and beautiful with Flutter using five kilobytes or less of Dart code. 5K isn’t a lot — for a typical MP3 file, it’s about a third of a second of music — but we’re betting you can amaze us with what you can achieve in Flutter with such a small amount of code.
The contest runs until April 7th, so you’ve got a few weeks to build something cool. We have some great prizes, including a fully-loaded iMac Pro developer workstation with a 14-core processor and 128GB of memory that is worth over $10,000! We’ll be announcing the winners at Google I/O, where we’ll have a number of Flutter talks, codelabs and activities.