Deprecate textScaleFactor in favor of TextScaler

Widgets provided by the Flutter framework are already migrated. Migration is needed only if you're using any of the deprecated symbols listed in the previous tables.

Migrating your APIs that expose textScaleFactor

Before:

abstract class _MyCustomPaintDelegate {
  void paint(PaintingContext context, Offset offset, double textScaleFactor) {
  }
}

After:

abstract class _MyCustomPaintDelegate {
  void paint(PaintingContext context, Offset offset, TextScaler textScaler) {
  }
}

Migrating code that consumes textScaleFactor

If you're not currently using textScaleFactor directly, but rather passing it to a different API that receives a textScaleFactor, and the receiver API has already been migrated, then it's relatively straightforward:

Before:

RichText(
  textScaleFactor: MediaQuery.textScaleFactorOf(context),
  ...
)

After:

RichText(
  textScaler: MediaQuery.textScalerOf(context),
  ...
)

If the API that provides textScaleFactor hasn't been migrated, consider waiting for the migrated version.

If you wish to compute the scaled font size yourself, use TextScaler.scale instead of the * binary operator:

Before:

final scaledFontSize = textStyle.fontSize * MediaQuery.textScaleFactorOf(context);

After:

final scaledFontSize = MediaQuery.textScalerOf(context).scale(textStyle.fontSize);

If you are using textScaleFactor to scale dimensions that are not font sizes, there are no generic rules for migrating the code to nonlinear scaling, and it might require the UI to be implemented differently. Reusing the MyTooltipBoxexample:

MyTooltipBox(
  size: chatBoxSize * textScaleFactor,
  child: RichText(..., style: TextStyle(fontSize: 20)),
)

You could choose to use the "effective" text scale factor by applying the TextScaler on the font size 20: chatBoxSize * textScaler.scale(20) / 20, or redesign the UI and let the widget assume its own intrinsic size.

Overriding the text scaling strategy in a widget subtree

To override the existing TextScaler used in a widget subtree, override the MediaQuery like so:

Before:

MediaQuery(
  data: MediaQuery.of(context).copyWith(textScaleFactor: 2.0),
  child: child,
)

After:

MediaQuery(
  data: MediaQuery.of(context).copyWith(textScaler: _myCustomTextScaler),
  child: child,
)

However, it's rarely needed to create a custom TextScaler subclass. MediaQuery.withNoTextScaling (which creates a widget that disables text scaling altogether for its child subtree), and MediaQuery.withClampedTextScaling (which creates a widget that restricts the scaled font size to within the range [minScaleFactor * fontSize, maxScaleFactor * fontSize]), are convenience methods that cover common cases where the text scaling strategy needs to be overridden.

Examples

Disabling Text Scaling For Icon Fonts

Before:

MediaQuery(
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
  child: IconTheme(
    data: ..,
    child: icon,
  ),
)

After:

MediaQuery.withNoTextScaling(
  child: IconTheme(
    data: ...
    child: icon,
  ),
)

Preventing Contents From Overscaling

Before:

final mediaQueryData = MediaQuery.of(context);
MediaQuery(
  data: mediaQueryData.copyWith(textScaleFactor: math.min(mediaQueryData.textScaleFactor, _kMaxTitleTextScaleFactor),
  child: child,
)

After:

MediaQuery.withClampedTextScaling(
  maxScaleFactor: _kMaxTitleTextScaleFactor,
  child: title,
)

Disabling Nonlinear Text Scaling

If you want to temporarily opt-out of nonlinear text scaling on Android 14 until your app is fully migrated, put a modified MediaQuery at the top of your app's widget tree:

runApp(
  Builder(builder: (context) {
    final mediaQueryData = MediaQuery.of(context);
    final mediaQueryDataWithLinearTextScaling = mediaQueryData
      .copyWith(textScaler: TextScaler.linear(mediaQueryData.textScaler.textScaleFactor));
    return MediaQuery(data: mediaQueryDataWithLinearTextScaling, child: realWidgetTree);
  }),
);

This trick uses the deprecated textScaleFactor API and will stop working once it's removed from the Flutter API.