Flutter 仿掘金推特色赞按钮

作这个按钮的原由是，产品忽然说要改一下点赞效果，像下面这样。

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

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

把效果给产品看了一下

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

• like_button
  • 如何使用.
  • 何时去请求服务改变状态
  • 参数

如何使用.

默认效果是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;
          },
        ),
复制代码

何时去请求服务改变状态

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

参数

参数	描述	默认
size	like Widget的大小	30.0
animationDuration	like widget动画的时间	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	动画时候的圈的颜色，须要设置2种	const CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107)
onTap	点击时候的回调，你能够在里面请求服务改变状态
isLiked	是否喜欢。若是设置null的话，将会一直有动画，并且喜欢数量一直增加	false
likeCount	喜欢数量。若是为null的话，不显示	null
mainAxisAlignment	MainAxisAlignment ，like widget和like count widget是放在一个Row里面的，对应Row的mainAxisAlignment属性	MainAxisAlignment.center
likeBuilder	like widget的建立回调	null
countBuilder	like count widget的建立回调	null
likeCountAnimationDuration	喜欢数量变化动画的时间	const Duration(milliseconds: 500)
likeCountAnimationType	喜欢数量动画的类型(none,part,all)。没有动画；只动画改变的部分；所有部分	LikeCountAnimationType.part
likeCountPadding	like count widget 跟 like widget的间隔	const EdgeInsets.only(left: 3.0)
postion	like count widget 位置(left,right).在like wiget的左边或者右边	Postion.right

more detail

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

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