Why multiple windows support for Flutter desktop apps is needed

One current limitation that Flutter desktop apps have is that they are confined to a single window. This makes sense on mobile where an app takes up the whole screen but for Flutter desktop apps there’s much more space to take advantage of. We know that many members of the Flutter community – including us here at Canonical – have been waiting patiently to break out of that single window.

Canonical has a long history of working with graphical environments having produced Ubuntu Desktop for over 20 years. We want to make sure that the Flutter multi-window support works across a diverse range of desktops including all of those across the extremely varied Linux ecosystem. We’re also thinking ahead about how to make sure Flutter desktop apps continue to work well as the concept of a desktop becomes more diverse.

Proposed solution for Flutter desktop apps

Desktop applications are made up of multiple windows that are used for all sorts of things, including tooltips, dialogs and menus. In the comparison below you can see the same Flutter desktop app running with the current version of Flutter on the left, and the multi-window version on the right. Notice how the app on the right feels more integrated: menus and tooltips are better aligned to the mouse cursor instead of being shifted or cropped to fit inside the window.Comparison of single window (old) vs multi-window (new)

The best thing about the approach we’ve taken is both apps above are using the same standard Flutter Material widgets – the multi-window support is applied automatically. If the app is run in a situation where multi-window is not applicable (e.g. mobile), the app will revert to the traditional behaviour.

When you’re ready to build a more complicated multi-window app this is easy to do as each window just fits into the Flutter widget tree.

Details for seasoned Flutter developers: you’ll need to make a small update to the runner, and if you have an unmodified runner this is easy to migrate. A small change is also required to the main function in the Dart code.