[Flutter]Wrapの要素(child)を左に寄せる(align left)には？

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

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

方法
使用例

方法

Wrapの要素を左に寄せるには、SizedBoxを使います。

まず、WrapをSizedBoxでラップします。

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

SizedBox(
  width: /*横幅*/,
  child: Wrap(
    children: <Widget>[
      ・・・
    ],
  ),
),

SizedBoxを使えば、Wrapの要素が左に寄るようになります。

Wrapの要素はデフォルトで左に寄るようになっています。

ですが、最小限の横幅しか持っていないので、左に寄らないのです。

なので、SizedBoxで横幅を指定します。

使用例

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