[Flutter]Column(カラム)にパディング(padding)を設定するには？

[Flutter]Columnにパディングを設定するには？

Flutter

2021.11.26

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

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

方法
使用例
1. 全方向
2. １部

方法

Columnにパディングを設定するには、Paddingウェジェットを使います。

まず、ColumnをPaddingの引数「child」に指定します。

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

パディングの設定は、EgdeInsetsを使って行います。

Padding(
  padding: /*EdgeInsetsでパディングを設定*/,
  child: Column(
    children: [
      ・・・
    ],
  ),
),

これでColumnのパディングを設定することが出来ます。

全方向にパディングを設定する場合は「EdgeInsets.all(数値)」、一部にだけ設定する場合はEdgeInsets.only()を使います。

使用例

以下は、使用例です。

全方向

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(100.0), //全方向にパディング１００
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 100,
              color: Colors.blue,
              margin: EdgeInsets.symmetric(vertical: 10),
            ),
            Container(
              height: 100,
              color: Colors.green,
              margin: EdgeInsets.symmetric(vertical: 10),
            ),
            Container(
              height: 100,
              color: Colors.yellow,
              margin: EdgeInsets.symmetric(vertical: 10),
            ),
          ],
        ),
      ),
    );
  }

１部

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.only(
          top: 0, //上
          bottom: 0, //下
          left: 100, //左
          right: 100, //右
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 100,
              color: Colors.blue,
              margin: EdgeInsets.symmetric(vertical: 10),
            ),
            Container(
              height: 100,
              color: Colors.green,
              margin: EdgeInsets.symmetric(vertical: 10),
            ),
            Container(
              height: 100,
              color: Colors.yellow,
              margin: EdgeInsets.symmetric(vertical: 10),
            ),
          ],
        ),
      ),
    );
  }