Building fold-aware Flutter apps

For the first time in a long time we are seeing mobile devices hit the market that have radically different core user experiences.

I’m talking about devices like the Surface Duo, Galaxy Fold, Galaxy Flip, LG Wing, etc. The list goes on longer than you might think and the majority of these devices have been released within the last year.

Microsoft’s Surface Duo
Microsoft’s Surface Duo
Samsung’s Galaxy Fold

This represents a shift and desire for the ability to see more and do more with the device you have on you at all times.

However without dedicated app support, these devices simply give the user more screen real estate.

I recently released multi_screen_layout to make it simple to add dedicated support for devices with folding or multiple screens and in this article I’ll show you how to use it.

First, tools

Most developers won’t have a folding phone, but don’t let that stop you. Microsoft has an Android emulator for the Surface Duo that works great. After you install it and boot it up, it should look like this.

Microsoft’s Surface Duo Emulator
Microsoft’s Surface Duo Emulator
Microsoft’s Surface Duo Emulator

The official Android Emulator was also recently updated to support folding.

Next step, build

Add multi_screen_layout to your dependencies. This lets you use some fold-aware Widgets and brings in the native Android code you need to support them.

Run flutter pub get and launch the app you would like to make “fold-aware”. For this article I’ll use the standard counter app.

When running on the Surface Duo you will see that you can have your app running on a single screen, or spanned across both screens.

Running on a single screen.
Spanned across both screens.

You can already see that even a simple counter app can be improved to better display on folding devices.

Below is the build method of the standard counter app you start with when running flutter create.

Build method for the starter counter app

For folding devices that have a hinge like the Surface Duo, it’s important to have your app content react to being spanned across both screens. Otherwise the hinge may block important information like we saw above.

TwoPageLayout is Widget provided by multi_screen_layout that conveniently splits the content around the hinge. Let’s try it out.

TwoPageLayout!

So far we have wrapped Center with a TwoPageLayout and copied the child content into the secondChild parameter. Let’s see how it looks.

TwoPageLayout — Running on a single screen.
TwoPageLayout — Spanned across both screens

Nice! We no longer have the hinge blocking our app’s content. TwoPageLayout always displays its child content but only displays secondChild when the app is spanned across both screens.

Time to adapt

Now let’s adapt the app’s UI to take advantage of both screens in the spanned state. To do this we will remove the duplicate content, just keeping the counter on the right.

As you see in the code snippet above, our secondChild now just displays the count, but larger.

We have a bit of a problem here. We are still duplicating content as the count is still present on the left screen. We could remove it, but we want to make sure the user can still see the counter when the app is running on a single screen or if the device only has a single screen.

MultiScreenInfo is another Widget provided by multi_screen_layout that we can use to help us. It provides information about the current state of the device related to folding and multiple screens.

As you can see above, we make sure to only display the counter value on the first screen if the app is not spanned across both screens. (Lines 16–29)

We don’t need to make any changes to secondChild, as it already doesn’t display unless the app is spanned.

Let’s take a look!

Updated counter app — looking normal on a single screen
Updated counter app — taking advantage of both screens!

There is so much more you can do with these devices and I hope this quick overview gives you some inspiration to build new and unique features.

The full code for this project is available here.

If you would like to see more from me in the future, follow me on Github or Twitter!

Senior Staff Engineer, Senior Manager at HomeX