[Flutter]ColumnでcrossAxisAlignmentが機能しない時の対処法

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

「ColumnのcrossAxisAlignmentを設定したのに上手く機能しない」
という人に向けて、この記事ではその対処法を紹介します。

対処法

ColumnのcrossAxisAlignmentが機能しないのを対処するには、SizedBoxもしくはContainerを使います。

まず、ColumnをSizedBoxもしくはContainerでラップします。

そして、SizedBoxもしくはContainerの引数「width」に横幅を指定します。

SizedBox( //Containerでも同じ
  width: /*横幅*/,
  child: Column(・・・),
),

SizedBoxもしくはContainerを使うことで、ColumnのcrossAxisAlignmentが機能するようになります。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 100,
              width: 100,
              color: Colors.blue,
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.green,
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.pink,
            ),
          ],
        ),
      ),
    );
  }

[Flutter]Columnに区切り線を表示するには？

Columnに区切り線を表示する方法を紹介します。

www.choge-blog.com

2021.12.03

[Flutter]Columnに枠線をつけるには？

Columnに枠線をつける方法を紹介します。

www.choge-blog.com

2021.12.30

[Flutter]Column内でGridViewを使うには？

Column内でGridViewを使う方法を紹介します。

www.choge-blog.com

2021.12.31

[Flutter]Columnを折り返すようにするには？

Columnの要素を折り返すようにする方法を紹介します。

www.choge-blog.com

2022.01.08