ピンチで列数が変わるグリッド Pinch to Change Grid Columns

写真の一覧を2本指でつまむと列が増えて小さく、広げると列が減って大きくなる。

別名: ピンチで一覧の大きさ変更写真一覧のズーム列数の切り替えPinch GridZoomable Grid
動き: つまむと列が増える広げると列が減る切り替わる
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

Google フォトや iOS の写真アプリで、一覧の細かさを指で変える操作です。

GestureDetector の onScaleUpdate で details.scale を見て、1.3 倍を超えたら列を減らし、

0.75 倍を下回ったら列を増やします。1回のピンチで何段も変わらないよう、変わったら次の指置きまで止めます。

2本指のときだけ反応させるには details.pointerCount を確かめます。

列数の切り替えは AnimatedSwitcher でフェードさせると、急に変わった感じが和らぎます。

こんなときに

写真やファイルが大量に並ぶ一覧で、ざっと見る／じっくり見るを行き来したい

避けたい場面

列数を変える意味がない一覧（文字中心のリストなど）

最小コード

GestureDetector(
  onScaleStart: (_) => changed = false,
  onScaleUpdate: (d) {
    if (changed || d.pointerCount < 2) return;
    if (d.scale > 1.3) setState(() => columns = max(2, columns - 1)); // 広げる → 大きく
    if (d.scale < 0.75) setState(() => columns = min(7, columns + 1)); // つまむ → 細かく
    changed = d.scale > 1.3 || d.scale < 0.75;
  },
  child: AnimatedSwitcher(
    duration: const Duration(milliseconds: 300),
    child: GridView.count(key: ValueKey(columns), crossAxisCount: columns, children: photos),
  ),
)