【flutter】Stackを使ってContainerを重ねて表示したい！

こんにちは！
今日もまだ暑いですね、、、
昨日の帰り道にセブンイレブンによって、初めてスムージを買ってみたんですが、美味しすぎて今日も帰り道に買おうと思います！（笑）ちなみに、マンゴーパインスムージしか飲んだことないんですが、オススメの味があったら教えてくだい！！！
さて、今回はStackを使ってContainerを重ねて表示する方法について紹介したいと思います。
最後まで見ていただけたら、嬉しいです！

1,Stackとは？

Stackとは、複数の子widgetを持ち、それらを重ねて表示することができます。重ねる際に子widgetの位置やサイズを調整することができるため、複雑なレイアウトを作成する際に非常に便利です。

Stackの特徴

alignmentプロパティを使用して子widgetの配置基準位置を指定できます。

Positioned widgetを使用して、子wigetの位置をピクセル単位で指定できます。

子widgetは追加された順番に表示され、より上に追加された子widgetがより下に表示されます。

サイズが指定されていない場合、子widgetは親widgetのサイズに合わせて表示されます。

2,Containerを作ろう

今回は、３つのContainerを重ねるて表示させたいため、それぞれ大きさの違うContainerを用意します。

Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                width: 50,
                height: 50,
                color: Colors.blue,
              ),
              Container(
                width: 30,
                height: 30,
                color: Colors.yellow,
              ),

3,Stackを使って３つのContainerを重ねて表示する

この３つのContainerをStackを使って表示させます。
今回は2パターンほど紹介したいと思います。

alignmentの指定のみ

Stack(
        alignment: Alignment.center,//子widgetの配置位置を指定
        children: [
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
          Container(
            width: 50,
            height: 50,
            color: Colors.blue,
          ),
          Container(
            width: 30,
            height: 30,
            color: Colors.yellow,
          ),
        ],
      ),

Positionedで指定

こちらはContainerのサイズを変更し、部分的に重なるようにしてみました。

Stack(
          children: [
            Positioned(
              top: 50,
              left: 0,
              height: 200,
              width: 200,
              child: Container(
                width: 100,
                height: 150,
                color: Colors.red,
              ),
            ),
            Positioned(
              top: 90,
              left: 50,
              width: 200,
              height: 200,
              child: Container(
                width: 100,
                height: 150,
                color: Colors.blue,
              ),
            ),
            Positioned(
              top: 140,
              left: 110,
              width: 200,
              height: 200,
              child: Container(
                width: 100,
                height: 150,
                color: Colors.yellow,
              ),
            ),
          ],
        ),

終わり

以上で、今回の記事を終了いたします！
今回も最後までお読みいただきありがとうございました！
セブンのスムージーおすすめですので是非！！！