Flutter-Guidelines for small and large devices

Flutter is a very powerful tool to create apps for multiple platforms from a single code base. In this article, we will not learn about the flutter but some design guidelines/considerations so that the design look good on each and every mobile device.

I was working on a live Flutter Project and created and tested the app on Android devices and iPhones. It looks very good. The client was very happy but when he tested the app on iPad the design looks very strange/ugly, although it was a similar design that was on the iPhone. So I made some adjustments in the app code to make the design good on the large devices as well.

Below I will explain the above issue and guidelines to adjust the issue with the help of an example. I believe the solution will help you.

Let's go :)

I created a sample flutter app which just shows the list of movies from the API. Check the below images.

Design Comparision. Left Side (iPhone) and Right Side (iPad)

As you can see that the design on the iPhone (Left Side) looks much better than the design on the right side (iPad), although the design on the iPhone still can be improved. On the iPad, the image is not properly fitted, text looks small.

So to solve the above problem, first of all, we need to know the running device type i.e. either its iPhone or iPad. This can be determined from the width and height of the device but there is already a flutter package for this flutter_device_type.

To use the package follow the guidelines on https://pub.dev/packages/flutter_device_type

To know if its a device or tablet:

Device.get().isTablet // this will be true if the device is iPad or Android tablet.

I created a class dimens.dart where I have defined the dimensions for iPad and iPhone.

dimens.dart

I also added a condition if the device is iPad then it must show 2 movies in a row otherwise 1.

gridView-crossAxisCount

Final output

Final output. Left Side (iPhone) and Right Side (iPad)

As you can see that now the design looks much better than the previous one. On the iPhone, it shows the one movie in a row, and on the iPad, it shows 2 movies in a row.

This is how I solved the design issue on my live flutter project.

Tip:

Don’t hardcode the dimensions such as font size, width, and the height of widgets. Create a separate file for them for e.g: dimens.dart and give them the values based on the device type.

Source Code:

https://github.com/deepak786/flutter-design-guidelines-sample

Thanks to @Androidhive for the movies JSON API. http://api.androidhive.info/json/movies.json

Thank you for reading the article. I hope you like that. There can be other ways to make the design responsive. So don’t forget to share your thoughts :)