Larger Text setting scale the app font size in iOS

[ParkinWu]

Hi

In Settings -> General -> Accessibility -> Larger Text, we found the setting will scale the flutter page's font size，it is a great feature, but some layout in my app need fixed font size, so is there some properties or configs that i can disable it?

@kangwang1988

thanks

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel unknown, v0.9.2, on Mac OS X 10.14.1 18B45d, locale zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✗] Android Studio (not installed)
[✓] IntelliJ IDEA Community Edition (version 2018.1.6)
[✓] VS Code (version 1.23.1)
[✓] Connected devices (1 available)

! Doctor found issues in 2 categories.

[harisk92]

@ParkinWu I had same issue.The problem is the textScaleFactor :

The number of font pixels for each logical pixel.

For example, if the text scale factor is 1.5, text will be 50% larger than the specified font size.

The value given to the constructor as textScaleFactor. If null, will use the MediaQueryData.textScaleFactor obtained from the ambient MediaQuery, or 1.0 if there is no MediaQuery in scope.

Solution is to use builder inside materialApp and make a new MediaQuery object with fixed textScaleFactor :

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

Happy coding 👍

[jonahwilliams]

I would strongly recommend not disabling the textScaleFactor for the entire application, as it will severely degrade the user experience. For example, I have my textScaleFactor turned up to a modest 1.25 so that I can read my phone without glasses.

[jonahwilliams]

If a particular piece of text cannot be made bigger, it would be better to set the textScaleFactor on the Text widget itself: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/text.dart#L310

[harisk92]

@jonahwilliams I've had same issue I was getting a lot of bug reports that text is too large or too small and etc. and changing textScaleFactor just for Text didn't work for me because there were other components that were affected with system font settings.I agree with you disabling is not good practice but if you a large codebase and short deadlines it's most effective way.For other projects I made class FixedScaleText which extends Text and sets textScaleFactor to default value 1.0.

[ParkinWu]

@harisk92 work like a charm, thank you very much!

@jonahwilliams thanks for your reply, my app is a hybrid app with a large native code base，not support changing font size yet, font size changing only in some page seems strangly, ,my problem have been solved. the issue should be closed ☺

[ibrahimmorghim]

@harisk92 that's work for me too , thank you .

[bornecw]

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

In the following:
Widget build(BuildContext context) {
return new MaterialApp(
title: "VMobile",
theme: new ThemeData(
primaryColor: new Color(0xff494949),
accentColor: new Color(0xffE51837),
),
navigatorObservers: [observer],
home: LoginScreen(),
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/home':
return new MyCustomRoute(
builder: () => new ContractsHomeEdit(), settings: settings);
case '/login':
return new MyCustomRoute(
builder: () => new LoginScreen(), settings: settings);
}
},
);
}

[ibrahimmorghim]

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

In the following:
Widget build(BuildContext context) {
return new MaterialApp(
title: "VMobile",
theme: new ThemeData(
primaryColor: new Color(0xff494949),
accentColor: new Color(0xffE51837),
),
navigatorObservers: [observer],
home: LoginScreen(),
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/home':
return new MyCustomRoute(
builder: () => new ContractsHomeEdit(), settings: settings); case '/login': return new MyCustomRoute( builder: () => new LoginScreen(), settings: settings);
}
},
);
}

yes I used in Materialapp in first like this :-
`return ScopedModelDescendant(
builder: (context, child, model) => new MaterialApp(
builder: (context, child) {
return MediaQuery(
child: child,
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
);
},
onGenerateTitle: (BuildContext context) =>
Translations.of(context).title,
localizationsDelegates: [
const TranslationsDelegate(),
const FallbackCupertinoLocalisationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
locale: model.appLocal,
supportedLocales: model.supportedLocales,
initialRoute: '/',
routes: {
'/': (BuildContext context) => HomePage(),
},
theme: ThemeData(
primaryColor: Colors.deepOrange,
// scaffoldBackgroundColor: Colors.blue,
// dialogBackgroundColor: Colors.black,

              toggleableActiveColor: Colors.deepOrange,
              fontFamily:
                  model.getlanguage == Locale('en') ? 'Oswald' : 'Wagabat',
              unselectedWidgetColor: Color.fromRGBO(22, 65, 104, 1)),
        )); `

[nodermann]

You can set a limit after which you don't need to scale, as some apple apps do.

MaterialApp(
  builder: (BuildContext context, Widget child) {
    final MediaQueryData data = MediaQuery.of(context);
    return MediaQuery(
      data: data.copyWith(
        textScaleFactor: data.textScaleFactor > 2.0 ? 2.0 : data.textScaleFactor),
        child: child,
       );
    },
  debugShowCheckedModeBanner: false,
  title: 'Flutter app',
)

In addition, I added 2 functions that calculate the size for different cases.

1. Always returns a fixed text size, for any textScaleFactor:

double getFixedSize(double textSize) {
  return textScaleFactor != 1.0 ? textSize / textScaleFactor : textSize;
}

For example, you can use it for app title text.

2. Returns scaled textSize until specific scale is not reached, which is set by the second maxScaleFactor parameter:

double getScaledOrMaxSize(double textSize, double maxScaleFactor) {
 return textScaleFactor > maxScaleFactor
   ? textSize * maxScaleFactor / textScaleFactor
   : textSize;
}

This can be used for example for headers that are already large and you don't need to increase them even more.

I hope this helps you make good apps for visually impaired people while still leaving them beautiful.

Please rate it on StackOverflow https://stackoverflow.com/questions/56034572/how-to-manage-global-textscalefactor-in-flutter-app-properly/61893650#61893650

[VictorUvarov]

You can easily just clamp the text scale factor to a good range for your app.

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

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.