flutter好用的轮子推荐二-点赞按钮动画

前言

Flutter是谷歌的移动UI框架，能够快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一概，好用轮子万里挑一！Flutter做为这两年开始崛起的跨平台开发框架，其第三方生态相比其余成熟框架还略有不足，但轮子的数量也已经不少了。本系列文章挑选平常app开发经常使用的轮子分享出来，给你们提升搬砖效率，同时也但愿flutter的生态愈来愈完善，轮子愈来愈多。

本系列文章准备了超过50个轮子推荐，工做缘由，尽可能每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：flutter官网

正文

轮子

• 轮子名称：like_button
• 轮子概述：推特色赞效果带数量滚动动画
• 轮子做者：zmtzawqlp
• 推荐指数：★★★★
• 经常使用指数：★★★★
• 效果预览：

  

安装

dependencies:
 like_button: ^0.1.9
复制代码

import 'package:like_button/like_button.dart';
复制代码

用法介绍

用法很简单，就一个widget：

LikeButton()
复制代码

带数字：

LikeButton(likeCount:520)
复制代码

自定义图标：

LikeButton(
    likeBuilder: (bool isLiked){
        return Icon(Icons.person);
    },
)
复制代码

自定义图标+数字：

LikeButton(
    likeBuilder: (bool isLiked){
        return Icon(Icons.person);
    },
    likeCount:520
)
复制代码

自定义图标+自定义泡泡颜色+数字：

LikeButton(
    likeBuilder: (bool isLiked){
        return Icon(Icons.person,color: isLiked ? Colors.blue : Colors.grey,);
    },
    likeCount:520,
    circleColor:CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
    bubblesColor: BubblesColor(
        dotPrimaryColor: Color(0xff33b5e5),
        dotSecondaryColor: Color(0xff0099cc),
    ),
)
复制代码

自定义图标+自定义泡泡颜色+数字修饰：

LikeButton(
    likeBuilder: (bool isLiked){
        return Icon(Icons.person,color: isLiked ? Colors.blue : Colors.grey,);
    },
    likeCount:520,
    circleColor:CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
    bubblesColor: BubblesColor(
        dotPrimaryColor: Color(0xff33b5e5),
        dotSecondaryColor: Color(0xff0099cc),
    ),
    countBuilder: (int count, bool isLiked, String text) {
        var color = isLiked?Colors.red:Colors.grey;
        Widget result;
        result = Text(
            text,
            style: TextStyle(color: color,fontSize: 20),
        );
        return result;
    },
    countDecoration:(Widget count){
        return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
                count,
                SizedBox(
                    width: 10.0,
                ),
                Text(
                    "loves",
                    style: TextStyle(color: Colors.indigoAccent),
                )
            ],
        );
    }
)
复制代码

请求时改变状态

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;
}
复制代码

详细参数

参数	描述	默认
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)
countPostion	top,right,bottom,left. count的位置(上下左右)	CountPostion.right
countDecoration	count 的修饰器，你能够经过它为count增长其余文字或者效果	null

结尾

• 轮子仓库地址：pub.flutter-io.cn/packages/li…
• 系列演示demo源码：github.com/826327700/f…