スタック Stack を使って、自由に要素を配置し、重ねる (スタックする) ことができます。

要素を自由に配置して重ねる

Stack は自由に要素を並べるためのウィジットです。 children に並べたい要素を配列として要素を入れていきます。

例えば、

Stack(
  children: <Widget>[
    Container(
      color: Colors.green,
      height: 150,
      width: 150,
    ),
    Container(
      color: Colors.blue,
      height: 75,
      width: 75,
    ),
    Container(
      color: Colors.red,
      height: 50,
      width: 50,
    ),
  ],
)

のようになります。

デフォルトの Stack は、すべての子要素を左上に重ねて表示します。

Stackchildren の記述する順番が、重ねる順番となります。先に記述される要素は下層に、最後に記述される要素は上層に表示されます。
(上記の画像例:[下層] GreenContainer - BlueContainer - RedContainer [上層])

Stackalignmentを設定することで、子要素の配置位置を一括で操作することができます。

例えば、子要素を親 Widget の中心に重ねて表示する場合は、

Stack(
  alignment: AlignmentDirectional.center, // 子要素を中央に配置する
  children: <Widget>[
    Container(
      color: Colors.green,
      height: 150,
      width: 150,
    ),
    Container(
      color: Colors.blue,
      height: 75,
      width: 75,
    ),
    Container(
      color: Colors.red,
      height: 50,
      width: 50,
    ),
  ],
)

のようになります。

alignmentcenter の他に、上下左右など八つの場所を指定できます。詳細はこちらを参照してください。

Alignで子要素を個別で配置する

また、Align Widget で包むことで、子要素の位置を個別で指定できます。

Align の詳細はこちらで説明されています。

例えば、RedContainer だけを右下に表示したい場合は、

Stack(
  alignment: AlignmentDirectional.center,
  children: <Widget>[
    Container(
      color: Colors.green,
      height: 150,
      width: 150,
    ),
    Container(
      color: Colors.blue,
      height: 75,
      width: 75,
    ),
    Align( // 赤のコンテナだけを右下に配置する
      alignment: Alignment.bottomRight,
      child: Container(
        color: Colors.red,
        height: 50,
        width: 50,
      ),
    ),
  ],
)

のようになります。

位置が個別指定されていない子要素は Stackalignment に依存します。

Positionedで子要素を親 Widget の枠からの距離で配置する

さらに、Positioned Widget で包むことで、個別の子要素を親 Widget の枠からの距離で配置することができます。

Positionedtopbottomleftright それぞれに値を設定することで、親 Widget の枠からの距離を指定できます。

Stack(
  children: [
    Positioned( // 緑のコンテナだけを親の左上に配置する
      top: 0,
      left: 0,
      child: Container(
        color: Colors.green,
        height: 150,
        width: 150,
      ),
    ),
    Positioned( // 青のコンテナだけを親上枠から 10px,右枠から 10px のところに配置する
      top: 10,
      right: 10,
      child: Container(
        color: Colors.blue,
        height: 75,
        width: 75,
      ),
    ),
    Align( // 赤のコンテナだけを右下に配置する
      alignment: Alignment.bottomRight,
      child: Container(
        color: Colors.red,
        height: 50,
        width: 50,
      ),
    ),
  ],
)

上記のように、同じ Stack において、 PositionedAlign は混用できます。

まとめ

  • 子要素を一括で配置する場合は Stackalignment で指定します。
  • 子要素を個別で配置する場合は、Align Widget で要素を包みます。
  • 子要素を個別で親の枠からの距離で配置する場合は、Positioned Widget で要素を包みます。

参考リンク