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

This Is working in my Project

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

With Getx

GetMaterialApp(
              debugShowCheckedModeBanner: false,
              theme: ThemeData(primaryColor: AppColor().colorPrimary),
              translations: LocaleString(),
              navigatorKey:navigatorKey,
              locale:
                  Locale(Utils.language.value, Utils.language_country.value),
              routes: Routes.getRoutes(),
                builder:(context,child){
                  return MediaQuery(data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0), child: child);
                }
            );

Answer 4

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),
            );
          },
        ),

Answer 5

The @Pratik Butani Answer is absolutely right. But If you are returning GetMaterialApp or any other widget. Remember the builder must be in bottom.

 return GetMaterialApp(

      theme: ThemeData(
        textTheme: GoogleFonts.aBeeZeeTextTheme(
          Theme.of(context).textTheme
        )
      ),

      initialBinding: MainBinding(),
      debugShowCheckedModeBanner: false,
      initialRoute: Routes.splashRoute,
      getPages: Routes.routes,

        builder:(context,child){
        final mediaQueryData = MediaQuery.of(context);
        final scale = mediaQueryData.textScaleFactor.clamp(0.8, 0.9);
          return MediaQuery(data: MediaQuery.of(context).copyWith(textScaleFactor: scale), child: child!);
        }
    );

Answer 6

Here the simple solution to prevent breaking UI when change device font settings

Use this code for solution inside the main.dart under Material app

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

Here the sample code

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'App Title',
        theme: theme(),
        initialRoute: SplashScreen.routeName,
        routes: routes,
        ///Here the code for prevent font size when change mobile
        builder: (context, child) {
          return MediaQuery(
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: child,
          );
        },
    );
  }