Flutter Development on a Pixelbook

Newly added features in Chrome OS that let you develop and test a Flutter application without a simulator or emulator.

Note: this article was updated in January 2019 to match newer ChromeOS builds. But as Google continues to work on making this easier, it’s possible that you’ll see minor changes from what is shown here. Please leave a note or a comment if you see anything that’s unclear or broken in the latest builds, and I’ll fix it.

In a somewhat underrated talk at Google I/O 2018, Emilie Roberts announced some cool new Chrome OS features that make a Pixelbook to do Android development. With the new Linux on Chromebooks feature, you can now run Android Studio directly on a Pixelbook, debug over a wi-fi connection to an Android device or even run the resultant Android app locally on the Pixelbook. This is all thanks to the Crostini project, which provides a containerized Linux instance on the device.

What is even more cool is that all this works just as well with Flutter, which means you can do all your development on-device without even needing an emulator to test your app out. While a little experimental, it makes Pixelbook a fascinating device for any Flutter developer who isn’t bought into the Apple ecosystem.

Here’s a screenshot of this working, taken directly from a Pixelbook running Visual Studio Code locally and connected through the Android Device Bridge to a Flutter app also running locally. This is not an emulator — the Flutter app is being executed directly on the Pixelbook (check out the target platform in the bottom-right corner of the Visual Studio Code status bar).

Flutter running locally on a Pixelbook, connected with hot reload to Visual Studio Code

In the rest of this article, I’m going to provide step-by-step instructions to get this running on your own device. Linux on Chromebook support is ‘beta-quality’ for now, and it requires one of the supported devices for Crostini, including Pixelbook. Your mileage may vary; things may break, and of course the performance characteristics of ChromeOS devices will be very different to those of a typical iPhone or Android device. And we’re not guaranteeing that every Flutter scenario will work at this stage. Enough caveats? :)

Getting the basics installed

For the full experience of debugging Flutter, you’ll currently need your device to be in developer mode, which removes some of the sandbox protections that would be available to a typical consumer and enables you to sideload untrusted applications that aren’t on the Play Store. On a Pixelbook, you can enter developer mode by holding down the Escand Refresh keys while you press the power button. The system will reboot into the recovery screen (which prompts you to insert a USB stick). Ignore the text on the screen and hit Ctrl+D, which will initiate the process after a further warning.

Since this support is evolving, it’s not a bad idea to switch your device to the beta channel for Chrome OS, which will give you the latest bits (at the time of writing in January 2019, this was 71.0.3578.94, but this changes regularly). Once you’ve changed the channel, you will need to let Chrome OS download and install the latest bits from that channel, and then reboot.

Once you’ve rebooted with the latest channel bits, you’ll see a new entry in the Settings app that offers the chance to install Linux support on your Chromebook:

When you turn this on, ChromeOS will offer to download and activate the Linux container:

On my machine, this took a couple of minutes to complete; when finished, there was a shiny new Terminal app icon on the app launcher, which I promptly pinned to my taskbar.

Installing Flutter

Now for the fun bits. Launch the terminal, and use apt to make sure you have the very latest Linux bits by running sudo apt update && sudo apt upgrade.

Let’s also install some other utilities and dependencies you’ll need at various points during the next steps:

$ sudo apt install libglu1-mesa lib32stdc++6

Because you’re running in a container, the easiest way to download into the container instance in current builds is to just use wget. (You can download them using Chrome and then transfer them through an SSH tunnel, but that’s a little more laborious.) It’s easier to download and install Flutter with the following commands:

$ curl -O https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.0.0-stable.tar.xz 
$ tar xf flutter_linux_v1.0.0-stable.tar.xz
$ export PATH=`pwd`/flutter/bin:$PATH

Now you should be able to run flutter doctor and it should give you a clean bill of health for Flutter itself, even though it will complain about a lack of tooling or devices at this stage.

Installing Visual Studio Code and Android Studio

Now it’s time to install an IDE or two. Both of the primary supported IDEs for Flutter (Android Studio and Visual Studio Code) work perfectly well within the Chrome OS Linux support. Regardless of whether you plan to use Android Studio as your IDE, however, you’re going to want to install it so that you have the Android build tools.

