做这个按钮的起因是，产品突然说要改一下点赞效果，像下面这样。
image
但是我心中的审美不是这样的，不可以，坚决不行。
想起来群花拉面写过一个用Flutter实现一个仿Twitter的点赞效果.
看了下代码，
站在大佬们的肩膀 jd-alexander and 吉原拉面 ，把代码魔改了一下，开源真香，并且添加了点赞数字动画。
把效果给产品看了一下
image
直接让产品改变主意，这个效果好，全平台都改。。。
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;
},
),
什么时候去请求服务改变状态
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) |
| postion | like count widget 位置(left,right).在like wiget的左边或者右边 | Postion.right |
最后放上 like_button，如果你有什么不明白或者对这个方案有什么改进的地方，请告诉我，欢迎加入Flutter Candies，一起生产可爱的Flutter 小糖果(QQ群:181398081)
最最后放上Flutter Candies全家桶，真香。
image
