🔧

[flutter] スケーリングを考慮してテキストの行数を計算する

に公開

AndroidやiPhoneでは、端末の設定からフォントサイズの拡大を行うことができます。
TextPainterなどを使って行数の計算を行っている場合、このテキストスケーリングを考慮していないと正常に行数が計算されないことがあります。

Androidの場合、Pixelだと
設定 > ユーザー補助 > 表示サイズとテキスト

iPhone iOS18の場合、
設定 > アクセシビリティ > 画面表示とテキストサイズ

この場合、Flutter3.16で導入されたTextScalerを利用すると便利です。
これまでのtextScaleFactorが単にdouble値でスケーリングを行うのに対し、TextScaler は様々なスケーリング戦略をサポートします。

TextScalerの主な使い方

MediaQuery.of(context).textScalerを使用してTextScalerオブジェクトを取得する

MediaQuery.of(context).textScalerは、現在のコンテキストにおけるTextScalerオブジェクトを返します。
このオブジェクトを使用して、テキストのスケーリングに関する情報を取得したり、スケーリングを適用したりできます。

TextScaler.scale(double fontSize)を使用してフォントサイズをスケーリングする

TextScaler.scale(double fontSize)メソッドは、指定されたフォントサイズをTextScalerの設定に基づいてスケーリングした値を返します。

サンプルコード

int getTextLinesLength(String text, TextStyle style, double maxWidth, BuildContext context) {
  final textScaler = MediaQuery.of(context).textScaler;
  final scaledFontSize = textScaler.scale(style.fontSize!); // null safetyに注意

  final tp = TextPainter(
    text: TextSpan(
      text: text,
      style: style.copyWith(fontSize: scaledFontSize),
    ),
    textDirection: TextDirection.ltr,
  );
  tp.layout(maxWidth: maxWidth);
  return tp.computeLineMetrics().length;
}

Discussion