状況
iOSでもAndroidでも、端末本体の設定で文字サイズを大きくしたり小さくしたりすることが出来ますが、端末の文字サイズ設定を変更していると、レイアウトが崩れてしまうことが多々あります。
本来文字サイズに合わせて表示させるべきなんですが、どうしてもレイアウト構成上難しい箇所があり、固定にしたい場所が生じてしまいました。
Androidで言う、文字サイズをdp指定しちゃうみたいなことが出来ないかなと思って調べた結果です。
環境など
| ツールなど | バージョンなど |
|---|---|
| MacBook Air Early2015 | macOS Mojave 10.14.6 |
| Android Studio | 3.6.1 |
| Java | 1.8.0_131 |
| Flutter | 1.12.13+hotfix.9 |
| Dart | 2.7.2 |
| Xcode | 11.3.1 |
解決策
TextウィジェットのパラメータtextScaleFactorに1.0を渡せば固定されます。
このパラメータを指定していないときは、MediaQuery.textScaleFactorOfが使用されます。端末の文字サイズを変更しているとこの値が変わるんですね。よって端末の文字サイズ設定に応じてフォントサイズが変わっているわけです。
そこに1.0を渡してしまえば、フォントサイズが固定されることになります。
Text(
'なんらかのタイトル',
style: TextStyle(fontSize: 14),
textScaleFactor: 1.0,
),
flutter_screenutilというパッケージもあるようですが、上記の方法の方が簡単かと思います。