How to use MediaQuery to set scaleFactor for text in Flutter?

text dart flutter scale

13,019

You can solve your issue wrapping your Text widget into a Flexible to avoid the overflow. I put maxLines 1 to see the Fade overflow :

          new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Flexible(
                      child: new Text(
                        "Account Name: Let's Flutter all day long till down with fancy User Interface",
                        maxLines: 1,
                        style: new TextStyle(
                            fontSize: myTextSize, color: Colors.black54),
                        overflow: TextOverflow.fade,
                      ),
                    ),
                    new Text(
                      "109.65",
                      style: new TextStyle(
                          fontSize: myTextSize,
                          fontWeight: FontWeight.bold,
                          color: Colors.black),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),

I added a global variable :

  var myTextSize = 12.0;

Also you can use the LayoutBuilder in order to get the maxHeight or maxWidth of your device, after that you can change the text size like this example:

  var myTextSize = 12.0;

  return LayoutBuilder(builder: (context, boxConstraints) {
        print(boxConstraints.maxHeight);
        if (boxConstraints.maxHeight <= 667.0){
            myTextSize = 10.0;
        }
        return Container(
          child: new ListTile(
            trailing: new Icon(Icons.chevron_right),
            onTap: () {},
            title: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Text(
                  "My Account Details:",
                  style: new TextStyle(
                      fontSize: 14.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.black),
                  overflow: TextOverflow.fade,
                ),
              ],
            ),
            subtitle: new Column(
              children: <Widget>[
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Text(
                      "Hello Flutter",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                    new Text(
                      "Today is **************",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Text(
                      "Name",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                    new Text(
                      "Dart",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Text(
                      "Surname",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                    new Text(
                      "Flutter",
                      style: new TextStyle(
                          fontSize: myTextSize,
                          fontWeight: FontWeight.bold,
                          color: Colors.black),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Flexible(
                      child: new Text(
                        "Account Name: Let's Flutter all day long till down with fancy User Interface",
                        maxLines: 1,
                        style: new TextStyle(
                            fontSize: myTextSize, color: Colors.black54),
                        overflow: TextOverflow.fade,
                      ),
                    ),
                    new Text(
                      "109.65",
                      style: new TextStyle(
                          fontSize: myTextSize,
                          fontWeight: FontWeight.bold,
                          color: Colors.black),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      });

13,019

Nick

Updated on July 02, 2022

Comments

Nick almost 2 years

With MediaQuery I can get height and width of my Samsung S7 Edge screen size so I can work with it. But how to use MediaQuery to layout the multiple column dynamic text in ListTile? In my demo project I set the text size to 12 and in Samsung S6 I get overflow issues... Any info or example for text scale factor in Flutter?

I found one solution here (How can Flutter handle dpi text and image size differences) and I try to build demo project. S6 textScaleFactor is 1.1 an the S7 is 1.0....

My original demo app that I test it with S7 text size was 12. And when I try to test it in S6 I get overflow issue... I need to scale down or up with MediaQuery to set text scale factor, so it can work most of the devices without getting a overflow issues?

In ListTile I have a column that has 4 separate lines of text and all the value comes from database. If the text value is long I get a overflow issues on S6 device. So my question is How to use MediaQuery to set scaleFactor for text in Flutter?

Update:

new ListTile(
    trailing: new Icon(Icons.chevron_right),
    onTap: () {

    },
    title: new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Text(
          ‘My Account Details:’,
          style: new TextStyle(
              fontSize: 14.0, fontWeight: FontWeight.bold, color: Colors.black),
          overflow: TextOverflow.fade,
        ),
      ],
    ),
    subtitle: new Column(
      children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Text(‘Hello Flutter’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),

            new Text(’Today is **************’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Text(‘Name’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
            new Text(‘Dart’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Text(’Surname’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
            new Text(‘Flutter’,
              style: new TextStyle(
                  fontSize: 12.0, fontWeight: FontWeight.bold, color: Colors.black),
              overflow: TextOverflow.fade,
            ),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Text(‘Account Name: Let’s Flutter all day long till down with fancy User Interface’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
            new Text(‘109.65’,
              style: new TextStyle(
                  fontSize: 12.0, fontWeight: FontWeight.bold, color: Colors.black),
              overflow: TextOverflow.fade,
            ),
          ],
        ),
      ],
    ),
  ),

Nick almost 6 years

where did you get .maxHeight <= 667.0 ? I am going to try it now
diegoveloper almost 6 years

If you use LayoutBuilder, you cant get the constraints and make your validation, I was using a random number, you have to use your own value based on your device
Nick almost 6 years

looks like is working... My emulator Nexus 4 maxHeight is 302.8 so all the text fontsize become 10. So, how do I use in all devices?
diegoveloper almost 6 years

You can define some ranges 300 , 400, 600 and change according that. material.io/tools/devices