CODEWITHSUNDEEP
flutter
Tobi Obeck
Tobi Obeck

Reputation: 2317

What is the difference between fontSize and textScaleFactor in Flutter?

The default for fontSize is 14.0. Therefore, textScaleFactor: 2.0 appears to be the same as fontSize: 28.0 as seen in my code example:

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Title')),
        body: Row(
          children: <Widget>[
            new Text("Jane", textScaleFactor: 2.0),
            new Text(" Doe", style: new TextStyle(fontSize: 28.0)),
          ],
        )
      )
    );
  }
}

enter image description here

What are the pros and cons? Are there any recommendations when to use one or another in specific cases?

Upvotes: 17

Views: 18931

Answers (3)

Pasindu Jayanath
Pasindu Jayanath

Reputation: 943

  • fontSize is overridden by device system font size configurations.
  • textScaleFactor overrides device system font size configurations.

Upvotes: 3

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277567

There's no difference between them in the rendering. What changes are their purpose.

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.

Upvotes: 19

boformer
boformer

Reputation: 30103

As far as I understand, 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.

Upvotes: 8

Related Questions