Like A Post With Heart Animation (DYNAMICALLY SET)

Question

I am trying to (on double tap of a container), show a heart animation on screen. I want it to be with the like_button library (which already has the heart animation I want), BUT instead of the user clicking the like button, I want it to be the use double tapping on a container. I know this isn't supported with that library, but has anyone made a fork of it or changed it so that it is possible? Thanks! Here is some example code you can use to test out the library:

import 'package:flutter/material.dart';
import 'package:like_button/like_button.dart';

class LikeAnimationWidget extends StatefulWidget {
  @override
  _LikeAnimationWidgetState createState() => _LikeAnimationWidgetState();
}

class _LikeAnimationWidgetState extends State<LikeAnimationWidget> {
  bool liked = false;

  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 100),
        LikeButton(
          onTap: (bool isLiked) async {
            setState(() {
              liked = !isLiked;
            });
            return !isLiked;
          },
          isLiked: liked,
          size: 200,
          circleColor:
              CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
          bubblesColor: BubblesColor(
            dotPrimaryColor: Color(0xff33b5e5),
            dotSecondaryColor: Color(0xff0099cc),
          ),
          likeBuilder: (bool isLiked) {
            return Icon(
              Icons.favorite,
              color: isLiked ? Colors.deepPurpleAccent : Colors.grey,
              size: 50,
            );
          },
          countBuilder: (int? count, bool isLiked, String text) {
            var color = isLiked ? Colors.deepPurpleAccent : Colors.grey;
            Widget result;
            if (count == 0) {
              result = Text(
                "love",
                style: TextStyle(color: color),
              );
            } else {
              result = Text(
                text,
                style: TextStyle(color: color),
              );
            }
            return result;
          },
        ),
      ],
    );
  }
}

score 0 · Answer 1 · answered May 27 '23 at 16:15

You could override the function onTap in the LikeButton class and implement a GestureListener. Likely there will even be one already implemnted for you to just modify. This could be done by creating a class MyLikeButton and extending the LikeButton class. You can then use the @Override Tag to override the onTap function and make it, so that the onTap event is triggered when you doubleTap.

How to implement the doubleTap gesture with gesture listener can be read here

Like A Post With Heart Animation (DYNAMICALLY SET)

1 Answers1