Flutter, conform fontsize and maxline depending on dpi of device

Question

I have a application which has a couple buttons which contain an icon, a title, and some text. I and viewing the application on 3 android emulators. xxhdpi, hdpi, and mdpi created from Android Studio. However they all have different designs. How do I set it so that the are all somewhat aligned.

Now I'm under no illusion that I can get all three perfectly the same, however if I could just them similar I would be happen.

For example; hdpi text to fit in the card, and mdpi to us up a bit more space.

How do you design application for multiple dpi/resolution?

Theme:

textTheme: TextTheme(
  title: TextStyle(fontSize: 24.0, height: 1.0, color: Theme.of(context).primaryColor),
  headline: TextStyle(fontSize: 18.0,height: 1.0, color: Colors.white),
  subtitle: TextStyle(fontSize: 16.0,height: 1.0, color: Theme.of(context).primaryColor),
  body1: TextStyle(fontSize: 12.0, height: 1.1, color: Colors.black87),
),

Button:

return RawMaterialButton(
    child: 
    Container(
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        color: Colors.white,
        boxShadow: [
            BoxShadow(
            blurRadius: 2.0,
            color: Colors.grey,
            offset: Offset(0.0, 6.0),
            )
        ]),
    margin: EdgeInsets.all(5.0),
    padding: EdgeInsets.all(5.0),
    height: MediaQuery.of(context).size.height * 0.20,
    width: MediaQuery.of(context).size.width * 0.95,
    child: Row(
        children: <Widget>[
        Container(
            width: MediaQuery.of(context).size.width * 0.85,
            child: Column(
            children: <Widget>[
                Row(
                children: <Widget>[
                    Padding(
                    padding: EdgeInsets.all(4.0),
                    child: Image.asset(
                        _buttonIcon,
                        height: MediaQuery.of(context).size.width * 0.06,
                        width: MediaQuery.of(context).size.width * 0.06,
                        color: Theme.of(context).primaryColor,
                    ),
                    ),
                    Padding(
                    padding: EdgeInsets.fromLTRB(4.0, 4.0, 4.0, 4.0),
                    child: Text(
                        _buttonTitle,
                        style: Theme.of(context).textTheme.subtitle, 
                    ),
                    ),
                ],
                ),
                Container(
                child: Padding(
                    padding: EdgeInsets.all(4.0),
                    child: RichText(
                    maxLines: ((MediaQuery.of(context).size.height * 0.20) / Theme.of(context).textTheme.body1.fontSize).floor(),
                    overflow: TextOverflow.ellipsis,
                    text: TextSpan(
                        children: <TextSpan>[
                        TextSpan(
                            text: _buttonText,
                            style: Theme.of(context).textTheme.body1),
                        ],
                    ),
                    ),
                ),
                ),
            ],
            ),
        ),
        Container(
            child: Icon(
            Icons.keyboard_arrow_right,
            color: Theme.of(context).primaryColor,
            ),
        ),
        ],
    ),
    ),
    onPressed: _onPressed,
);

Screenshot:

score 0 · Answer 1 · answered Aug 12 '19 at 19:47

0

I think you need to interrogate the Mediaquery device sizes at the start and decide on the necessary scaling factor based on certain ranges rather than simply multiplying the returned size by a set scaling value in all cases. Looks like you need that extra level of control.

answered Aug 12 '19 at 19:47

GrahamD

2,952
3
15
26

Ah ok I'll look into the Mediaquery thing. Is there a golden ratio that is common place when coding for mobile devices. – Ross Aug 13 '19 at 06:56
There may be but I am not aware of any. I have tended to print the values I get back and make scaling decisions from that. You sometimes get values that surprise you due to how some screens/devices render pixels. There is quite a good answer on Mediaquery here https://stackoverflow.com/questions/50214338/flutter-error-mediaquery-of-called-with-a-context-that-does-not-contain-a-med – GrahamD Aug 13 '19 at 07:07
One other thing, you should probably only call Mediaquery at one place in your page and store the values returned in variables. Then use those variables in your rawmaterialbutton code. There will be a performance overhead with your multiple calls to it I believe. – GrahamD Aug 13 '19 at 07:10
Here is a note I made on Mediaquery values : / The size reported by MediaQuery is in logical pixels. This value multiplied by the // devicePixelRatio matches the stated screen resolution eg. Huawei P Smart screen is // 2060 x 1080, reported device width is 360 and pixelRatio is 3.0. // This means that the screen will appear narrower than a 2060 x 1080 device with a smaller // pixel ratio ie. better quality screen. – GrahamD Aug 13 '19 at 07:21

Flutter, conform fontsize and maxline depending on dpi of device

1 Answers1