flutterdartfont-size

How to manage global textScaleFactor in Flutter app properly?


Flutter apps react on system large text making all Text widgets really large. I want to limit textScaleFactor for Text widgets but I want to do it globally not in each Text widget that I'am using.

Now after enabling large text I got exceptions like

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flutter: The following message was thrown during layout: flutter: A RenderFlex overflowed by 14 pixels on the bottom.

What is proper way to do it? One way is to create some wrapper widget instead of using Text, but maybe it can be solved other way?

image 1 image 2


Solution

  • This solution was presented during Google I/O'19 (around the 20-minute mark):

    MaterialApp(
      builder: (BuildContext context, Widget child){
        final MediaQueryData data = MediaQuery.of(context);
        return MediaQuery(
          data: data.copyWith(
            textScaleFactor: data.textScaleFactor * (_isPassive ? 2 : 1)
          ),
          child: child,
        );
      },
    

    If you wish that everything had a fixed textScaleFactor, you could replace data.textScaleFactor * (_isPassive ? 2 : 1) for a single number. 1.0 would make your design to always follow your fontSizes.