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

前言

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

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

本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：[flutter官网](https://flutter-io.cn/)

正文

轮子

- 轮子名称：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;
}

详细参数

结尾

- 轮子仓库地址：https://pub.flutter-io.cn/packages/like_button

- 系列演示demo源码：https://github.com/826327700/flutter_plugins_demo