【Flutter】TextStyle.heightを調整しよう

初めに

TextStyleにはいくつものプロパティが存在し、幅広いカスタムが可能です。
今回は、行間を調整するheightプロパティを見ていきましょう。

行間とは

行間とは、文字列を表示する際の実際の高さを示しています。
実は、fontSize: 20を指定したからといってTextWidgetの高さが20pxになるわけではありません。
これは、LineMetricsクラスが Font の種類に合わせて適度な余白を上下に設定してくれるためです。

以下をご覧ください。※わかりやすいように色付きのContainerで囲っています。

適度な余白	余白なし
TextWidgetの高さ: 60px	TextWidgetの高さ: 40px

アプリの仕様にもよるため、どちらがいいとは明言できませんが調整方法を知っておくことが大切ですね。
では実際にその調整方法を見ていきましょう。

行間の調整方法

行間はTextStyle.heightで調整が可能です。ドキュメントを見てみまよう。

なるほど。行間は、
行間　＝　FontSize　* height
で表現されているようです。行間は直接高さを設定するのではなく、フォントサイズの何倍かで指定するんですね。

fontSize: 20に指定し、確認すると確かに、行間はfontSize　* heightになっていました。

初めにも述べましたがheightにnullまたは何も指定しないと、LineMetricsクラスが Font の種類に合わせて適度な行間を指定してくれるみたいです。
サンプルのようにアルファベットの場合、行間は24px(height: 1.2)でしたが、日本語テキストの場合は30px(height: 1.5)となりました。

最後に

テキストの見栄えはアプリ全体の見栄えに大きく繋がると思うので行間は適切に設定しましょう！