Flutter - Using TextScaler Examples

This tutorial shows you how to use TextScaler in Flutter.

Flutter 3.16 adds a new class that allows you to set the text scale for a better readability. The class name is TextScaler. It's created to replace the textScaleFactor property, which only supports double type, in order to support non-linear text scaling in the future. Below I'm going to explain how to use it.

Using TextScaler

TextScaler is an abstract class, which means you cannot instantiate it. However, Flutter already creates an implementation of the class named _LinearTextScaler. Despite _LinearTextScaler is a private class, you can create an instance of it using the following factory constructors.

  const factory TextScaler.linear(double textScaleFactor) = _LinearTextScaler;
  static const TextScaler noScaling = _LinearTextScaler(1.0);

The upper one allows you to define the scale factor. It scales the font size by multiplying it with the given scale factor. The second one is a shorthand if you don't want to scale the input font size, which is equivalent to TextScaler.linear(1).

Text Widget

For example, we have a Text widget with a font size of 20.0. Below is the original size of the text

Let's try to set the scale factor. The code below defines a TextScaler with a linear scale factor of 2.0

  Text(
    'Woolha.com',
    style: TextStyle(fontSize: 20.0),
    textScaler: TextScaler.linear(2.0),
  )

Below is the output where the scale of the text is multiplied by 2.

If the scale factor is smaller than 1.0, the text will look smaller than the original scale. Below is the output where the scale is set to 0.5.

If the scale factor is 1.0, it's recommended to use the predefined TextScaler.noScaling static constant.

  Text(
    textScaler: TextScaler.noScaling,
    // Other arguments
  )

RichText Widget

The usage on RichText widget is very similar. Just pass a value of type TextScaler as the textScaler argument.

  RichText(
    text: const TextSpan(
      style: TextStyle(color: Colors.black),
      children: <TextSpan>[
        TextSpan(text: 'Woolha ', style: TextStyle(color: Colors.teal, fontSize: 18)),
        TextSpan(text: 'dot ', style: TextStyle(fontSize: 10)),
        TextSpan(text: 'com', style: TextStyle(decoration: TextDecoration.underline, fontSize: 10)),
      ],
    ),
    textScaler: const TextScaler.linear(2.0),
  )

Output:

MediaQuery

It's also possible to set the TextScaler for a widget subtree by using MediaQuery as shown below. Just copy the MediaQuery from the ancestor and set the textScaler that you want to use.

  MediaQuery(
    data: MediaQuery.of(context).copyWith(textScaler: const TextScaler.linear(2.0)),
    child: const MyText(),
  )

Then, call MediaQuery.textScalerOf(context) to get the TextScaler value. In the example below, we use it to compute the font size using TextScaler.scale.

  class MyText extends StatelessWidget {
    const MyText({super.key});

    @override
    Widget build(BuildContext context) {
      return Text(
        'Woolha.com',
        style: TextStyle(fontSize: MediaQuery.textScalerOf(context).scale(10.0)),
      );
    }
  }

Migrating From textScaleFactor

If you already use textScaleFactor in your existing code, you should start to migrate to use TextScaler because textScaleFactor will be removed in the future release. This change affects some classes that use textScaleFactor such as MediaQueryData, RichText, and Text. You can read the migration guide from Flutter.

Summary

The TextScaler class can be used to define how to scale a text in Flutter. To use it, you have to create a TextScaler object and pass it as the textScaler argument of a widget that supports that type of parameter.