pub package GitHub stars GitHub forks GitHub license GitHub issues flutter-candies

Language: English | 中文简体

Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

Reference codes from jd-alexander and 吉原拉面 ,thank them for open source code.

Web Demo for LikeButton

How to use it.

the default effects is Icons.favorite


and you can also define custom effects.

          size: buttonSize,
              CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
          bubblesColor: BubblesColor(
            dotPrimaryColor: Color(0xff33b5e5),
            dotSecondaryColor: Color(0xff0099cc),
          likeBuilder: (bool isLiked) {
            return Icon(
              color: isLiked ? Colors.deepPurpleAccent : Colors.grey,
              size: buttonSize,
          likeCount: 665,
          countBuilder: (int count, bool isLiked, String text) {
            var color = isLiked ? Colors.deepPurpleAccent : Colors.grey;
            Widget result;
            if (count == 0) {
              result = Text(
                style: TextStyle(color: color),
            } else
              result = Text(
                style: TextStyle(color: color),
            return result;

The time to send your request

      onTap: onLikeButtonTapped,
  Future<bool> onLikeButtonTapped(bool isLiked) async{
    /// send your request here
    // final bool success= await sendRequest();

    /// if failed, you can do nothing
    // return success? !isLiked:isLiked;

    return !isLiked;


parameter description default
size size of like widget 30.0
animationDuration animation duration to change isLiked state const Duration(milliseconds: 1000)
bubblesSize total size of bubbles size * 2.0
bubblesColor colors of bubbles const BubblesColor(dotPrimaryColor: const Color(0xFFFFC107),dotSecondaryColor: const Color(0xFFFF9800),dotThirdColor: const Color(0xFFFF5722),dotLastColor: const Color(0xFFF44336),)
circleSize final size of circle size * 0.8
circleColor colors of circle const CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107)
onTap tap call back of like button,you can handle your request in this call back
isLiked whether it is liked(if it's null, always show like animation and increase like count) false
likeCount if null, will not show) null
mainAxisAlignment MainAxisAlignment for like button
likeBuilder builder to create like widget null
countBuilder builder to create like count widget null
likeCountAnimationDuration animation duration to change like count const Duration(milliseconds: 500)
likeCountAnimationType animation type to change like count(none,part,all) LikeCountAnimationType.part
likeCountPadding padding for like count widget const EdgeInsets.only(left: 3.0)
countPostion top,right,bottom,left of like button widget CountPostion.right
countDecoration decoration of like count widget null
postFrameCallback call back of first frame with LikeButtonState null