What is the Difference Between fontSize and textScaleFactor In Flutter?

· 3 min read
What is the Difference Between fontSize and textScaleFactor In Flutter
What is the Difference Between fontSize and textScaleFactor In Flutter

When building a flutter mobile application we can apply font size and style as per customer requirement using different properties from a flutter widget so in this article we will go through what is the difference between fontSize and textScaleFactor in Flutter.

What is the Difference Between fontSize and textScaleFactor In Flutter?

When we talk about rendering both the widget there is no difference but when it comes to purpose there are quite different.

Font-size is usually a per-component value. While the scale factor is more global.

The fact that you can override the scale factor directly on the Text is just a bonus.

In your typical application, you’ll have the following:

MediaQuery(
  data: MediaQuery.of(context).copyWith(textScaleFactor: 2.0),
  child: Whatever(
    child: Text("Foo", style: Theme.of(context).textTheme.headline),
  ),
);

Basically, consider textScaleFactor as a zoom option. While font-size is used to separate a title from its content.

textScaleFactoris used for accessibility.

There is an Android system option that increases text size, not the overall UI scale.

There doesn’t seem to be a technical difference.

From the TextStyle docs:

/// During painting, the [fontSize] is multiplied by the current
/// `textScaleFactor` to let users make it easier to read text by increasing
/// its size.

Font size actually is the size that is given by the programmer in his application and does not change with the user setting.

for example:-

Text('Always the same size!', style: TextStyle(fontSize: 20));
This text ALWAYS has a size of 20 device pixels, no matter what the user changed in
his / her device settings.

Now have a look at how TextScaleFactor affects this scenario…

final scaleFactor = MediaQuery.of(context).textScaleFactor;
Text('This changes!', style: TextStyle(fontSize: 20 * scaleFactor));

This text on the other hand also has a size of 20 if the user didn’t change anything in the settings because textScaleFactor by default is 1. But if changes were made, the font size of this text respects the user settings.

Conclusion:

Thanks for being with us on a Flutter Journey !!!

Keep Learning !!! Keep Fluttering !!!

In this article, we have been through what is the difference between fontSize and textScaleFactor in flutter.

Drop us your valuable suggestion/feedback to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply