Flutter development on the Pixelbook
My main device is a Pixelbook — you can read why here. Despite running Chrome OS, it is actually a fantastic laptop for Flutter development. Here I describe how I set-up my Pixelbook to be my Flutter development environment.
The killer feature of Flutter on a Pixelbook is being able to run Android apps natively. This means no Android emulators or iOS simulators. Just run your Flutter app directly on the laptop — it’s amazing if you are into building fluid layouts. (However, you have to put the Chromebook in developer mode to do this which sucks a little.)
In addition, since Chrome 69 you can run Linux apps by enabling a Debian Linux VM. This makes it possible to install all the tools you need to write and run Flutter apps.
(I only refer to the Pixelbook in this post because I don’t know enough about the capabilities of other Chromebooks to say much about how well they would work for Flutter development. Hopefully others with this experience can add comments below.)
Flutter without Android Studio
I decided to go with a setup that doesn’t include Android Studio, for a couple of reasons.
- Visual Studio Code (VS Code) has an excellent Flutter extension and Google continue to invest in its development.
- VS Code has a lighter footprint, e.g. 1GB RAM vs 3GB RAM recommended for Android Studio.
In other words, if I am not intending to use Android Studio it seems reasonable to not install it.
Even though the set-up instructions at flutter.io say the full Android Studio needs to be installed, I’ll describe below what I did to make things work with just the Android SDK and SDK Tools.
List of steps
Here is a list of the steps needed for the setup — each described in more detail below.
- Install the Flutter SDK
- Install the Android SDK Tools and Android SDK
- Verify the Flutter SDK dependencies
- Setup Pixelbook to directly run Flutter apps
- Install Visual Studio Code and Flutter extensions
Installing the Flutter SDK
Before you start, don’t forget you need to put the Pixelbook into developer mode to run Android apps directly on the device. This explains how and this explains the implications.
The Flutter SDK includes the Dart SDK so you don’t need to install that separately. As of time of writing, the Flutter 1.2.1 was just released shipping with Dart 2.1.0.
1. Download the latest Flutter SDK tar from here https://flutter.io/docs/get-started/install/linux.
wget https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.2.1-stable.tar.xz(Go to https://flutter.dev/docs/get-started/install/linux to find the latest version to install.)
Unpack the .tar.xz wherever you want to keep the Flutter SDK.
tar -xv flutter_linux_v1.2.1-stable.tar.xzYou can also download via Chrome and move to your Linux VM via the Files app.
2. Then add the Flutter SDK to your path by adding the following to ~/.bashrc
I put manually installed development SDKs and IDEs in /home/jasper/development/tools — replace this in the steps below to wherever you install your tools.
export PATH="$PATH:/home/jasper/development/tools/flutter/bin”To get the terminal to pick up these changes run. ~/.bashrc
Installing the Android SDK and SDK Tools
Here is how I installed the Android SDK without Android Studio.
Install Java
sudo apt-get update
sudo apt-get install default-jre
sudo apt-get install default-jdk
Download the Android SDK Tools
1. From the download Android Studio page, in the download options, look for “Command line tools only”: https://developer.android.com/studio/#downloads
This isn’t the Android SDK itself, but the sdkmanager is used to download all the necessary Android tools and SDKs.
2. I downloaded the sdk-tools-linux and unzipped it to /home/jasper/development/tools/android-sdk.
wget https://dl.google.com/dl/android/studio/ide-zips/3.3.1.0/android-studio-ide-182.5264788-linux.zipunzip android-studio-ide-182.5264788-linux.zip
3. This creates a ‘tools’ directory. Add this tools path to ~/.bashrc (then calling . ~/.bashrc to pick up the changes).
For me the path now looked like this.
export PATH=”$PATH:/home/jasper/development/tools/flutter/bin:/home/jasper/development/tools/android-sdk/tools/bin”Get the Android SDK and Tools
1. Using the sdkmanager tool, I downloaded the following Android SDK packages:
sdkmanager "build-tools;28.0.3" "emulator" "tools" "platform-tools" "platforms;android-28" "extras;google;google_play_services" "extras;google;webdriver" "system-images;android-28;google_apis_playstore;x86_64"
You can install other SDK versions, I just took the latest to get started.
(I decided to install the emulator so that I can choose to run Flutter apps in specific emulators. However the main target for running apps will be the Pixelbook.)
2. You can see everything available from the sdkmanager using
sdkmanager --list
Setup Android Paths
In order for Flutter to know where the Android SDK is installed, you need to add the following to your ~/.bashrc.
1. Set the ANDROID_HOME environment variable to point to where you unzipped sdk-tools
export ANDROID_HOME="/home/jasper/development/tools/android-sdk"
2. Add the Android Platform Tools to your path by adding it to the other path settings in ~/.bashrc.
export PATH="$PATH:/home/jasper/development/tools/flutter/bin:/home/jasper/development/tools/android-sdk/tools/bin:/home/jasper/development/tools/android-sdk/platform-tools”To get the terminal to pick up these changes run. ~/.bashrc.
Accepting the Android licenses
You will need to accept some licenses in the Android SDK. Do this by running:
flutter doctor --android-licenses
Testing the Android SDK setup
You can check the setup by running
flutter doctor
You will see warnings about Android Studio not being installed and no devices being attached. The next step is to get the Pixelbook to be the Android Device that you use to run our Flutter apps.
Running apps directly on the Pixelbook
To run an Android app on the Pixelbook during development you need to configure it to allow Android Debugging, just as you would with an Android phone. Here’s how on the Pixelbook.
Enable Android Developer Mode
1. Open the Pixelbook Android settings. Go to the Chrome settings and open the left hand draw to select the ‘Google Play Store’
Then click on ‘Manage Android preferences’ — this opens the Android settings for the Pixelbook.
2. From the Android settings, click on the “System” option at the bottom.
To put the Pixelbook Android environment into developer mode, click on ‘About Device’ option of the system settings.
3. In the next screen, click on the ‘Build Number’ entry 7 times — you will see a toast message that development mode has been enabled.
Enabling ADB debugging
When you navigate back to the main Android settings screen, you will now see a ‘Developer options’ item in the list of settings.
Click on this and then find the ‘ADB debugging’ setting and turn it on.
That’s it. Now you can run your Flutter (Android) apps on the Pixelbook.
Connecting to the Pixelbook via ADB
Android apps are installed on the Pixelbook via ADB over WiFi. Pixelbook runs Android in a separate container. To communicate with that you need to use the IP bridge at the address 100.115.92.2.
When you want to run your Flutter apps directly on the Pixelbook, you need to connect to it using this command.
adb connect 100.115.92.2:5555
The first time you do this you will be asked to allow debugging.
You can also check which devices are connected using:
adb devices
Installing Visual Studio Code
In the Chrome OS Files app, drag it from the Downloads folder to the ‘Linux files’ folder.
Install is from the Linux VM by running
sudo apt install ./code_1.31.1-1549938243_amd64.deb
Visual Studio Code will now be available from the Chrome OS launcher — pretty cool.
Setting-up VS Code for Flutter development is described here:
https://flutter.io/docs/get-started/editor?tab=vscode
Some rough edges
Despite the Pixelbook making a great development machine for Flutter, there are a couple of areas that would make it even better.
You need a WiFi connection
Because the Pixelbook uses ADB over WiFi, you can’t run Flutter apps without a WiFi connection. For folks like me who regularly spend time in aeroplanes, it is a nuisance.
The solution in these cases is to use the Android emulator. I’ll write more about that in another post.
Side-by-side windows
Chrome OS allows you to dock windows to the left or right parts of the screen. This would be great for effectively pinning Visual Studio Code and a Flutter app together.
Unfortunately you can’t use side-by-side windows with Linux apps on a Chromebook. Maybe this will change in the future.
Performance
I have the top-end Chromebook — i7 Processor, 16 GB RAM, 512 GB SSD. This should be fine for a Flutter development environment.
However I see a distinct lag when typing in Visual Studio Code. I haven’t found any settings or startup flags that could help with this. Maybe they are out there but I just haven’t found them.
The lag is not so bad as to be disruptive but it is noticeable and puts a bit of a dent in the experience of developing on the Pixelbook.
App tray Icon
When VS Code is running, the default penguin icon for Linux apps is used in the app tray vs the VS Code icon.
This is another indicator that Linux VM support on Chrome OS is still in Beta and hopefully will be resolved at some point. (Again, I haven’t found a solution to this yet.)
VS Code and Scaled Displays
If you are using VS Code with an external display, but increase the scaling on the display because the font is too small, then VS Code might look blurred for you — it did for me.
Luckily this blog post describes a simple fix.
In my setup I actually created two VC Code .desktop files pointing to the original and a modified version of the startup script. This means I can launch VS Code with or without the GTK scaling depending whether I’m connected to a monitor or not. It isn’t pretty, but works.
TL;DR
The Pixelbook is a great laptop and can be great for Flutter development.
Being able to run Android apps directly on the Pixelbook sets it apart and is especially useful for people who like to build fluid UIs — resizing the Android app is just resizing a window.
Setting up your Pixelbook for Flutter development is pretty easy.
