ダブルタップでいいね Double Tap to Like
写真を2回すばやくたたくと、真ん中に大きなハートがぽんっと出て消え、いいねになる。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
Instagram で広まった、ボタンを探さずに写真そのものを「いいね」できる操作です。
GestureDetector の onDoubleTap で受け取り、写真の上に重ねたハートを TweenSequence で
「0 → 1.25 → 1 → 少し止まる → 小さくなりながら消える」と動かします。
ダブルタップは「いいね」だけにして取り消しはさせず、取り消しは下のハートボタンで行うのがお約束です。
onTap と onDoubleTap を両方付けると、1回目のタップは2回目を待つ分だけ反応が遅れる点に注意します。
こんなときに
- 写真や動画が主役の投稿で、ボタンを押さずに気軽に反応させたい
避けたい場面
- ダブルタップを別の操作(拡大など)にも使っている画面
最小コード
GestureDetector(
onDoubleTap: () {
setState(() => liked = true);
heartController.forward(from: 0); // 真ん中のハートを動かす
},
child: Stack(alignment: Alignment.center, children: [
Image.network(post.imageUrl),
ScaleTransition(
scale: heartScale,
child: const Icon(Icons.favorite, size: 110, color: Colors.white),
),
]),
)使うウィジェット
GestureDetector(onDoubleTap)AnimationControllerTweenSequence