[flutter/dart]Textの余白を調整する

概要

flutterでアプリのUIを作っているとき、Textと他のWidgetとの位置揃えが微妙にずれたように見える場合があります。これを調整する方法を紹介します。

詳細

Text widgetは文字だけではなくて、その上下左右の空白まで含んでいます。例えば上端揃えにする場合、この空白の最上部と他のWidgetの最上部とを揃えるため、文字の上端と他のWidgetの上端は揃いません。

Container(
    margin: const EdgeInsets.only(top:20, left:20),
    child:Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      child:CircleAvatar(
        child: Icon(Icons.person),
      ),
      SizedBox(width: 10,),
      Text('test')
    ],
  )
)

アイコンの上端と文字の上端が微妙にずれている

ちなみにTextに空白があるのはtypographyに由来します。詳しくはこちらを参照。

解決策

上記のStack Overflowにもあるように、この空白は取り除けません。

今回のように位置揃えを正確にしたい場合は、Textじゃない方のWidgetにpaddingを追加して頑張って調整するのが一番手っ取り早いと思います。

Container(
    margin: const EdgeInsets.only(top:20, left:20),
    child:Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        padding: const EdgeInsets.only(top: 2),　　//←ここ！
        child:CircleAvatar(
          child: Icon(Icons.person),
        )
      ),
      SizedBox(width: 10,),
      Text('test')
    ],
  )
)

最後に

サンプル画像がなかなか分かりにくくて申し訳ないです、、、

こんなの気にならないよ！と思われるかもしれませんが、1ptまで拘りたい方の参考になれば嬉しいです。

詳しく調べていませんが、Widgetの領域に空白部分まで含んでいるものは他にもありそうなのでその場合は同じ手法を使ってみてください。