Should I use absolute pixel values in my Flutter widgets, or should I scale them to the screen?

Question

I am coming to Flutter from a web background, where I am used to defining screen elements in terms of percentages of the height and width of the screen, or of elements that contain them.

I just completed a course.

Now that I am enthused and want to start building an app, I am a little confused, as the course only spoke of heights & widths in absolute pixel values. I can see this being problematic with different aspect rations, and especially with different orientations.

Is there a canonical approach to this? The official docs also seem to use absolute pixel values, so maybe I am missing a fundamental point.

A search suggests that I might use MediaQuery and then scale everything according to that. But, I don't see widespread use of that in code samples.

Is there a non-opinionated standard approach?

Answer 1

I am a little confused, as the course only spoke of heights & widths in absolute pixel values.

Actually, flutter uses density independent pixels (dp) for width/height arguments. dp actually scale with resolution, meaning 1 dp is displayed as the same PHYSICAL distance on every device. You don't have to worry about your elements being displayed at different sizes, just because the resolution of the screen they're on changes.

To be precise, flutter calls them logical pixel and:

By definition, there are roughly 38 logical pixels per centimeter, or about 96 logical pixels per inch, of the physical display.

So think about them as you would think about cm.

I am used to defining screen elements in terms of percentages of the height and width of the screen

Nonetheless, you might want to layout your widgets in a relative fashion (relative to the screen or the parent). For that purpose, flutter has different solutions:

1. Flexible
2. Expanded
3. Wrap
4. MediaQuery
5. LayoutBuilder
6. GridView
7. other layout options

Is there a non-opinionated standard approach?

It is a very opinionated question to begin with, but for example, Material design is a common standard for mobile-design. Flutters layout widgets are based around this approach.

But in the end, it is your design choice. For example, to achieve a responsive layout grid you could use Wrap, or you could use LayoutBuilder and determine yourself how you would like to layout rows and columns.

Answer 2

I would recommend you to scale widgets based on the size of the screen. This allows your application to be more flexible and adjust to various platforms and sizes such as large tablets or small phones. In order to do this, I recommend you to use the widget FractionallySizedBox which allows you to size widgets using a percentage of the screen size. For example, if you want a button widget to fill up 50 percent of a screen's width you can use the following code:

Container(
  alignment: Alignment.center,
  child: FractionallySizedBox(
    widthFactor: 0.5,
    child: FlatButton(
      onTap: () {},
      child: Text("PRESS HERE")
    )
  )
)

This code creates a button positioned in the center of the screen with a width of 50 percent of the screen size's width. You can also change the height of the button with the heightFactor field. By using this code the button widget will scale up and scale down for different screen sizes while still maintaining a size of half of the screen's width. For more resources, you should check out this video by the Flutter Team: https://youtu.be/PEsY654EGZ0 and their website on the FractionallySizedBox here: https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html.

The FractionallySizedBox however is only one of many different approaches to making your flutter app fit to different screen sizes. Another approach is to use the AspectRatio Widget. Below is an example of this:

Container(
  alignment: Alignment.center,
  child: AspectRatio(
    aspectRatio: 3/2
    child: FlatButton(
      onTap: () {},
      child: Text("PRESS ME")
    )
  )
)

This code will create a button with a 3 to 2 ratio between its width and height. If the screen size changes the button will increase or decrease in size accordingly while again maintaining the 3 to 2 ratio. If you want more information the Flutter team also has a video on it (https://youtu.be/XcnP3_mO_Ms) along with some documentation here:(https://api.flutter.dev/flutter/widgets/AspectRatio-class.html).

Both widgets are perfectly fine and are considered standard practice to use but I personally use FractionallySizedBox more.

I hope my answer was helpful.