Adapting Wonderous to larger device formats

Using Flutter to design mobile applications that look beautiful on all devices

Today, we’re announcing the next version of Wonderous, which adds support for foldable devices, tablet, and tablet landscape. This iteration allowed us to test Flutter’s ability to adapt to different device formats, and the code repo on GitHub provides a reference for leveraging adaptive design.

In this post, we’ll walk through some of what we learned. While our focus was on apps for handheld devices, many of these concepts can be adapted to desktop and web.

Narrowing focus

When thinking through adaptive design, designers should first ask “What form factors are we possibly supporting?” Flutter supports nearly every device, but app creators should be explicit about what formats their app has been designed and tested for. Narrowing the focus allows designers to carefully consider how to optimize the digital experience for the canvas that is available. Without careful design, layouts suited for mobile can look unpolished on larger form factors.

Taking advantage of extra real estate

When adapting the design of an app to larger screen sizes, designers should consider how to take advantage of the extra real estate. This might mean enhancing the presentation by showing a different layout. For example:

iPad Pro 12.9-inch portrait and landscape

Adding additional rows or columns:

iPad Pro 12.9-inch and iPhone 11

Or changing columns to rows:

iPad Pro 12.9-inch portrait and landscape

Alternatively, you might use the extra canvas to do more of the same. Wonderous features beautiful illustrations so the larger screen sizes allowed us to showcase even more of this work:

iPhone 11, Samsung Fold4 closed, iPad Pro 12.9-inch

Consider approaches for how UI components can react

As the screen becomes larger, you’ll need to consider how your app’s UI components will react. For example, you might scale the component to fit the available space:

Samsung Fold4 open and iPhone 11

You might also consider keeping the content center weighted, or pinning certain assets to the device bounds:

Adaptive design with Flutter

There are many features in the Flutter framework that were useful for adapting Wonderous. For example:

• Hot reload empowered the design team to make small adjustments in real time
• Dynamic padding and font sizes
• The Flex widget dynamically displays either a row or a column
• MediaQuery returns details like screen size and device orientation

You can read more specifics on the technical implementations on gSkinner’s website. You can also learn more about designing apps for larger screen sizes on Android in Large screen app sizes on the Android docs site.

We hope you’ll install Wonderous and leverage the code as a reference while developing your own apps. If you have any feedback on the app itself, please file an issue on Github. If you have any thoughts on adaptive design with Flutter, feel free to send me a message on Twitter (@leighajarett) or LinkedIn (Leigha Jarett).