[Flutter]Text(テキスト)にパディング(padding)を設定するには？

どうも、ちょげ(@chogetarou)です。

Textにパディングを設定する方法を紹介します。

方法

Textにパディングを設定する方法は、２つあります。

１つは、Paddingを使う方法です。

まず、TextをPaddingでラップします。

そして、Paddingの引数「padding」にパディングを指定します。

パディングの指定は、EdgeInsetsでします。

Padding(
  padding: /*EdgeInsetsでパディングを指定*/,
  child: Text('テキスト'),
),

Padding(
  padding: EdgeInsets.all(8.0),//全方向に8のパディング
  child: Text('テキスト'),
),

Padding(
  padding: EdgeInsets.only(
    top: 4, //上４
    left: 8, //左８
    right: 8, //右８
    bottom: 4 //下４
  ),
  child: Text('テキスト'),
),

もう１つは、Containerを使う方法です。

まず、TextをContainerでラップします。

そして、Containerの引数「padding」にパディングを指定します。

パディングの指定は、EgdeInsetsでします。

Container(
  padding: /*EdgeInsetsでパディングを指定*/,
  child: Text('テキスト'),
),

以下は、使用例です。

Container(
  padding: EdgeInsets.symmetric(
    horizontal: 4, //左右に４
    vertical: 8, //上下に８
  ),
  child: Text('テキスト'),
),

Textにパディングを設定する方法は次の２つです。