Question

How to make Flutter app font size independent from device settings?

I needed to make my entire app independed from device's font size settings. I found that I could set textScaleFactor: 1.0 for every text view manualy. It's a good solution for a few Text widgets, but not good for a big app with dozens of Text widgets.

 46  48116  46
1 Jan 1970

Solution

 88

First things first I have to say that it's a bad idea to make your text irrelevant to phone settings. It makes your app less friendly for users with disabilities such as blindness or motor impairment. As a developer you should make sure your layout has enough room to render all it's contents when the font sizes are increased. But sometimes we actualy need font size to be fixed.

All you have to do is create Material App Builder to set Media Query property "textScaleFactor: 1.0" for the entire app.

MaterialApp(
  builder: (context, child) {
    return MediaQuery(
      child: child,
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
    );
   },
)

Solution was found here.

2019-12-02

Solution

 57

You are right Oleksandr, Setting the textScaleFactor to 1.0 and calling it a day means ignoring your user's needs. They’re asking for a bigger text size and you are not delivering it.

Let's make it more adaptive

You can choose minimum factor and maximum factor and that you can give comparatively.

return MaterialApp(
        builder: (context, child) {
          final mediaQueryData = MediaQuery.of(context);
          final scale = mediaQueryData.textScaleFactor.clamp(1.0, 1.3);
          return MediaQuery(
            child: child,
            data: MediaQuery.of(context).copyWith(textScaleFactor: scale),
          );
        },
);

Instead of a hardcoded textScaleFactor, we can give a constrained system value.

By using clamp(), we're giving the system textScaleFactor a lower and upper bound.

Source : Restricting system textScaleFactor, when you have to

Update Flutter 3.16.9

'textScaleFactor' is deprecated and shouldn't be used. Use textScaler instead. Use of textScaleFactor was deprecated in preparation for the upcoming nonlinear text scaling support. This feature was deprecated after v3.12.0-2.0.pre.

MaterialApp(
  builder: (context, child) {
    // Retrieve the MediaQueryData from the current context.
    final mediaQueryData = MediaQuery.of(context);

    // Calculate the scaled text factor using the clamp function to ensure it stays within a specified range.
    final scale = mediaQueryData.textScaler.clamp(
      minScaleFactor: 1.0, // Minimum scale factor allowed.
      maxScaleFactor: 1.3, // Maximum scale factor allowed.
    );

    // Create a new MediaQueryData with the updated text scaling factor.
    // This will override the existing text scaling factor in the MediaQuery.
    // This ensures that text within this subtree is scaled according to the calculated scale factor.
    return MediaQuery(
      // Copy the original MediaQueryData and replace the textScaler with the calculated scale.
      data: mediaQueryData.copyWith(
        textScaler: scale,
      ),
      // Pass the original child widget to maintain the widget hierarchy.
      child: child!,
    );
  },
);
2021-03-17