[Flutter]Column(カラム)の要素(item children)を左寄せ(align left)にするには？

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

Columnの要素を左寄せにする方法を紹介します。

方法
使用例
1. 関連

方法

Columnの要素を左寄せにするには、引数「crossAxisAlignment」を使います。

具体的には、Columnの引数「crossAxisAlignment」にCorssAxisAlignment.startを指定します。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    ・・・
  ],
),

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SizedBox(
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 200,
                width: 200,
                color: Colors.blue,
              ),
              Container(
                height: 200,
                width: 200,
                color: Colors.green,
              ),
              Container(
                height: 200,
                width: 200,
                color: Colors.pink,
              ),
            ],
          ),
        ),
      ),
    );
  }