[Flutter]Column(カラム)を折り返す(next line)ようにするには？

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

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

方法
使用例

方法

Columnの要素を折り返すようにするには、Columnの代わりにWrapを使います。

まず、ColumnをWrapに置き換えます。

そして、Wrapの引数「direction」にAxis.verticalを指定します。

Wrap(   //Column → Wrap
  direction: Axis.vertical,
  children: <Widget>[
    ・・・・
  ],
),

Columnの代わりにWrapを使うことで、折り返すことが出来るようになります。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 300,
          width: 300,
          child: Wrap(
            direction: Axis.vertical,
            children: <Widget>[
              for (var i = 0; i < 9; i++)
                Container(
                  color: i.isEven ? Colors.blue : Colors.yellow,
                  width: 100,
                  height: 100,
                ),
            ],
          ),
        ),
      ),
    );
  }