Page Cover
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.
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.
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.
dependencies:
multi_screen_layout: ^2.0.0Run
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.
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.
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!
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.
Written by