The Flutter features a like button

The reason for this button is that the product suddenly says it wants to change the “like” effect, like this.

But the aesthetic in my heart is not like this, can not, resolutely not. Remember that group flower ramen wrote about using Flutter to achieve a twitter-like like effect.

Look at the code, stand on the shoulders of the big guys, JD-Alexander and Yoshihara Ramen, the code magic changed, open source really nice, and added some nice digital animation.

I showed it to the product

Directly let the product change its mind, this effect is good, the whole platform is changed…

• like_button
  • How to use.
  • When to request a service to change state
  • parameter

How to use.

The default effect is Icons. Favorite

  LikeButton(),
Copy the code

You can customize some of the effects, like the color, like the number of likes display,

  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),
              );
            returnresult; },),Copy the code

When to request a service to change state

  LikeButton(
        onTap: (bool isLiked) 
        {
          return onLikeButtonTap(isLiked, item);
          },)
Copy the code

This is an asynchronous callback, and you can wait for the service to return before changing the state. You can also change the state first and reset it when the request fails

  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;
  }
Copy the code

more detail

parameter

more detail

Let me know if you don’t understand or have any improvements to make to the scheme. Welcome to join Flutter Candies, and make lovely Flutter Candies with us.

And finally, put Flutter Candies on it. It smells sweet.