In this article, we will explore very useful libraries to integrate our apps within the Linux distribution Ubuntu and in general in all Linux distributions. This will allow us to complete our series of articles on integrating our desktop apps into the desktop operating systems on which we can develop our applications, other articles can be found here: How to seamlessly integrate Flutter apps in Windows and How to seamlessly integrate Flutter apps in macOS.
Yaru is the name of the Ubuntu desktop theme on which the creation of all its interfaces is based, here you can find its official repository where they have also reported example screens colors, icons, and controls (switches, sliders, tabs, checkboxes). For our Flutter applications the library that comes in handy is yaru with which we can recreate the same style:
The package allows us to integrate our applications not only in Ubuntu but also in all its flavors such as Kubuntu, Lubuntu, Ubuntu MATE, Xubuntu, Ubuntu Budgie , Ubuntu Kylin and Ubuntu Studio through the use of custom themes that change the color and accent of the interface elements, including the so loved dark theme for all flavors. To apply it, simply set the
darkTheme properties of the
//Theme for Ubuntu MaterialApp( theme: yaruLight, darkTheme: yaruDark, home: Scaffold( appBar: AppBar( title: Text('Yaru Theme'), ), body: Container(), ), ); //Theme for Kubuntu MaterialApp( theme: yaruKubuntuLight, darkTheme: yaruKubuntuDark, home: Scaffold( appBar: AppBar( title: Text('Yaru Theme'), ), body: Container(), ), );
In particular, the styles of Kubuntu, Xubuntu, and Ubuntu Studio with blue tones can also be integrated quite well on Windows and macOS. By downloading the example on the official package repo it is also possible to find an implementation that allows us to automatically apply the correct theme based on the Ubuntu flavor that is detected when the application is started.
Another very interesting package is yaru_widgets with which very useful widgets are made available to structure our applications on Ubuntu and give them a cohesive and integrated look in the system:
YaruMasterDetailPage: UI skeleton that adapts its navigation to the window width, with one layout for a wide/landscape window and one layout for a narrow/portrait window;
Yaru*Rowmakes it easy to put widgets in a consistent row-container;
YaruPagecreates a scrollable, always-the-same-size container page;
YaruSectioncreates a container with a rounded border and a headline;
YaruTabbedPagetabbed view of YaruPages with sane constraints and looks;
There is also a web version with which to browse all the widgets contained in the package:
Wanting to extend the integration of our Flutter app more generally to the Linux desktop, and not just the Ubuntu desktop, it is possible to use Libadwaita, a very useful package to integrate our Flutter applications in GNOME, one of the most popular desktop environments for Linux used by many Linux distributions including Ubuntu and Fedora.
For those wishing to learn more about the awesome packages that can be used with Flutter for Linux, you can take a look here: Awesome Flutter Linux. Within the repository there is also a list of repo of Flutter applications made specifically for the Linux desktop, I would like to report some of them here:
- AppImagePool: A simple, modern AppImageHub Client, powered by flutter.
- Ubuntu Desktop Installer: A modern implementation of the Ubuntu Desktop installer, using subiquity as a backend and Flutter for the UI.
- Ubuntu Desktop Settings: An Ubuntu Desktop system settings app made with Flutter..
Canonical, the company behind the development of Ubuntu, is pushing hard for the development of Flutter applications for Linux and on its GitHub profile we can find many repos about Flutter, more and more companies are moving in the same direction and the awesome-flutter repo is another example of the efforts the developer community is making to bring more apps and features to Linux. In the coming months, I am sure that more and more support for Flutter will be added and more and more applications will be developed with our beloved Framework.
See you in the next article and in the meantime Happy Fluttering 💙