🔧
[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