[Flutter] 文字サイズを大きくすると周囲に空白が発生する

今回発生した問題

今回発生した問題はタイトル通り、Flutterでアプリを開発時にfontSizeを大きくしていくと周囲に空白が発生するというもの



font: Kiwi-Maru, fontsize: 50で発生。PaddingやGapを設定していないにも関わらず、文字の上に空白ができている


コードは以下の通り

sample.dart

Container(
    color: Colors.white,
    child: Text(
      "2",
      style: TextStyle(
        fontSize: 50
      ),
    ),
),

これって結局何？

おそらくこれにはフォント自体に含まれている「バウンディングボックス」というものが関係していそう。

バウンディングボックスをざっくりいうと、文字のサイズや位置を決定するための見えないスペースで、実際に見ることができる文字サイズとは異なる。
文字によって表示に使う幅や高さが微妙に異なるので、特定の文字だけ切り取られたりすることなく表示するのに必要なんだそう。

デザインに精通していないので全くの初耳でした。

対処法

先ほどのコードに一行足すだけ。

sample.dart

Container(
    color: Colors.white,
    child: Text(
      "2",
      style: TextStyle(
        height: 1.0, //追加した行
        fontSize: 50
      ),
    ),
),

これで周りのウィジェットとの間に余計なスペースを空けることなく配置できました。
参考になれば嬉しいです。

※この方法は文字によってoverflowを引き起こす可能性があります