Building Flutter apps for multiple screen sizes and devices

Viktor Lidholt
Oct 27, 2019 · 4 min read

At Newsvoice we have always been mobile first, over 95% of our app users are on mobile phones. We have really high ratings on App Store and Google Play, but they have occasionally been dragged down by tablet users complaining about the poor experience on tablets and the lack of a landscape mode. It was definitely time for a tablet version. We had a large iPad Pro to test on, but how about all other possible screen sizes?

Image for post
Image for post
Newsvoice on different devices

If you enjoy this article and find it useful, please consider supporting me by downloading the free Newsvoice app and giving us a five star review. It means a lot, and you will get a great news app too. Thanks!

Running iOS Simulator with multiple windows

Enter DeviceSimulator

Image for post
Image for post
Device simulator in action

By inserting DeviceSimulator at the root of your widget tree, you allow it to override the properties of MediaQuery and Theme. DeviceSimulator will emulate different resolutions and devices, it will even render a mocked up system status bar. You can quickly slide between the screen sizes and your app will update immediately.

For obvious reasons, device simulator will only work on larger devices. However, it works well in iOS Simulator if you don’t have a tablet for testing. An added benefit is that DeviceSimulator makes it really easy to take screenshots of different devices for App Store and Google Play. This is especially convenient as App Store requires you to include screens from a minimum of four different devices.

MediaQuery is your best friend

Depending on the screen size you can choose to build a different set of widgets. For instance, on a larger screen you may want to use a drawer that is always visible, while you may want to show it modally on a smaller phone screen.

Image for post
Image for post

You can accomplish this by getting the MediaQuery of the current context and building a different set of widgets depending on the screen size.

Adapting to the size of the parent container

The example above will return different widgets depending on the size of its parent container.

Different looks for each platform

Image for post
Image for post
Example of the same screen on iOS vs Android, emulated with DeviceSimulator

Luckily, Flutter provides components that feel native to each platform. Material design is native to Android, but you can also access the iOS style components through the Cupertino library. Some widgets have the .adaptive constructor, use it to create widgets that feel native to the platform you are running on.

You can also use the current Theme to figure out which type of platform you should build for. An equivalent to the example above would be to write the code like below. (This is obviously not recommended for the widgets that have the .adaptive constructor, but the pattern is useful for more complex situations.)

Conclusion

Happy coding!

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store