Foldable devices have recently entered the market and have brought with them new paradigms for browsing and using our apps. Microsoft is very active in this area both with its device: Surface Duo, and the collaboration with the Flutter team to improve support for these types of devices.
In this article, we will look at the navigation patterns present in foldable devices and how these are supported by Flutter.
Dual-screen app patterns
Dual-screen devices offer developers new ways to build their own apps to make the most of the screen space available. Depending on the type of experience we want to give to our users, patterns have been defined for the arrangement of the contents on the screen:
- Extended canvas: this is the simplest way to take advantage of all the space available to us as our app is extended on both screens, this use is recommended for all those applications that have "free" content to show, in which the user can easily navigate it in its entirety such as a map or a canvas for drawing;
- List - Detail: this is another fairly common pattern to exploit and affects all those applications that have a detail-list concept for their content such as messaging or email applications. In this case, the contents of the list (mail, chat, notes) are placed on the left screen and the details of the content are displayed on the right screen;
- Two Page: this pattern is very common and recommended in all those applications that simulate the experience of a book or which by their nature have content that is already paginated or similar to that of a document. In this way it is possible, with a naturally already divided content, to place it on the two screens.
- Dual View: this pattern is very interesting when you want to create applications that have the same type of content with two different views, allow the comparison of two similar objects to view the differences or make comparisons. Think for example of an e-commerce application that compares two similar objects or an app for searching for commercial activities that on one screen shows the map with the activities and on the other screen shows the list of information about shops or restaurants;
- Companion Pane: this pattern allows you to take advantage of the additional space made available by the second screen to add complementary information that could not be seen using only a single screen. Very useful for example in all applications that allow users to interact with content by separating the interactive part such as video or images in games or editing applications from the controls like timelines and buttons.
Orientation
A fundamental role is also given by the orientation of the device which can be used both in portrait mode (left and right screen) and in landscape (screen above and below). In these cases, the simplest way to manage the change of orientation is left <-> above and right <-> below, but depending on the type of application, content, or user, it may be necessary to revise this choice.
Flutter support for Foldables
Microsoft is actively working with the Flutter team to allow applications to take full advantage of the new form factor and allow applications to be used in both single screen or extended mode across two screens. Several new features have been introduced regarding MediaQuery, Hinge, display features, and the TwoPane widget. Let's give a description:
- MediaQuery: class on the Flutter SDK that gives you information about the device screen size, display density, text scaling so you can rearrange your app's content based on that;
- Hinge: is the physical separator between two displays on the device, Surface Duo has a vertical hinge between the two displays, however, the Galaxy Fold has a 0 height horizontal "hinge".
- Display features: lets you query properties of the display that can be non-functional or obstructed, for example, it gives you information about the hinge, fold, cutout, and the state of the devices like halfOpened, flat, flipped;
- TwoPane widget: layout that has two child widgets, which can be shown side-by-side, above-and-below, the relative size of the two widgets can be adjusted proportionally; and on dual-screen devices, the boundary snaps to the hinge area.
Conclusion
I think that these collaborations between companies on a specific product or technology have the positive effect of making Flutter grows in other aspects as well, one above all the Cross-Platform, as the additions or improvements that seem their own for the Surface Duo can be used to develop better apps for other devices as well.
Bye, Alberto
Links
