10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-11-01

#はじめに

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

スクリーンショット 2021-11-01 14.45.59.png

該当部分のコード

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で該当部分を見てみると...

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

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

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

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

スクリーンショット 2021-11-01 15.13.47.png

該当コード

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

#参照リンク
https://stackoverflow.com/questions/57008822/flutter-how-do-i-remove-unwanted-padding-from-text-widget

10
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?