What is the difference between fontSize and textScaleFactor in Flutter?

Question

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

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

Answer 1

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.