Flutter 仿掘金推特点赞按钮

做这个按钮的起因是，产品突然说要改一下点赞效果，像下面这样。

image

但是我心中的审美不是这样的，不可以，坚决不行。
想起来群花拉面写过一个用Flutter实现一个仿Twitter的点赞效果.

看了下代码，
站在大佬们的肩膀 jd-alexander and 吉原拉面 ，把代码魔改了一下，开源真香，并且添加了点赞数字动画。

把效果给产品看了一下

like_button.gif

直接让产品改变主意，这个效果好，全平台都改。。。

image

怎么使用

如果什么都不设置，默认是Icons.favorite的效果

  LikeButton(),

当然你也可以自定义一些东西

       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;
               },
             ),

下面是参数的介绍

参数	描述	默认
size	点赞Widget的大小	30.0
animationDuration	isLiked变化动画的时间长度	const Duration(milliseconds: 1000)
bubblesSize	大小泡泡的最外圈的大小	size * 2.0
bubblesColor	泡泡的颜色，由4个颜色组成	const BubblesColor(dotPrimaryColor: const Color(0xFFFFC107),dotSecondaryColor: const Color(0xFFFF9800),dotThirdColor: const Color(0xFFFF5722),dotLastColor: const Color(0xFFF44336),)
circleSize	动画时候的圈圈的最终大小	size * 0.8
circleColor	动画时候的圈圈的颜色，有开始颜色和结束颜色组成	const CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107)
onTap	点击按钮回调	你可以在这里处理请求，改变数据
isLiked	是否喜欢	false
likeCount	喜欢数量，如果未null的话，不显示likeCount部分	null
mainAxisAlignment	MainAxisAlignment值，like_button是由Row组成的	MainAxisAlignment.center
likeBuilder	生成like widget的回调，返回值为Widget,可以根据isLiked，来生成不同样式的UI	null
countBuilder	生成count widget的回调，返回值为Widget,可以根据isLiked/likeCount，来生成不同样式的UI	null
likeCountAnimationDuration	likeCount变化动画的时间长度	const Duration(milliseconds: 500)
likeCountAnimationType	likeCount动画的类型。none没有动画；part动画只作用在变化的部分；all动画作用在整个数字上	LikeCountAnimationType.part
likeCountPadding	likeCount widget的padding	const EdgeInsets.only(left: 3.0)

在什么时候去通知服务端,更新数据

在点击的时候，注册onTap回调。

如果你请求成功，返回成功的isLiked值;

如果失败了，请返回null，这样ui就不会变化，建议这个时候Toast告知一下。

         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.is_favorite = !item.is_favorite;
      item.favorites =
          item.is_favorite ? item.favorites + 1 : item.favorites - 1;

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

最后放上 like_button，如果你有什么不明白或者对这个方案有什么改进的地方，请告诉我，欢迎加入Flutter Candies，一起生产可爱的Flutter 小糖果(QQ群:181398081)

最最后放上Flutter Candies全家桶，真香。

image