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

GridViewで写真ギャラリーを作ろう！ 📸

GridViewって何？ 🤔

インスタグラムのような写真ギャラリーを作りたいことありませんか？
そんなときに使うのがGridViewです！
格子状（こうしじょう）に並べて、スクロールできる画面が作れます。

GridViewを作る3つの方法 🎨

1. 数で指定（GridView.count）

写真を何枚ずつ横に並べるか指定する方法：

GridView.count(
  crossAxisCount: 2,  // 横に2枚ずつ
  children: [
    Image.asset('photo1.jpg'),
    Image.asset('photo2.jpg'),
    Image.asset('photo3.jpg'),
    Image.asset('photo4.jpg'),
  ],
)

使い道：

• 写真ギャラリー
• アプリのメニュー
• 商品一覧

2. サイズで指定（GridView.extent）

それぞれの写真の最大幅を指定する方法：

GridView.extent(
  maxCrossAxisExtent: 150,  // 最大幅150px
  padding: EdgeInsets.all(4),
  mainAxisSpacing: 4,      // 縦の間隔
  crossAxisSpacing: 4,     // 横の間隔
  children: [
    Image.asset('photo1.jpg'),
    Image.asset('photo2.jpg'),
    Image.asset('photo3.jpg'),
  ],
)

3. ビルダー方式（GridView.builder）

たくさんの写真や無限スクロールに最適！

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,  // 横に2枚ずつ
  ),
  itemBuilder: (context, index) {
    return Image.asset('photo$index.jpg');
  },
)

写真の間に隙間を作る 📏

縦の隙間を作る

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 10,  // 10pxの縦の隙間
  children: [/*...*/],
)

横の隙間を作る

GridView.count(
  crossAxisCount: 2,
  crossAxisSpacing: 10,  // 10pxの横の隙間
  children: [/*...*/],
)

写真の形を変える 🖼

写真の縦横比を変更できます：

GridView.count(
  crossAxisCount: 2,
  childAspectRatio: 0.7,  // 縦長に
  children: [/*...*/],
)

• 1.0: 正方形
• 0.7: 縦長
• 1.5: 横長

横スクロールにする ↔️

GridView.builder(
  scrollDirection: Axis.horizontal,  // 横スクロール
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,  // 縦に2枚
  ),
  itemBuilder: (context, index) {
    return Image.asset('photo$index.jpg');
  },
)

やってみよう！ 💪

1. シンプルな写真ギャラリー

GridView.count(
  crossAxisCount: 3,  // 横に3枚
  children: List.generate(9, (index) {
    return Container(
      color: Colors.blue,
      margin: EdgeInsets.all(5),
      child: Center(
        child: Text('写真 $index'),
      ),
    );
  }),
)

1. おしゃれな商品一覧

GridView.extent(
  maxCrossAxisExtent: 200,
  padding: EdgeInsets.all(8),
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
  children: List.generate(12, (index) {
    return Card(
      child: Column(
        children: [
          Image.asset('product$index.jpg'),
          Text('商品名 $index'),
          Text('¥1,000'),
        ],
      ),
    );
  }),
)

こんなときはどうする？ 🆘

• 写真がはみ出る
  → BoxFit.coverを使う
• スクロールできない
  → 親ウィジェットの制約を確認
• 間隔がおかしい
  → spacingの値を調整

応用テクニック 🚀

1. タップできる写真ギャラリー

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (context, index) {
    return GestureDetector(
      onTap: () {
        print('写真 $index がタップされました');
      },
      child: Image.asset('photo$index.jpg', fit: BoxFit.cover),
    );
  },
)

1. アニメーション付きの表示

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemBuilder: (context, index) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      child: Image.asset('photo$index.jpg'),
    );
  },
)