Android Studio can be downloaded directly from the website, but because Linux runs in a separate container than the Chrome browser, you’ll have to manually move it before you can access it from your terminal. Hold down the Shift key while dragging to move it from the Downloads directory to the Linux files node (which represents the home ~ directory in the Linux container).

Then you can run the following to extract and install Android Studio:

$ unzip android-studio.zip
$ sudo mv ~/android-studio /usr/local/
$ cd /usr/local/android-studio/bin
$ ./studio.sh

You’ll see a dialog like the following:

Click through the remaining setup steps (I didn’t bother selecting the Android Virtual Device, because, y’know, we don’t need it!). When the IDE launches, start a new blank project (accepting the defaults). We’re going to add a launch icon to make it easier to get back to Android Studio, so go to Tools / Create Desktop Entry.

Now we can install the Flutter plug-in for Android Studio, to add tools and integration for the IDE. Go to File / Settings, choose the Plugins node, and click Browse repositories… Search for the Flutter plugin, as shown below, and press the Install button.

One last step at this point — make sure you’ve accepted all the Android licenses by running the following:

$ flutter doctor --android-licenses

For Visual Studio Code, you can download and install with the following instructions, which download the Visual Studio Code package and install it with all needed dependencies (the go.microsoft.com URL automatically redirects to the latest version):

$ curl -L -o vscode.deb https://go.microsoft.com/fwlink/?LinkID=760868
$ sudo apt install ./vscode.deb

Lastly, open Visual Studio Code and install the Flutter extension.

You’re mostly there! Running flutter doctor -v should now show that everything is set, except that there are no connected devices. We’ll fix that in the final step.

Configuring the Pixelbook as a developer device

We need to take care of a few things so that the Pixelbook is itself recognized by Android as a development device.

First up is to modify the Chrome OS firewall to allow incoming ADB connections from the Linux side of the house. From a Chrome window, press Control+Alt+T to start the Chrome OS terminal and then type shell to start a shell within the terminal. If shell doesn’t work, then chances are you forgot to set your device into developer mode as described earlier.

Now run a few sudo commands:

chronos@localhost / $ sudo crossystem dev_boot_signed_only=0
chronos@localhost / $ sudo /usr/libexec/debugd/helpers/dev_features_rootfs_verification
chronos@localhost / $ sudo reboot

After the system reboots, you’ll need one last command:

chronos@localhost / $ sudo /usr/libexec/debugd/helpers/dev_features_ssh

Next up is to turn on Android developer mode. You might think we’ve already done this right at the beginning, but we’ve only set the Pixelbook itself into developer mode: the Android side requires the same magic invocation that you may be used to from phones. The setting is a bit buried: from the Settings app, select the Google Play Store menu and then choose Manage Android preferences:

This will launch a separate Settings app for the hosted Android environment, where you’ll find the About device page:

Tap the build number seven times: that’s the magic incantation that unlocks the Developer Options screen and will let you turn on ADB debugging:

Now you can at last set up an ADB connection to the local device that Flutter can reach. You’ll find adb in the following location, assuming you unzipped Android Studio from your home directory: $/Android/Sdk/platform-tools/adb

Run the following command to connect to the local Android instance:

$ adb connect 100.115.92.2:5555

Putting all the pieces together

With luck, flutter doctor should give you a clean bill of health. You can now create and run a Flutter app, for instance:

$ flutter create testapp
$ cd testapp
$ flutter run

and after Gradle has built the APK and deployed it you should see a fullscreen window pop up with the sample app running.

A simple Flutter app running in full-screen mode on a Pixelbook.

Like any other Android app running on a Pixelbook, you can restore the window from maximized, at which point the app will look very similar to how it would look if running on a phone: except it’s running directly on your Pixelbook!

Recommendations and Caveats

You’ll probably want to adjust the screen DPI settings a little to get more real estate. Some apps respond better than others to this; in particular, I found that a couple of the Android Studio dialogs were way too small for the given DPI setting.

However, in general, this seems very useful, particularly if you’re willing to live on the edge as the various teams finish building out these features. And if you’ve got a Pixelbook and have been waiting for a way to learn Flutter or try building apps, it’s well worth giving this a go! Have fun and let us know how you get on: you’ll find the team on Twitter at @flutterio.