【Flutter】Stack|Widgetを重ねて表示する

今回はStackの基本的な使い方を紹介します。

Stackを使えばWidgetを重ねて表示できます。

\ 世界最大級のオンライン学習サービス /

目次

Stackの使い方

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.orange,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    )
  ],
),

childrenに重ねて表示したいWidgetを渡します。

1つ目の要素がz軸において最も奥、最後の要素が手前に配置されます。

Alignmentで全要素の位置を一括指定

Stack(
  alignment: Alignment.bottomRight,
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.orange,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    )
  ],
),

alignmentの引数にAlignmentを渡して全要素の配置を一括指定できます。

Pisitionedで任意の要素のみ位置を指定

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.orange,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.blue,
    ),
    Positioned(
      bottom: 0,
      left: 50,
      right: 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    )
  ],
),

Positionedを使えば任意の要素のみ配置を指定できます。

一緒に読みたい

参考

  • URLをコピーしました!
目次