Flutter 仿掘金推特点赞按钮

7,728 阅读3分钟

pubpackage

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

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

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

把效果给产品看了一下

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

如何使用.

默认效果是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全家桶,真香。