Flutter and ChromeOS: Better together

This article originally appeared on Google Developers Blog.

ChromeOS 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 ChromeOS applications, including rich support for keyboard and mouse, and tooling to ensure that your app runs well on a Chromebook. Furthermore, ChromeOS 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 ChromeOS apps

Since its inception, Flutter⁠⁠ has shared many of the same principles as ChromeOS: 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 ChromeOS.

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 ChromeOS 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 in the Flutter Gallery⁠⁠.

The Gallery is an app designed to be a collection of Material Design & Cupertino widgets, behaviors, and vignettes implemented with Flutter. The app showcases responsive design as well as having keyboard navigation support throughout the app. This is a great place to look at how a well-designed app handles resizing windows and switching between different layouts, while also showcasing the built-in support for keyboard and focus navigation in the toolkit out of the box.

Because ChromeOS runs Android apps, targeting Android is the way to build ChromeOS apps. However, while building ChromeOS 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 ChromeOS. 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 ChromeOS best practice guidelines:

When you’re able to put these ChromeOS lint rules in place, you’ll quickly be able to see any problems in your Android app that would hamper it when running on ChromeOS. To learn how to take advantage of these rules, see the linting docs for Flutter ChromeOS⁠⁠.

But all of that is just the beginning – the Flutter tools allow you to develop and test your apps directly on ChromeOS as well.

ChromeOS 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, ChromeOS has been building support for running the Linux version of these tools with Linux on ChromeOS (aka Crostini). And, because ChromeOS also supports Android, you can configure the Flutter tooling to run your Android apps directly without an emulator involved.

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 ChromeOS; you can also test against Android devices attached to your ChromeOS box. In short, ChromeOS is the ideal environment in which to develop and test your Flutter apps, especially when you’re targeting ChromeOS itself.

Customers love Flutter on ChromeOS

With its unique combination of simplicity, security, and capability, ChromeOS 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 ChromeOS to solve problems for their enterprise customers.

Creating a ChromeOS 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.

By using Flutter to target ChromeOS, AppTree was able to start with their existing Flutter mobile app and easily adapt it to take advantage of the capabilities of ChromeOS.

Try Flutter on ChromeOS today!

If you’d like to target ChromeOS with Flutter, you can do so today simply by installing the latest version of Flutter⁠⁠. If you’d like to run the Flutter development tools on ChromeOS, you can follow these instructions⁠⁠ to get started fast. To see a real-world app built with Flutter that has been optimized for ChromeOS, check out the the Developer Quest sample⁠⁠ that the Flutter DevRel team launched at the 2019 Google I/O conference. And finally, don’t forget to try out the Flutter ChromeOS linting rules⁠⁠ to make sure that your ChromeOS apps are following the most important practices.

Flutter and ChromeOS go great together. What are you going to build?