like_button

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.

How to use it.

the default effects is Icons.favorite

  LikeButton(),

and you can also define custom effects.

  LikeButton(
          size: buttonSize,
          circleColor:
              CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
          bubblesColor: BubblesColor(
            dotPrimaryColor: Color(0xff33b5e5),
            dotSecondaryColor: Color(0xff0099cc),
          ),
          likeBuilder: (bool isLiked) {
            return Icon(
              Icons.home,
              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(
                "love",
                style: TextStyle(color: color),
              );
            } else
              result = Text(
                text,
                style: TextStyle(color: color),
              );
            return result;
          },
        ),

The time to send your request

  LikeButton(
        onTap: (bool isLiked) 
        {
          return onLikeButtonTap(isLiked, item);
          },)
  Future<bool> onLikeButtonTap(bool isLiked, TuChongItem item) {
    ///send your request here
    ///
    final Completer<bool> completer = new Completer<bool>();
    Timer(const Duration(milliseconds: 200), () {
      item.isFavorite = !item.isFavorite;
      item.favorites =
          item.isFavorite ? item.favorites + 1 : item.favorites - 1;

      // if your request is failed,return null,
      completer.complete(item.isFavorite);
    });
    return completer.future;
  }

more detail

parameters

parameterdescriptiondefault
sizesize of like widget30.0
animationDurationanimation duration to change isLiked stateconst Duration(milliseconds: 1000)
bubblesSizetotal size of bubblessize * 2.0
bubblesColorcolors of bubblesconst BubblesColor(dotPrimaryColor: const Color(0xFFFFC107),dotSecondaryColor: const Color(0xFFFF9800),dotThirdColor: const Color(0xFFFF5722),dotLastColor: const Color(0xFFF44336),)
circleSizefinal size of circlesize * 0.8
circleColorcolors of circleconst CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107)
onTaptap call back of like button,you can handle your request in this call back
isLikedwhether it is liked(if it's null, always show like animation and increase like count)false
likeCountif null, will not show)null
mainAxisAlignmentMainAxisAlignment for like buttonMainAxisAlignment.center
likeBuilderbuilder to create like widgetnull
countBuilderbuilder to create like count widgetnull
likeCountAnimationDurationanimation duration to change like countconst Duration(milliseconds: 500)
likeCountAnimationTypeanimation type to change like count(none,part,all)LikeCountAnimationType.part
likeCountPaddingpadding for like count widgetconst EdgeInsets.only(left: 3.0)
countPostiontop,right,bottom,left of like button widgetCountPostion.right
countDecorationdecoration of like count widgetnull

more detail

Libraries

like_button