【Flutter】TextStyleの管理について

こんにちは、株式会社Pentagonでアプリ開発をしている佐伯です。

今回は、TextStyleの便利な管理の仕方について、解説をします。TextStyleはFlutterで文字の大きさや色などを設定するウィジェットです。

【こんな人に読んで欲しい】
・TextStyleを綺麗に管理したい方
・統一感のあるデザインにしたい方

【この記事を読むメリット】
・毎回面倒なTextStyleのコードを書かなくてよくなります。

【結論】
TextStyleのデフォルトを用意し、かつリストで管理してマージする関数を設定すれば、ソースコードを特定のファイルに集約し一元管理できます。

TextStyleとは？

文字通りテキストウィジェットのフォントサイズやカラーなど、フォントスタイルを設定するほとんどのアプリで使われるウィジェットです。
テキストのスタイルを設定する時に、毎回一から設定するのは面倒ですよね。よく使う文字サイズが決まっているのに、サイズをその都度設定するのはいいやり方ではありません。間違いが発生する可能性もあるし、コード量が増えて読みにくくなります。少しでもコード量は減らしたいですよね。今回はこれを便利に管理する方法を紹介します。

デフォルトのTextStyle

const TextStyle defaultTextStyle = TextStyle(
 fontWeight: FontWeight.normal,
 fontSize: 14,
 color: colorBlack33,
);

上記のように作りたいアプリにデフォルトのTextStyleを定義します。一番よく使う設定が良いでしょう。このファイルはlibフォルダにdesignなどのフォルダを作って、text_styles.dartのように新しいファイルを作成して管理するのがおすすめです。

TextStyleをマージする関数

TextStyle textStyle(List<TextStyle> styles) {
 var mergedTextStyle = defaultTextStyle;
 for (final style in styles) {
   mergedTextStyle = mergedTextStyle.merge(style);
 }
 return mergedTextStyle;
}

次に上のコードのようにTextStyleのListを引数に渡す関数を作ります。関数の戻り値はListのTextStyleです。この関数は引数で渡されたTextStyleを全てマージします。text_styles.dartに実装しましょう。

TextStyleをマージする関数に渡す用のTextStyleを定義しておく

TextStyleをマージしてくれる関数は、あくまでTextStyleのリストを引数で受け取らないといけません。それを定数で以下のようにtext_styles.dartに定義しておきます。使いたいフォントサイズやカラーがあったらその都度定義します。

const TextStyle bold = TextStyle(fontWeight: FontWeight.bold);

const TextStyle fontSize18 = TextStyle(fontSize: 18);

const TextStyle primary = TextStyle(color: colorPrimary);

const TextStyle secondary = TextStyle(color: colorSecondary);

実際の使い方

さぁ、実際にTextStyleをマージする関数を使ってTextを実装してみましょう！まず、実際に使う時はtext_styles.dartをimportします。次に、下記のようにTextStyleをマージしてくれる関数を使って、その引数に定数で定義したフォントサイズやウェイト、カラーをListで指定します。指定がなかったらデフォルトのTextStyleが採用されるので便利ですね！

Text(
 ’テスト’',
 style: textStyle(
   [
     fontSize18,
     bold,
     primary,
   ],
 ),
),

まとめ

いかがでしたでしょうか？この記事にあるようにデフォルトのテキストスタイルを上書きしてくれる関数があると、コードの記述量が減って綺麗になりますね。長々としたTextStyleのコードがソースファイルに点在することがなくなります。
1枚の割られた窓ガラスをそのままにしていると、さらに割られる窓ガラスが増え、いずれ街全体が荒廃してしまうという、「割れ窓理論」をご存じですか？この理論はプログラミングにも言えると僕は思います。まずはTextStyleから綺麗にしてみましょう！