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).
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.
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.
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.
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.
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.