Flutter development on a Chromebook, 2020 edition
Or, how to develop without sacrificing a lot of security and without switching your device to development mode.
There have been numerous excellent articles about Flutter development on a Chromebook, from SnappMobile, Google Play Dev, Paul Thurrott and even posts on Reddit to name a few. But with the rapid development speed of the Chrome OS there are features coming in all the time, and I wanted to share the latest news.
A word on security
Out of the box, Chromebook offers a rather secure environment (including Sandboxing, Verified Boot and Data Encryption) while keeping the system easy to use, which is important because security and convenience are often a tradeoff. This, among other reasons, is why I like Chromebooks.
The environment, which is basically interfaced as a browser, also feels rather limiting to a regular Linux user like me. But it is possible to let things loosen up a bit if you want to do some tweaking (like using a tiling window manager) or add some superpowers to your laptop (for example, scanning a network or compile some source code).
One way to supercharge your laptop is to switch it into development mode and use the built-in Linux distribution or even install another (e.g. Crouton). However, development mode disables a lot of security features, defeating a good third of my reasoning to use a Chromebook. So let’s see how we can avoid that.
Linux on a Chromebook — Crostini
Crostini is the official solution (beta) allowing to have Linux on a Chromebook, which is one button click away (if you have a compatible platform). Implementation wise, it’s a container within a VM (running Debian), which allows Chromebook to maintain high security standards while running untrusted software. It can be a little bit slow in my experience, but the integration is still young and there is a constant stream of improvements — for example, last year Chromium team enabled GPU acceleration for Linux apps and support for connecting Android (adb) and other devices over USB. Coming soon is port forwarding. Unfortunately, you cannot yet run a (sufficiently fast) Android emulator.
Indeed, while the container is secured, there’s still a privacy aspect to running untrusted apps. For example, clipboard is shared between Chrome OS and Linux, and processes can read and write to the shared folders you configured in Chrome OS, anytime:
USB vs Local ADB
As mentioned above, you can easily connect your Android devices to the host and get them visible in your Linux container with a single click:
However, this means that you have to carry your test phone and a cable with you all the time, and you also have a limited testground. Recently, when updating to M81, I’ve noticed a new option in the Linux settings:
This (apparently) uses the same environment that Chrome OS has for running Android apps, and exposes the adb server to the Linux container. Now, note that you do sacrifice a part of security for that awesomeness, as the note suggests, but nowhere as much as disabling verified boot by switching the Chromebook to Developer mode. Now, you can see both devices connected, the Chromebook seen as emulator-5554:
Running apps on the Chromebook is rather smooth, and the window is resizeable similar to the emulator. Here’s a screenshot of the Delern Flashcards learning app resized similar to a phone’s screen:
I do have to say there are a couple of quirks running Android apps on Chrome OS, too, like the app window forgetting its size when you launch automated tests. It’s interesting to observe how mobile apps scale to a 27" screen, but I guess you’re more interested in how the development environment looks like.
VS Code
The choice of IDE in this article is not random. There’s something special about how VS Code can be used on a Chromebook, although it runs pretty well on Crostini out of the box, like Android Studio or IntelliJ IDEA. My journey starts with not being happy with editor rendering performance and scaling / font smoothing problems. Knowing that VS Code is built with Electron, which basically renders into a browser window, and Chrome OS interface is mostly browser windows, I kept my hopes high about skipping the custom browser layer and just have VS Code open in a Chrome tab like a regular website, rendering natively. Unfortunately, there’s no official support for that, but please stay with me a little longer — as much as I was skeptical about custom solutions, the next thing I found impressed me so much that I stayed.
“code-server is VS Code running on a remote server, accessible through the browser.” says the description of code-server repository on GitHub, and I decided to give it a try. To my surprise, it was blissfully simple to use and works out of the box like a charm without a single problem (except one issue with Dart extension that has since been long fixed).
To get started, download and unpack one of the releases from the code-server official releases page. Although Crostini supports Docker, you don’t need to containerize code-server further because Crostini already runs in a container. You can then start VS Code with a simple command:
./code-server --auth noneThere should be no need to enable authentication, as the container listening ports are isolated from external network. Navigate to http://localhost:8080/ and you should see the welcome page of VS Code, rendered right in the Chrome OS native browser 🎉. The next step is to add it as an app to Chrome OS, which even has its own icon:
And if you want, you can further pin the app to your launcher, or you can always access it by pressing the Search key on your Chromebook keyboard.
Taking it a little bit further
If you’ve already been running official VS Code on Crostini and want to share the settings, I found that this command line works best:
./code-server --auth none \
--user-data-dir "$HOME/.config/Code" \
--extensions-dir "$HOME/.vscode/extensions"Note that opening the code-server app installed on Chrome OS is not possible without manually starting Linux. For me, launching Linux almost always means launching VS Code. So I put this little systemd service together to always have VS Code started in my Linux environment. Of course, it runs only in the background, and won’t open until you open the Chrome OS app!
$ cat $HOME/.config/systemd/user/code-server.service
[Unit]
Description=VSCode Server[Service]
ExecStart=%h/pkg/code-server/code-server --auth none --user-data-dir %h/.config/Code --extensions-dir %h/.vscode/extensions[Install]
WantedBy=default.target$ systemctl --user enable code-server.service
$ systemctl --user start code-server.service
P.S. Did you know you can configure your Crostini terminal by pressing Ctrl-Shift-P while it’s open?
