Flutter Dev on ChromeOS: Early 2020 Edition

13 Jan 2019

Its been a year since I first setup a development environment for Flutter (Linux) desktop apps on a Chromebook.

Since then things have become somewhat easier, with the Flutter SDK master channel now having initial support for Linux desktop development.

However, unlike the support for MacOS, its not yet as simple as running flutter create && flutter run, so for those that want to try it out, these are the steps I followed, running on Debian Stretch (in a ChromeOS Linux container).

Prerequistes

sudo apt update
sudo apt-get install -y: clang, git ,curl, libx11-dev libgtk-3-dev
# not sure if clang 7 is needed, embedding readme just says: "recent version of clang"
sudo apt install -y clang-7
sudo update-alternatives --install /usr/bin/clang clang /usr/bin/clang-7 sudo update-alternatives --install /usr/bin/clang++ clang++ /usr/bin/clang++-7 100
clang++ # confirm its now on the path
sudo apt-get install libgtk-3-dev pkg-config

A Note on CLang versions: The Flutter Linux desktop embedding documentation only specificies as being required a:

recent version of clang

On Stretch, the default is the rather old clang 3.8 so that's why above I chose to explicitly install a newer version. If you use a new version of Debian or an Ubuntu based distro that probably has a newer version of clang as default, you won't need to worry about having the run the update-alternatives command as I did above.

Flutter install

cd [flutter-install-folder]
flutter channel master
flutter doctor
flutter config --enable-linux-desktop

cd [your-preferred-work-folder]
git clone https://github.com/google/flutter-desktop-embedding
cd flutter-desktop-embedding/example
flutter run

That last command should then either give you a error message or bring up the standard Flutter counter demo app running as a native GTK app running inside your linux environment.

If it successfully ran, you now have a basic working Flutter LInux desktop app, so you can take the linux folder inside the example folder and copy it into an existing flutter project, alongside the android and iOS folders already there. You may also want to edit Makefile to customise your app name and edit the list of locally sourced plugins (more info on plugins below).

Desktop Launcher Icon

For a nice touch of polish, you will want to create a Desktop launcher icon for your new Flutter app. On Linux, the launcher and its associated icon at not metadata on the executable but rather defined in a text file format specified by the Freedesktop group, this article will provide you the information you need to get you started on creating your own.

Caveats

Fonts

The Linux embedder doesn’t come with any fonts so you’ll need to embed all the fonts your app requires yourself. Eg. Roboto as per the flutter-desktop-embedding example. Any text styles required for third-party libraries such as charts_flutter, you will also need to specify fontFamily explicitly, though for first party widgets, specifying the fontFamily in MaterialApp’s ThemeData, is sufficient.

Plugins

At this stage there are only a handful of sample plugins included in the Linux embedding so commonly used ones such as Shared preferences will not but supported on Linux, so as an alternative you could create for example your own file based implementation and use the Directory.systemTemp property for its location.

End of the Beginning

While Flutter desktop Linux apps are still considered experimental and you should probably not use this production deployments, this setup is very useful in its own right for developing and testing flutter apps intended for stable targets of Android and iOS as with desktop apps, the build times are signficantly faster comapred to mobile platforms and the resizable windows give you a easy way to quickly check how reponsive your UI design is showing you how well (or badly!) it handles different screen sizes and aspect ratios.

Credits

My thanks to Gary Chang who generoulsy contributed his notes on getting a Flutter Linux desktop app build environment setup for his project that I have included in parts of this article.