'Prevent changing text size based device screen size Flutter

Iam using textScaleFactor in every Text widget in Flutter, but if the user change the display or font size from device settings. it change the size for all Text widgets of the whole app.

Is there any way to prevent listening to text sizes in the device settings from main function, MaterialApp or ThemeData?

I dont want to use MediaQuery because my app is very big and I cannot change every Text widget right now.

Thanks

fluttersizescreen


Solution 1:[1]

You can override the the text scale factor provided by the system like this:

MaterialApp(
  builder:  (BuildContext context, Widget child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0, ), //set desired text scale factor here
      child: child,
    );
  },
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

Source

This overrides the system text scale factor in your whole application to the factor you choose.

But this is a really bad practice. You should not rely on overriding system / accessibility setting to fix your ui. There are a lot of devices with a lot of form factors, screen resolutions, densities etc. The right way to approach this problem is to create a responsive ui, that can scale well for different screens, and settings. A good starting point is the official flutter site for responsive ui, and the auto_size_text package, that can save you a lot of trouble scaling texts.

Solution 2:[2]

This will work

return MaterialApp(
  builder: (context, child) {
    //ignore system scale factor
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(
        textScaleFactor: 1.0,
      ),
      child: child ?? Container(),
    );
  },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 zoli_a
Solution 2 Maksimilian Maksimov

Related Questions