【Flutter】Textウィジェットの余分なパディング(余白)を調整したい

はじめに

Columnで２つのTextを並べた際に、PaddingやSizedBox等でマージンを入れてないにも関わらず
"合計スコア"と"190"の間に意図せぬパディングが発生しています。

該当部分のコード

sample_widget.dart

Column(
          children: const [
            Padding(
              padding: EdgeInsets.only(top: 18),
              child: Text(
                '合計スコア',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                    fontWeight: FontWeight.w500
                    ),
              ),
            ),
            Text(
              '190',
              style: TextStyle(
                  fontFamily: 'Mplus1p',
                  fontSize: 52,
                  fontWeight: FontWeight.w800
                  ),
            ),
          ],
        ),

Flutter Inspecterで該当部分を見てみると...

画像を見ると分かる通りTextウィジェットが文字と共に上下のスペースまで含んでいることがわかります。
これは特殊文字に対応するためのスペースであるため、実際にはパディングがあるわけではないようです。
そのためTextウィジェット内の空白を取ることは不可能とのこと

参照:https://en.m.wikipedia.org/wiki/Ascender_(typography)

じゃあどうする？ (解決策)

TextStyleのheightプロパティに値を設定してあげることで、今回の余白を調整することができました。
参照:https://api.flutter.dev/flutter/painting/TextStyle/height.html

該当コード

sample_widget.dart

            Text(
              '190',
              style: TextStyle(
                  fontFamily: 'Mplus1p',
                  height: 1.0, // heightプロパティを追加。 任意の値を設定して調整する
                  fontSize: 52,
                  fontWeight: FontWeight.w800 
                  ),
            ),
          ],
        ),

参照リンク