Flutterで端末の文字サイズに依存しないようにする(TextScaler/textScaleFactor)

Flutterでは、端末の文字サイズの設定に応じて、
文字の大きさなどを自動で調整してくれる。

ただ、予期せぬレイアウト崩れなども起こるので、
無視したり、指定した範囲内のみにしたい。。

個別に設定できるけど、一括で設定したいなと思ったときに、
いろいろ調べてみたときの備忘録(*´ω｀*)

// v3.16以降: TextScaler
Text(str, textScaler: TextScaler.noScaling);

// v3.15以前: textScaleFactor
Text(str, textScaleFactor: 1.0);

TextScaler+ユーティリティ版(v3.16以降)

Text(str, textScaler: TextScaler.noScaling);
// or
Text(str, textScaler: TextScaler.linear(1.0));

一括で指定したい場合は、MediaQueryで囲めばOK

// child以下のtextScaleを1.0に固定
MediaQuery(
  data: MediaQuery.of(context).copyWith(textScaler: TextScaler.noScaling),
  child: child
)

// child以下のtextScaleを0.9〜1.2に固定
MediaQuery.withClampedTextScaling(
  minScaleFactor: 0.9,
  maxScaleFactor: 1.2,
  child: child,
)

Android14のnonlinear font scalingに備えて、
v3.16でTextScalerが導入されたっぽい。便利関数もいろいろ増えてる。

• Deprecate textScaleFactor in favor of TextScaler | Flutter

textScaleFactor版(v3.15以前)

v3.15以前はこんな感じ。

Text(str, textScaleFactor: 1.0);

// child以下のtextScaleを1.0に固定
MediaQuery(
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
  child: child,
)

// child以下のtextScaleを0.9〜1.2に固定
final MediaQueryData mediaQueryData = MediaQuery.of(context);
MediaQuery(
  data: mediaQueryData.copyWith(
    textScaleFactor: mediaQueryData.textScaleFactor.clamp(0.9, 1.2),
  ),
  child: child,
)

以上!! これで予期せぬレイアウト崩れを防げるように。。(*´ω｀*)

参考にしたサイトさま

• Flutterで端末の文字サイズ設定を無視する方法
• Deprecate textScaleFactor in favor of TextScaler | Flutter