I noticed this issue

if like count is greater than 10 ex, 11, 12 etc...

two text widgets are shown there are no errors shown nothing don't know what going wrong

if like count is less than 10 it works fine

you can refer the below image

when setState() is called it gets back to normal but if someone interacts with It it once again reappears

and support for changing background colour is also required as you can see now background is light grey

please provide the solution as soon as possible as I am using this library in live app and users are facing this issue

I tried your documentation but when I register OnTap I loose animation effect. this is my code:

LikeButton(
                            size: 30.0,
                            circleColor: CircleColor(
                              start: Color(0xffE9C349),
                              end: Colors.red,
                            ),
                            onTap: (isLiked) async {
                              await gen.addMusicsToFavorite();
                              final Completer<bool> completer =
                                  new Completer<bool>();
                              Timer(
                                const Duration(milliseconds: 200),
                                () {
                                  completer.complete(gen.music['is_favorite']);
                                  return completer.future;
                                },
                              );
                            },
                            bubblesColor: BubblesColor(
                              dotPrimaryColor: Colors.red,
                              dotSecondaryColor: Color(0xffE9C349),
                            ),
                            isLiked: gen.music['is_favorite'],
                            likeBuilder: (bool isLiked) {
                              return isLiked
                                  ? Icon(
                                      Icons.favorite,
                                      color: Color(0xffE9C349),
                                      size: 30.0,
                                    )
                                  : Icon(
                                      Icons.favorite_border,
                                      color: Colors.white,
                                    );
                            },
                          ),

in my provider class I execute addMusicsToFavorite and then the result will be gen.music['is_favorite'],

Similar to #27, but the solution does not work for me.

I have a like button, inside of a List Tile. when i like it, then scroll it out of view, and back again, the likeBuilder is triggered, but the isLiked boolean of it is false, even though i previously returned true from an onTap call.

If i use this code, press the like button, the animation plays as expected, but if i scroll down, _currentlyAnsweredNotification.liked stays true, but the Like Button is rebuild as non-liked and can be pressed again (the isLike property of the like builder is also false)

ListTile(
          title: Text(notificationContent),
          subtitle: Column(
            children: <Widget>[
              Text(flairText),
              Container(height: 20, color: null, child: Row()),
              Container(
                  child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Helpful? '),
                  LikeButton(
                    size: 70,
                    circleColor: CircleColor(
                        start: Color(0xff00ddff), end: Color(0xff0099cc)),
                    bubblesColor: BubblesColor(
                      dotPrimaryColor: Color(0xff33b5e5),
                      dotSecondaryColor: Color(0xff0099cc),
                    ),
                    isLiked: _currentlyAnsweredNotification.liked,
                    likeBuilder: (bool isLiked) { return Icon(
                         log("likeBuilder is like $isLiked");
                        (isLiked
                            ? Icons.thumb_up
                            : Icons.thumb_up_off_alt),
                        color: Colors.black,
                      );
                    },
                    onTap: (isLiked) async {
                        _currentlyAnsweredNotification.liked =
                            !isLiked; 
                      return  _currentlyAnsweredNotification.liked;
                    },
                  ),
                ],
              ))
            ],
          ),
        )

I have wrapped this Like Button with my stateless Widget named Love Button The animation of this like button is working until I use onTap feature after onTap callback added to the widget the animation stops , only color is changed
Here's my Code

`class LoveButton extends StatelessWidget { @required final IconData icon; @required final IconData likedIcon; @required final Color startColor; @required final Color endColor; @required final Color dotPrimaryColor; @required final Color dotSecondaryColor; @required final Color likeColor; @required final int likeCount; @required final bool isLiked; @required final LikeButtonTapCallback onTap;

const LoveButton( {Key key, this.icon, this.dotSecondaryColor, this.dotPrimaryColor, this.endColor, this.startColor, this.likeColor, this.likedIcon, this.likeCount, this.isLiked, this.onTap}) : super(key: key); @override Widget build(BuildContext context) { return LikeButton( size: 24.0, isLiked: isLiked, circleColor: CircleColor(start: startColor, end: endColor), bubblesColor: BubblesColor( dotPrimaryColor: dotPrimaryColor, dotSecondaryColor: dotSecondaryColor, ), onTap: onTap, likeBuilder: (bool isLiked) { return !isLiked ? Icon( icon, color: Colors.grey, size: 24.0, ) : Icon( likedIcon, color: likeColor, size: 24.0, ); }, countPostion: CountPostion.left, likeCountPadding: EdgeInsets.only(right: 3), countDecoration: (Widget count, int likeCount) { var _formattedNumber = NumberFormat.compact().format( likeCount, ); if (likeCount == 0) { count = Text( "", ); } else count = Text( " ${_formattedNumber.toLowerCase()}", style: textTheme.caption.copyWith(color: colorScheme.secondary), ); return count; }, likeCount: likeCount, ); } }`

