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

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

Use like this:

MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Container(child: SplashScreen()),
          builder: (context, child) {
            return MediaQuery(
              child: child!,
              data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            );
          },
        ),