Bringing a number of home windows to Flutter desktop apps

Faheem

Over the previous 5 years, Canonical has been contributing to Flutter, together with constructing out Linux help for Flutter purposes, publishing libraries to assist combine into the Linux desktop and constructing fashionable purposes for Ubuntu, together with our software store. Final 12 months we announced at the Ubuntu Summit that we’ve been engaged on bringing help for a number of home windows to Flutter desktop apps.

Why a number of home windows help for Flutter desktop apps is required

One present limitation that Flutter desktop apps have is that they’re confined to a single window. This is sensible on cell the place an app takes up the entire display screen however for Flutter desktop apps there’s rather more house to benefit from. We all know that many members of the Flutter neighborhood – together with us right here at Canonical – have been ready patiently to interrupt out of that single window.

Canonical has an extended historical past of working with graphical environments having produced Ubuntu Desktop for over 20 years. We need to be sure that the Flutter multi-window help works throughout a various vary of desktops together with all of these throughout the extraordinarily various Linux ecosystem. We’re additionally considering forward about how to verify Flutter desktop apps proceed to work nicely because the idea of a desktop turns into extra numerous.

Proposed resolution for Flutter desktop apps

Desktop purposes are made up of a number of home windows which can be used for all types of issues, together with tooltips, dialogs and menus. Within the comparability beneath you’ll be able to see the identical Flutter desktop app operating with the present model of Flutter on the left, and the multi-window model on the fitting. Discover how the app on the fitting feels extra built-in: menus and tooltips are higher aligned to the mouse cursor as a substitute of being shifted or cropped to suit contained in the window.

Comparability of single window (outdated) vs multi-window (new)

The most effective factor concerning the strategy we’ve taken is each apps above are utilizing the identical commonplace Flutter Materials widgets – the multi-window help is utilized robotically. If the app is run in a scenario the place multi-window just isn’t relevant (e.g. cell), the app will revert to the normal behaviour.

While you’re able to construct a extra sophisticated multi-window app that is straightforward to do as every window simply suits into the Flutter widget tree.

Particulars for seasoned Flutter builders: you’ll have to make a small replace to the runner, and you probably have an unmodified runner that is straightforward emigrate. A small change can also be required to the principle operate within the Dart code.

Rolling this out

We’re presently reviewing the modifications to the Flutter engine and framework. We’re engaged on a technique to simply take a look at these modifications however when you’re up for the problem go forward and build our branches and test it yourself

When these modifications have landed, constructing utilizing the newest model of Flutter will allow your app to make use of multi-window on the Home windows working system. We’re arduous at work increasing this availability, and we are going to quickly launch multi-window help to each Linux and MacOS-based platforms.

We look ahead to seeing what wonderful apps you’ll construct sooner or later!

Leave a Comment