Hers My implementation of LovedButton LoveButton( onTap: (bool isLiked) async { print(isLiked); if (!isLiked) { await firestoreService.addLikes( postId: post.postId, currentUserId: sanjuUser.id, ownerId: post.ownerId); await firestoreService.addLikeToActivity( ownerId: post.ownerId, postId: post.postId, currentUserId: sanjuUser.id, mediaUrl: post.mediaUrl, timestamp: new DateTime.now().millisecondsSinceEpoch, displayType: post.type); return isLiked; } else { await firestoreService.deleteLikes( postId: post.postId, currentUserId: sanjuUser.id, ownerId: post.ownerId); await firestoreService.removeLikeFromActivity( ownerId: post.ownerId, postId: post.postId, currentUserId: sanjuUser.id); return !isLiked; } }, isLiked: _isLiked, icon: FeatherIcons.heart, likeCount: 100, likeColor: colorScheme.primary, likedIcon: Icons.favorite, endColor: colorScheme.primary, startColor: colorScheme.primaryVariant, dotPrimaryColor: colorScheme.primaryVariant, dotSecondaryColor: colorScheme.secondaryVariant, ), Please help What should I do to get that animation and background work done.

Hi,

I would like to be able in the tap event to set the liked state and change the state of the button and then call my API.

It's to avoid lag time of API call.

onTap: (statusLiked) async { // set Likebutton liked = statusLiked how to do it? return await callApi!(taped); },

How can I do it?

When i used async function inside onbutton tapped ,animation is stopped,i tried many times or it will show initial color of button not updating liked color

Hi,

I'm using following code mentioned here https://pub.dev/packages/like_button#how-to-use-it , it passes isLiked value on onTap:onLikeButtonTapped, But issue is how we can pass record_id we are getting from server to this method? As we need to pass back record_id to server when we Tap on this LikeButton.

Any thoughtS?

Thanks :)

Hey guys great library but a question when i run the like count and isLiked from a stream and have the onTap trigger a change in the value on a remote server it breaks the animation any suggestion

ontap: Future flameToggle(bool isLiked) async { await context .read() .myDB .setContentLiked(!isLiked)); return !isLiked; }

also i have the isLiked being set initially if liked or not from the stream

isLiked: mycontentModelStream.myContent.isLiked)

the values update but no animations

I create a GlobalKey for each LikeButton and want to invoke it from another onTap event.

Thats the onTap event of the button: key: _e.get('room')['globalKey'], onTap: (liked) async{ print('${liked}'); return !liked; },

But when i invoke it like this, nothing happens final LikeButton lk = _e.get('room')['globalKey'].currentWidget; lk.onTap(false);

So i see the print-output, but the button doesnt react at all.

Any idea, what i am doing wrong?

Thanks for your help

typedef LikeWidgetBuilder = Widget Function(bool isLiked);

As per the above the code/line LikeWidgetBuilder is not allowing user to send multiple or extra params. Which is an issue

Is there any way I can use it as a simple button, instead of a toggle button? I would like the user to be able to click the button for likes, but don't want them to click again to Unlikes, so the button will behave as a normal button, always showing animation for likes and incementing like counts, never decreasing like counts.

I believe, LikeButton should use InkResponse instead of GestureDetector inside the code here. The InkResponse can then also use the appropriate HoverColor and HighlightColor.

This can also be seen in Twitters design:

This would also provide changing the Cursor automatically on hover, on Desktop / Web.

To perfectly recreate the Twitter behaviour, a custom InkHighlight and a MouseRegion might be needed, instead of InkResponse.

Furthermore, I believe that if onTap is null, the LikeButton should be disabled. the Icon and Text inside of the LikeButton should then change its Color to a disabled state. It would be nice if LikeButton had its own ButtonStyle, with appropriate MaterialStateProperty like other buttons.

This would help to make LikeButton feel more like official Flutter widgets.