How to seamlessly integrate Flutter apps in Ubuntu and Linux

How to seamlessly integrate Flutter apps in Ubuntu and Linux

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

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:

light-dark-theme-yaru.png

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 theme anddarkTheme properties of the MaterialApp:

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

Yaru Widgets

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*Row makes it easy to put widgets in a consistent row-container;
  • YaruPage creates a scrollable, always-the-same-size container page;
  • YaruSection creates a container with a rounded border and a headline;
  • YaruTabbedPage tabbed 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:

yaru-widgets-examples.png

GNOME integration

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.

awesome-flutter

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:

Conclusions

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 💙

The icon on the cover is from by: Linux free icon created by freepik, Ubuntu icons created by Pixel perfect, Computer icons created by Pixelmeetup on Flaticon.

Did you find this article valuable?

Support Flutter On Desktop by becoming a sponsor. Any amount is appreciated!