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

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

Stackって何？ 🤔

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

想像してみてください：

• 透明な紙を重ねるように
• レイヤーを重ねるように
• カードを重ねるように

基本の使い方 📚

シンプルな重ね合わせ

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.green,  // 下の緑の四角
    ),
    Container(
      width: 50,
      height: 80,
      color: Colors.orange, // 上のオレンジの四角
    ),
  ],
)

ポイント：

• 後に書いたものが上に来る
• サイズの違うものも重ねられる
• 透明なものも重ねられる

自由な位置に配置：Positioned 📍

好きな場所に配置

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,
      ),
    ),
  ],
)

配置できる位置：

• left: 左からの距離
• right: 右からの距離
• top: 上からの距離
• bottom: 下からの距離

位置の調整：Alignment 🎯

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

Stack(
  alignment: Alignment.bottomRight,  // 右下に配置
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Text('右下に表示されるよ！'),  // この文字が右下に
  ],
)

選べる位置：

• 上：topLeft, topCenter, topRight
• 中央：centerLeft, center, centerRight
• 下：bottomLeft, bottomCenter, bottomRight

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

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. シンプルな重ね合わせ

Stack(
  children: [
    Container(color: Colors.blue, width: 100, height: 100),
    Container(color: Colors.red.withOpacity(0.5), width: 50, height: 50),
  ],
)

1. 写真にボタンを重ねる

Stack(
  children: [
    Image.asset('photo.jpg'),
    Positioned(
      bottom: 20,
      right: 20,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('いいね！'),
      ),
    ),
  ],
)

困ったときは？ 🆘

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

応用テクニック 🚀

1. 半透明のオーバーレイ

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

1. カードの上にバッジを表示

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)),
      ),
    ),
  ],
)