#はじめに
Columnで2つの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
),
),
],
),