[Flutter]Rowのはみ出した部分(overflow)を折り返す(new line)には？

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

Rowのはみ出した部分を折り返す方法を紹介します。

方法
使用例

方法

Rowのはみ出した部分を折り返すには、Wrapウェジェットを使います。

具体的には、RowをWrapに置き換えます。

Wrap( //RowからWrapへ
  children: [
    ・・・
  ],
),

Wrapを使えば、はみ出した部分が折り返されます。

使用例

以下は、使用例でエス。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Wrap(
          children: [
            for (var i = 0; i < 12; i++)
              Container(
                color: i.isEven ? Colors.blue : Colors.pink,
                width: 100,
                height: 100,
              )
          ],
        ),
      ),
    );
  }