個人開発者が勉強がてらまとめているだけのサイトです

ダブルタップでいいね Double Tap to Like

写真を2回すばやくたたくと、真ん中に大きなハートがぽんっと出て消え、いいねになる。

別名
2回タップでいいねハートが出るインスタのいいねダブルタップDouble Tap Heart
動き
2回たたく真ん中にハートふくらんで消える
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の 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

似ているもの・一緒に見たいもの

触ってみる ↗
ボタン いいねボタンLike Button Animation

ハートを押すと、ぽんっとふくらんで縮み、周りに小さな粒が飛び散る。数字も下から入れ替わる。

ふくらんで戻る