スワイプで仕分けるカード Swipe Cards
積み重なったカードの一番上を左右に投げて振り分ける。投げた向きで「行きたい / パス」が決まる。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
どんなもの？
マッチングアプリで有名になった、1枚ずつ素早く判断させる形です。
一番上のカードを GestureDetector の onPanUpdate で指に合わせて動かし、横にずれた量に比例して少し傾けます。
離したとき、一定以上ずれていれば画面外へ飛ばして次のカードへ、足りなければ真ん中へ戻します。
傾けた向きに「行きたい」「パス」の札を浮かべると、離す前に結果が分かります。
ジェスチャーが苦手な人のために、同じ操作ができる ✕ / ♥ ボタンも置いておきます。
こんなときに
- 候補を1つずつ見て、素早く二択で振り分けたい（マッチング・単語帳・写真の整理）
避けたい場面
- 比べながら選びたいもの（一覧やグリッドのほうが合う）
最小コード
GestureDetector(
onPanUpdate: (d) => setState(() => offset += d.delta),
onPanEnd: (_) {
if (offset.dx.abs() > width * 0.28) {
flyAway(offset.dx > 0); // 右なら「行きたい」
} else {
springBack();
}
},
child: Transform.translate(
offset: offset,
child: Transform.rotate(angle: offset.dx / width * 0.4, child: card),
),
)使うウィジェット
GestureDetector(onPan)Transform.rotateAnimationController