Flutter Responsive Layout

I am working on building a mobile application using flutter and am stuck on building a resposive login screen layout. To be precise, I am using the MediaQuery to find the screen size and to find the safe area and based on that I am spacing and building containers based on percentage of screen height. I would like to know if this is the best way or if I am unnecessarily complicating the entire process. I did come across a few youtube videos where most of them give random numbers but when I try doing that, my layout most often than not ends of overflowing!

So far, I have mostly done this with just mathematical calculations. i.e. I have stuck to calculating the available height (total height - safe area) and then built all my containers based on this height (including their spacing). But, I am struggling with getting the right font size and this constant struggle to balance the UI in both android and iOS setup is eating up most of my time.

Solution

I built hundreds of screens in Flutter. It is very rare that you need to use exact screen height for a layout. Most screens fall into one of the three categories:

There are too many elements to fit into a screen of any size.

In this case you wrap your layout in SingleChildScrollView widget that has a Column child, and then put all other widgets in that Column. Users scroll down to see all visible elements they need to see.

There are too many elements to fit into smaller screen sizes, but they fit into larger screens.

In this case you still wrap your layout in SingleChildScrollView widget. Then you make your layout look nice on larger screens, but users on smaller screens still have to scroll down. This is not ideal, but sometimes it's the right solution. Making design elements smaller on a small screen often makes it hard to use or even totally unusable. Plus, having various calculations related to a screen size in your layout logic makes it a nightmare to test your app: you have to test it on all sorts of screen sizes.

All design elements can fit into a small screen.

In this case you should use Flex widgets (like Column, Row, Spacer, Center, etc.) to create your layout. These widgets already have a logic for spacing their children in the available space (for example, using mainAxisAlignment and crossAxisAlignment properties in Column and Row).

There are also widgets that can take a specified percentage of a screen (or their parent widget), but I never use them. I can imagine situations where these widgets can be useful, but for the vast majority of designs using Flex layout is a better option that results in better looking screens.

If you post your design and the layout you came up with, we can point if there are ways to optimize it.