第三回 今ならこうするシリーズ
FlutterはTextにstyleをあてることができる。今回はそのTextStyleの共通化について書いていく。
const Text("文字", style: ...);
TextStyleは以下のように共通化している。こうすることで基本はconstとして呼び出すことが出来るし、画面によって文字色の変更がしたいときは copyWithで上書きすることも出来る。またTextStylesをimportしてしまえば、名前の補完が効く。
class TextStyles { static const body = TextStyle( fontSize: ..., color: ..., height: ..., ); } // 呼び出すとき const Text("文字", style: TextStyles.body); // 上書きするとき const Text("文字", style: TextStyles.body.copyWith(color: ...));
考え
比較的いい方法だと思っていてやめる気はないけど気になることもある。
なぜ
ファイル移動しないとデフォルト値がわからない
static constで定義しているので、呼び出し元からはTextStyleが何を受け取っているのかわからない。デフォルトでは、色が何色が設定されているのかファイル移動せずに確認したい。InteliJ固有の問題かも。
BuildContextに依存して文字の大きさを変更できない
static constで定義しているので、変更されうる画面の大きさなどに基づいて文字の大きさのデフォルト値を変更できない。
今ならどうするか
TextStylesのままでいく。
ただ以下のようにWidgetを作成するのもよいかもと思っている。
class TextBody extends StatelessWidget { final String data; final Color color; const TextBody( this.data, { Key? key, this.color = AppColors.black, }) : super(key: key); @override Widget build(BuildContext context) { final breakpoint = context.watch<Breakpoint>(); return Text( data, style: TextStyle( fontSize: breakpoint.map( mobile: (_) => 14, tablet: (_) => 15, desktop: (_) => 16, ), color: color, ), ); } }
ただしデメリットもあると感じている。なのでTextStylesで定義するのがよいと思っている。
- 値を変更するためには受け取るパラメータを自分で書く必要がある
- Widgetを作成する必要があり、書くコード量が多い
- SelectableTextなどもあるのでそれぞれに対応が必要になる
まとめ
一長一短で悩ましい。例えばクラスにする方法は値を変更するためには自分でパラメータを受け取る必要がある。画面ごとに変わるパラメータが多い場合はめんどくさく感じそう。またWidgetを作成する必要があるので比較的書くコードが多くなる。
しかし、今回あげたデフォルト値がわからない問題はインスタンス作成時の引数として受け取るときにデフォルト引数に設定すればわかるようになるし、画面の大きさなどBuildContextに依存する値によってデフォルトの文字の大きさを変更したい場合には有効だと思う。
余談： Flutter folioでは同様にTextStylesが定義されていた。
次回は_buildWidgetについて。
