Open2023/10/09にコメント追加1

Stack()とは

FlutterのStackは、他のウィジェットを重ねるためのコンテナ型ウィジェットであり、子ウィジェットを重ねて配置することができるレイアウトウィジェットです。Stackは、一つの画面上に複数のウィジェットを重ねて配置するために使用されます。

Stackは、子ウィジェットを重ねて配置するので、後に追加された子ウィジェットが上に表示されます。これは、Z軸方向（奥行き）における重なり順を示します。

基本的な使い方として、Stackの中に子ウィジェットを追加し、Positionedウィジェットを使用してそれらの位置を指定します。

以下は、基本的なStackの使用例です。

Stack(
  children: <Widget>[
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.red,
      width: 80,
      height: 80,
    ),
    Container(
      color: Colors.green,
      width: 60,
      height: 60,
    ),
  ],
)

この例では、3つの異なる色のコンテナが重なって表示されます。先に追加されたコンテナが奥に配置され、後に追加されたコンテナが手前に配置されます。

また、Positionedウィジェットを使用することで、特定の位置に子ウィジェットを配置することができます。

Stack(
  children: <Widget>[
    Positioned(
      left: 10,
      top: 10,
      child: Container(
        color: Colors.blue,
        width: 100,
        height: 100,
      ),
    ),
    Positioned(
      right: 20,
      top: 20,
      child: Container(
        color: Colors.red,
        width: 80,
        height: 80,
      ),
    ),
    Positioned(
      bottom: 30,
      right: 30,
      child: Container(
        color: Colors.green,
        width: 60,
        height: 60,
      ),
    ),
  ],
)

Positionedを使うことで、特定の位置に子ウィジェットを配置することができます。このように、StackとPositionedを組み合わせることで、複雑な重なり配置のレイアウトを作成することが可能です。