Like Button 支持推特点赞效果和喜欢数量动画的Flutter库.
感谢 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: onLikeButtonTapped,
),
这是一个异步回调,你可以等待服务返回之后再改变状态。也可以先改变状态,请求失败之后重置回状态
Future<bool> onLikeButtonTapped(bool isLiked) async{
/// send your request here
// final bool success= await sendRequest();
/// if failed, you can do nothing
// return success? !isLiked:isLiked;
return !isLiked;
}
参数 | 描述 | 默认 |
---|---|---|
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 |