Flutterのチュートリアルを学んでみた(12)

# Stackで重ね技！ウィジェットを自由に配置しよう 🎯

## Stackって何？ 🤔

写真の上にテキストを載せたい！ボタンを重ねたい！
そんなときに使うのが`Stack`です！

想像してみてください：
- 透明な紙を重ねるように
- レイヤーを重ねるように
- カードを重ねるように

## 基本の使い方 📚

### シンプルな重ね合わせ
```dart
Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.green,  // 下の緑の四角
    ),
    Container(
      width: 50,
      height: 80,
      color: Colors.orange, // 上のオレンジの四角
    ),
  ],
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/720ede46-8bb9-cfa5-44bc-a87e9a8aff80.png)


ポイント：
- 後に書いたものが上に来る
- サイズの違うものも重ねられる
- 透明なものも重ねられる

## 自由な位置に配置：Positioned 📍

### 好きな場所に配置
```dart
Stack(
  children: <Widget>[
    Positioned(
      left: 20,    // 左から20
      top: 20,     // 上から20
      width: 300,  // 幅300
      height: 300, // 高さ300
      child: Container(
        color: Colors.blue,
      ),
    ),
    Positioned(
      right: 30,   // 右から30
      bottom: 30,  // 下から30
      width: 100,
      height: 100,
      child: Container(
        color: Colors.red,
      ),
    ),
  ],
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/c1fbee57-d250-1173-f1c2-aadf62ef495e.png)


### 配置できる位置：
- `left`: 左からの距離
- `right`: 右からの距離
- `top`: 上からの距離
- `bottom`: 下からの距離

## 位置の調整：Alignment 🎯

Positionedを使わない要素の配置を調整できます：

```dart
Stack(
  alignment: Alignment.bottomRight,  // 右下に配置
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Text('右下に表示されるよ！'),  // この文字が右下に
  ],
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/aaea7577-6d3a-83be-0d87-41f481b5949a.png)


### 選べる位置：
- 上：topLeft, topCenter, topRight
- 中央：centerLeft, center, centerRight
- 下：bottomLeft, bottomCenter, bottomRight

## 実践例：写真の上にテキスト 📸

```dart
Stack(
  children: <Widget>[
    Image.asset(
      'background.jpg',
      width: double.infinity,
      fit: BoxFit.cover,
    ),
    Positioned(
      bottom: 20,
      left: 20,
      child: Text(
        '素敵な風景',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
)
```

## やってみよう！ 💪

1. シンプルな重ね合わせ
```dart
Stack(
  children: [
    Container(color: Colors.blue, width: 100, height: 100),
    Container(color: Colors.red.withOpacity(0.5), width: 50, height: 50),
  ],
)
```

2. 写真にボタンを重ねる
```dart
Stack(
  children: [
    Image.asset('photo.jpg'),
    Positioned(
      bottom: 20,
      right: 20,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('いいね！'),
      ),
    ),
  ],
)
```

## 困ったときは？ 🆘

- ウィジェットが見えない
  → 重なる順番を確認
- 位置がおかしい
  → Positionedの値を確認
- サイズがおかしい
  → width, heightを確認

## 応用テクニック 🚀

1. 半透明のオーバーレイ
```dart
Stack(
  children: [
    Image.asset('photo.jpg'),
    Container(
      color: Colors.black.withOpacity(0.5),  // 半透明の黒
    ),
    Center(
      child: Text(
        'Welcome',
        style: TextStyle(color: Colors.white, fontSize: 30),
      ),
    ),
  ],
)
```

2. カードの上にバッジを表示
```dart
Stack(
  children: [
    Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text('カードの内容'),
      ),
    ),
    Positioned(
      right: 0,
      child: Container(
        padding: EdgeInsets.all(8),
        color: Colors.red,
        child: Text('NEW', style: TextStyle(color: Colors.white)),
      ),
    ),
  ],
)
```