TextStyleの共通化についての考えと今ならどうするか

第三回 今ならこうするシリーズ

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が定義されていた。

github.com

次回は_buildWidgetについて。