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

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

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

<table>
  <caption>Stackの特徴</caption>
 
  <tr>
     <td>alignmentプロパティを使用して子widgetの配置基準位置を指定できます。</td>
  </tr>
  <tr>
    <td>Positioned widgetを使用して、子wigetの位置をピクセル単位で指定できます。</td>
  </tr>
<tr>
    <td>子widgetは追加された順番に表示され、より上に追加された子widgetがより下に表示されます。</td>
  </tr>
<tr>
    <td>サイズが指定されていない場合、子widgetは親widgetのサイズに合わせて表示されます。</td>
  </tr>
</table>

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

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

![スクリーンショット 2023-08-25 17.13.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/5f017295-41fe-f7eb-b2d6-b622a84e7f71.png)


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

#### alignmentの指定のみ
```php
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,
          ),
        ],
      ),
```
![スクリーンショット 2023-08-25 17.22.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/cce74ea1-9877-6683-5693-9e8a2e969135.png)


#### Positionedで指定
こちらはContainerのサイズを変更し、部分的に重なるようにしてみました。
```php
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,
              ),
            ),
          ],
        ),

```



![スクリーンショット 2023-08-29 11.14.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/6d741310-28eb-83b8-a9a2-73060fa81368.png)

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