Flutter 仿掘金推特色贊按鈕

作這個按鈕的原由是，產品忽然說要改一下點贊效果，像下面這樣。

可是我心中的審美不是這樣的，不能夠，堅定不行。 想起來羣花拉麪寫過一個用Flutter實現一個仿Twitter的點贊效果.

看了下代碼， 站在大佬們的肩膀 jd-alexander and 吉原拉麪 ，把代碼魔改了一下，開源真香，而且添加了點贊數字動畫。

把效果給產品看了一下

直接讓產品改變主意，這個效果好，全平臺都改。。。

• like_button
  • 如何使用.
  • 何時去請求服務改變狀態
  • 參數

如何使用.

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