Skip to content

Instantly share code, notes, and snippets.

@travisbhartwell

travisbhartwell/flutter-development-on-chromeos.md

Created March 19, 2019 07:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save travisbhartwell/50dc75cb7b7eb10db21523af36a6f6fc to your computer and use it in GitHub Desktop.
Save travisbhartwell/50dc75cb7b7eb10db21523af36a6f6fc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flutter-development-on-chromeos.md

Flutter Development on my Pixel Slate

I watched Chrome OS: Ready for Web Development (Chrome Dev Summit 2018) last year and it's what made me realize that a Chrome OS device could work for what I needed: a replacement for my old Android tablet and a device for personal projects. When the Pixel Slate was announced, I knew it fit my needs.

Linux and Android Support

Chrome OS uses LXD containers to run the Android and desktop Linux systems. This system is called Crostini. See this page for a list of current Chrome OS devices that support Crostini.

The default container image current runs Debian stable, but you can easily create your own images. I mean to do so to run NixOS. Right now I'm just using Nix Packages on top of Debian.

See Chrome OS Systems Supporting Android Apps for a list of Chrome OS devices that support Android. Also see Chrome OS device support for apps in the Android Developer documentation for more information about Android.

My Personal Linux Use on the Pixel Slate

The first thing I did was get Spacemacs working on Crostini:

Spacemacs on Chrome OS

I have used Ledger CLI for my personal finance and did all of my data entry to prepare for this year's taxes on my Pixel Slate.

Doing Flutter Development on the Pixel Slate

Flutter has caught my interest. I've not yet done any mobile development, and having one language for multiple platforms is quite interesting.

Android Studio

Technically, Android Studio is supported in Crostini. I've been able to run it, but I already run IntelliJ on a machine with not enough RAM at work, and so am not interested in doing so at home. I could use this to do Flutter development. But installing Android Studio is helpful so you have the Android SDK and platform tools installed.

I haven't tried running an Android emulator on my Pixel Slate.

Visual Studio Code

Visual Studio Code is pretty well supported for Dart and Flutter development. You can install it like this:

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

Also see the r/Crostini wiki for some alternate instructions.

And then follow the Flutter documentation for Visual Studio Code for setting up the Dart and Flutter extensions. Once Flutter was on my path, VS Code was able to run everything that it needed.

There are a few options, however, for testing Android (or, more precisely, Flutter) apps on Chrome OS.

Running the Android Applications Directly on the Chrome OS Device

Unfortunately, currently you cannot install Android applications from .apks and not from the Google Play store unless you enable Developer mode. I'd rather not enable that if I don't have to. If, however, you choose to do this, see “Flutter Development on a Pixelbook” by Tim Sneath.

Running the Android Applications on An Android Phone

Unfortunately, you currently cannot pass USB connections from Chrome OS through to the Linux container. However, that seems to be coming. But because of this, you can't do ADB debugging over USB directly from your Chromebook. So, I first connected my Pixel 3 to my MacBook and turned on TCP/IP debugging:

adb tcpip 5555

Note that this seems to have to be done once every time the phone has been rebooted.

And then from my Pixel Slate, I connected to the Pixel 3 over WiFi:

nafai@penguin:~/Android/Sdk/platform-tools
$ ./adb connect 192.168.1.53:5555
connected to 192.168.1.53:5555
nafai@penguin:~/Android/Sdk/platform-tools
$ ./adb devices
List of devices attached
192.168.1.53:5555       device

Then, after it is connected, when I do flutter run or run within Visual Studio Code, it will copy the apk to my phone over WiFi and launch it there.

Caveats

I tried using the new Flutter Devtools, but could not get them working, due to the fact that they (reasonably) have hard coded the server to listen on localhost. Since the container is a different host than Chrome OS, I cannot access the service from my Chrome OS browser. One work-around that I haven't yet tried is to installed a patched version of the Visual Studio Code extension, patching this line to use a hard-coded port number. It appears that Crostini automatically forwards out well-known ports, and so if you use one of those it will work.

However, I was able to test this by first running the Flutter app and Flutter DevTools from the console:

I was able to get it working from the command-line like this, from the top-level directory of my Flutter Application code (ports 8000 and 8008 are both from the above Well Known Ports list):

# In one tmux window
flutter run --obvservatory-port 8000
# And then in another
flutter packages pub global run devtools --port 8008

In Visual Studio Code, I did Debug -> Add Configuration, and then in the configurations list, I added this JSON structure:

        {
            "name": "Flutter: Attach to Pixel 3",
            "type": "dart",
            "request": "attach",
            "deviceId": "Pixel 3",
            “observatoryUri”: “http://127.0.0.1:8000/”,
        },

Then I could do Debug -> Start Debugging and Visual Studio Code would connect to the running process. At least theoretically. I couldn't get that working tonight.

However, I could connect to the devtols, in the browser in ChromeOS, I could connect to [http://localhost:8008/?port=800]. Looks to be a very interesting tool!

Running the Flutter Applications on Linux

There is an effort to get Flutter working on Desktop OS's, called Flutter Desktop Embedding. I was able to follow the instructions on Flutter Dev on ChromeOS: Here and Now! to get this working. There were a few minor things left off, so here's what I did (if I'm missing some of the pre-reqs here, it's because I had previously installed them and didn't know it):

cd $HOME
mkdir -p ./Third-Party/Flutter && cd ~/Third-Party/Flutter
git clone https://github.com/google/flutter-desktop-embedding
git clone https://github.com/flutter/flutter

# Install Pre-reqs
sudo apt-get install libglfw3-dev libepoxy-dev libjsoncpp-dev libgtk-3-dev libx11-dev pkg-config ninja-build lib32stdc++6
# Get 'gn'
curl -O -sSL -o gn-amd64-linux.zip https://chrome-infra-packages.appspot.com/dl/gn/gn/linux-amd64/+/latest
mkdir -p ~/bin
unzip gn-amd64-linux.zip gn -d ~/bin

# Open new terminal so ~/bin is on PATH
cd ~/Third-Party/Flutter/flutter/bin
# Accept the Android Licenses
./flutter doctor --android-licenses
cd ~/Third-Party/Flutter/flutter-desktop-embedding/example/linux_fde
make
../build/linux_fde/debug/flutter_embedder_example

I got that example running, but couldn't quite figure out the CLI test that is mentioned in the above article. I think I must have missed a step.

There is are a couple alternatives to the above. I tried the Rust option but couldn't get it to compile, but I will keep my eyes on them:

Summary

Hope this helps! I haven't really got that far, but far enough to get sample code running. It's awesome that I have this device that I can use for development that actually works quite well.

Additional Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment