fluttercandies/like_button

Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button

Language: English | 中文简体

Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

Reference codes from jd-alexander and 吉原拉面 ,thank them for open source code.

Web Demo for LikeButton

• like_button
  • How to use it.
  • The time to send your request
  • parameters

How to use it.

the default effects is Icons.favorite

  LikeButton(),

and you can also define custom effects.

  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;
          },
        ),

The time to send your request

    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;
  }

parameters

parameter	description	default
size	size of like widget	30.0
animationDuration	animation duration to change isLiked state	const Duration(milliseconds: 1000)
bubblesSize	total size of bubbles	size * 2.0
bubblesColor	colors of bubbles	const BubblesColor(dotPrimaryColor: const Color(0xFFFFC107),dotSecondaryColor: const Color(0xFFFF9800),dotThirdColor: const Color(0xFFFF5722),dotLastColor: const Color(0xFFF44336),)
circleSize	final size of circle	size * 0.8
circleColor	colors of circle	const CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107)
onTap	tap call back of like button，you can handle your request in this call back
isLiked	whether it is liked(if it's null, always show like animation and increase like count)	false
likeCount	if null, will not show)	null
mainAxisAlignment	MainAxisAlignment for like button	MainAxisAlignment.center
likeBuilder	builder to create like widget	null
countBuilder	builder to create like count widget	null
likeCountAnimationDuration	animation duration to change like count	const Duration(milliseconds: 500)
likeCountAnimationType	animation type to change like count(none,part,all)	LikeCountAnimationType.part
likeCountPadding	padding for like count widget	const EdgeInsets.only(left: 3.0)
countPostion	top,right,bottom,left of like button widget	CountPostion.right
countDecoration	decoration of like count widget	null
postFrameCallback	call back of first frame with LikeButtonState	null

like_button's Issues

Count Position

Can i show the count at the left of the icon ?

Like Status resetting when scrolling away

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;
                    },
                  ),
                ],
              ))
            ],
          ),
        )

No way to pass record_id to onLikeButtonTapped

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 :)

This does not seem to work on Flutter web

When attempting to draw a simple LikeButton using the LikeButton(likeCount:69) constructor, it throws the following error on web:

Flutter Web does not support the blend mode: BlendMode.clear

Is this something I can resolve for the web or a library issue?

No Animation when isLiked is set to true or false

I am building the state of the LikeButton using the Streambuilder. When I set the isLiked attribute, the animation does not play.
Streambuilder calls set state by itself, so the animation may be cancelled of that.

Any help would be appreciated.

Example:

StreamBuilder(
                                  stream: FirebaseFirestore.instance
                                      .collection('users')
                                      .doc(auth.currentUser.uid)
                                      .collection('favourite')
                                      .doc(listingdetail.id)
                                      .snapshots(),
                                  builder: (context,
                                      AsyncSnapshot<DocumentSnapshot>
                                          favouritesnapshot) {
                                    return LikeButton(
                                      isLiked: favouritesnapshot.data.exists
                                          ? true
                                          : false,
                                      onTap: (isliked) {
                                        return onLikeButtonTapped(
                                            favouritesnapshot.data.exists
                                                ? true
                                                : false,
                                            listingdetail);
                                      },
                                    );
                                  }),

Count Position

Is there a way to place the count text below the button.

icon and text alignment

Is there any param able to make alignment column instead of row

Animation crash on running code on onTap

My like button:

LikeButton(
        onTap: (value) {
          onGroupVotePress(document);
          return Future.value(!value);
        },
      ),

When I'm running my onGroupVotePress function my like_button animation crashes.

My onGroupVotePress function:

void onGroupVotePress(DocumentSnapshot document) {
      Network().appendToGroupList(document.id, 'group_votes', [globals.user.userId]);
      Network().appendToGroupList(document.id, 'votes', [globals.user.userId]);
      AppAnalytics().onGroupVote(document.id, true);
  }

WhatsApp.Video.2021-02-19.at.1.28.14.PM.mp4

Why is that?

onTap taking a long time to like

Everything works fine, but it's taking a long time to the heart be liked when on tap, how can i solve this problem?

Try correcting the name to the name of an existing getter, or defining a getter or field named 'Overflow'.

/flutter/.pub-cache/hosted/pub.flutter-io.cn/like_button-0.2.0/lib/src/like_button.dart').
Try correcting the name to the name of an existing getter, or defining a getter or field named 'Overflow'.
overflow: Overflow.visible,

    • Flutter version 1.19.0-2.0.pre.208 at /Users/xx/Documents/flutter
    • Framework revision bfe6d2f4e6 (16 hours ago), 2020-05-29 19:08:01 -0400
    • Engine revision 4d78121a11
    • Dart version 2.9.0 (build 2.9.0-11.0.dev 6489a0c68d)

Bubble animation does not work after Flutter 2

Hi,

I upgraded to flutter 2 and the null safety version of this package, and now the bubble animation does not work, it does not overflow outside the side, it all stay in a little box the size of the heart, any fix for this? If I downgrade to 1.0.4 it works again

Exception: Trailing widget consumes entire tile width. Please use a sized widget. ('tileWidth != trailingSize.width')

Dear FlutterCandies,

I found an issue while using like_button in ListTile. However I use FittedBox to solve this issue, as I found that like_button takes all the width size of the screen that causes the error.
I request you to please solve this issue.

Nullsafety migration

Hello, it would be nice to have the library migrated to nullsafety, with Flutter 2.0 released. Thanks :)

Can't add Parameters in onTap

I want to pass the productID as a parameter to the function but don't know how to do that as the on tap expecting bool isLiked only

Ontap working when build method called>

The parameter working when ontap: is working when building the widget.

Animation Status Listener

I am using this library to create an upvote and downvote button.

When the user upvotes while the downvote is liked, then the downvote has to be unliked.
I use a ValueListenableBuilder around my LikeButton so I can rebuild it when changing the like status.

So my code looks something like this:

enum _VoteStatus {
  upvoted,
  unknown,
  downvoted,
}

ValueNotifier<_VoteStatus> voteStatus = ValueNotifier(_VoteStatus.unknown);

ValueListenableBuilder(
  valueListenable: voteStatus,
  builder: (context, value, child) {
    return LikeButton(
      isLiked: value == _VoteStatus.upvoted,
      likeBuilder: (bool isLiked) {
        return Icon(
          Icons.arrow_upward,
          color: isLiked
              ? Colors.deepOrange
              : Theme.of(context).iconTheme.color,
        );
      },
      onTap: (isLiked) async {
          tryVote(context, post, true);
          if (isLiked) {
            return false;
          } else {
            return true;
          }
      },
    );
  },
),

Future<void> tryVote(
    BuildContext context, Post post, bool upvote) async {
  voteStatus.value = client.votePost(post.id, upvote);
}

But depending on how long the client needs to request the new vote status from the server, the animation is interrupted.
I cannot await tryVote in onTap because then the status will be set before returning and the animation never plays.

Is there a way you could allow adding a status listener to the animation, to then set the vote status after the animation played?

Like status changing on listview scrolling

Like status is changing its status and is not retaining it during scroll of a listview. This adversely affects "like an article" functionality in terms of users perspective.

Not centered Icon when not using count

Hi,

Iam trying to use the like widget, without the like count.
When I put it into a CircleAvatar, the Icon is not centered correctly:

Any chance to fix this?

Thanks in advance!

Add likeCount param in countDecoration

Add int likeCount param in countDecoration property for us to know the real count and for us to do some logic depending on the like count.

   countDecoration: (Widget count, int likeCount) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            count,
            SizedBox(width: 5),
            Text(
              likeCount > 1 ? "Likes" : "Like",
              style: TextStyle(color: white.withOpacity(0.7), fontSize: 12),
            ),
          ],
        );
      },

Support for count greater than 999 not working

count doesn't get converted to 1.0K or 1.2K according to count 1001 and 1205 respectively

Can we start animation without onTap ?

i d'like to know if the animation is tied to the ontap or to the isLiked parameter ?
I want to start the animation based on a boolean stored in the database.
I tried to tie the isLiked parameter to a value from my database, but only the color of the icon changes, the animation is not triggered

Animation not playing when a bunch were pressed

I really like the animation, but sadly it is not playing the animation if:

a) there are a bunch of the buttons on a single screen (like a ListView)
b) the animation was triggered a few times (around 10-12 times)

When the button is pressed, you will see the small version of the icon and then straight the big one without any bubbles and circle. I might investigate this issue in the next week further but wanted to ask first if anybody else has experienced this yet.

Trigging Tap Animation Programmatically

Is it possible to create a reaching point for trigging onTap animation programmatically, that means without tap?

Keep status button on listview scroll

I use listview to display like button. After I tap the likebutton (eq: null to like) then I scroll the listview, the status of likebutton changes to the position before I tap (null not like). How to keep the status button like the last condition?

master 分支运行报错

上图是iOS的报错，
Android也是一样会报错

Button shows no reaction when invoking onTap via GlobalKey

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

when i scroll up and down the like count move the back state.

Enlarge clickable zone

Thanks for your package... Beautiful.

Is there something to enlarge clickable zone ? Or a method to implement a larger zone properly ?

Lot of app enlarge clickable zone because like buttons are above another clickable zones (Cards, pictures...). The goal is to avoid clicking on the photo.

Implementing NumberFormat.compact() on likeCount

How do we use NumberFormat.compact() on likeCount? if the number hits 10,000 its not shorten to 10k

in bottom navigation bar this button is not working..

请问那个 TuChongItem类 noTap中返回的函数传入的 item 参数是哪里来的？

Animation doesn't work when using "isLiked" parameter on the widget

Hi,

Whenever I set the "isLiked" value on the widget, the animation stops working.

Scenario: I query the database to see what the current "like" state is and set it on the like_button. When user "un-hearts" it, db updates the like state which is reflected in the value I set for "isLiked" parameter for the widget.

Whenever "isLiked" is set to a value other than "false", the "un like" to "like" animation stops working.

`
Expanded(
child: LikeButton(
isLiked: currentLikeState,
mainAxisAlignment: MainAxisAlignment.end,
size: 30,
likeBuilder: (isLiked) {
return isLiked
? Icon(
Icons.favorite,
color: Colors.pink,
)
: Icon(
Icons.favorite_outline,
color: Colors.grey,
);
},
onTap: (prevLikeState) async {

  /**
   * 1. Collect which entity was clicked on
   * 2. If not liked, add to user likes
   * 3. If already liked, remove from user likes
   */

  bool likeStatus = await db.updateEntityLike(!prevLikeState, entity, user);

  return likeStatus;

  // return db.updateEntityLike(!prevLikeState, entity, user);
},

),
)

`

isLiked sync issue

Thank you for the awesome animation button package. I've very appreciated your effort.
Recently, I've noticed somewhat race condition issue, which prevents the animation to work correctly.

The following is my pseudocode sample.

bool _isOn;
...

Widget build(BuildContext context) {
  return LikeButton(
    isLiked: _isOn,
    onTap: (isOn) async {
      // Update _isOn value
      return !isOn;
    }
  );

Normal working flow should be

onTap called
-> Update _isOn value
-> onTap returned
-> animation
-> LikeButton didUpdateWidget called from isLiked value update.

However, this will not be guaranteed every time.
So the flow could be

onTab called
-> Update _isOn value
-> LikeButton didUpdateWidget called from isLiked value update
-> the Icon changed from _isLiked value update
-> onTap returned
-> No animation because internal _isLiked already updated

The issue is caused because the following like

like_button/lib/src/like_button.dart

Line 401 in 8ecb015

widget.onTap(_isLiked ?? true).then((bool isLiked) {

Is there a reason onTap requires Future<bool> instead of bool?

I think a simple change to bool will remove the race condition.

How to stop animation?

I am trying to implement an instagram like app. I want that when I press the LikeButton() , on certain conditions no animation should be played. Is there some way to do this?

Animation is not shown while using onTap Feature

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.

Bubble animation is not working

All of the functionalists of the button are working well, but the animation shows only the circle and the icon animation, I can't see the bubbles animation at all. here is my code:

            child: LikeButton(
              animationDuration: Duration(milliseconds: 1000),
              bubblesSize: 10,
              isLiked: item.wishlisted,
              circleColor: CircleColor(
                  start: WiddeeColors.white, end: WiddeeColors.primary),
              onTap: (liked) {
                Logger().w(item.toJson());
                if (item.wishlisted) {
                  BlocProvider.of<MenuBloc>(context).add(
                      RemoveFromWishList(item: item, categoryId: categoryId));
                  return Future.value(false);
                } else {
                  BlocProvider.of<MenuBloc>(context)
                      .add(AddToWishList(item: item, categoryId: categoryId));
                  return Future.value(true);
                }
              },
              likeBuilder: (bool isLiked) {
                return Icon(
                  isLiked ? Icons.favorite : Icons.favorite_border,
                  color: WiddeeColors.primary,
                );
              },
            ),
            left: 10,
            top: 10,
          )

能把字体大小设置放出来吗?

Animate counting text on changed value

Hi thanks for your great package, can you help me with animating counting text on changed value , how can we trigger the animation without tapping on the button? Thanks in advance!

Trigger on Tap without touch the icon

I would like to trigger the like event, like for example, double tapping my post like Instagram. As far as i saw, i didnt manage to make it, is there any way that I am missing out??

Thanks in advance

problem with OnTap

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'],

No option provided to send multiple or extra params in callback

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

strange behaviour with like count widget

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

Only increment (add) button

I'm trying to implement "only increment (add)" share button,
To show how many times this entity has been shared.

Tried to explore the countBuilder, but everything get messy and things not working,
Can someone share an example?

(I'm using the onTap to update the server)

animation stopped

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

No "Unlike" behaviour

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.

Trouble with count grather than 9

I have the following Code, but when I click the like button, 10 becomes in 1111 instead on 11.

frases_options_widget.txt

Bubble Animation doesn't work when using onTap?

Hello, i have a problem when i try to use onTap function the bubble animation doesn't work.
likeBuilder and likeCount work properly, but without bubble animation
i have a onTap function like this, am i doing wrong ? _list.isLiked is data from API

Future<bool> onLikeButtonTapped(bool isLiked) async{
          if(!_list.isLiked){
            context.bloc<LikeUnlikeBloc>().add(LikeEvent(id: _list.id));
            context.bloc<FollowingPostBloc>().add(UpdateFollowingPost());
            setState(() {
              _list.isLiked = true;
            });
          }else{
            context.bloc<LikeUnlikeBloc>().add(UnlikeEvent(id: _list.id));
            context.bloc<FollowingPostBloc>().add(UpdateFollowingPost());
            setState(() {
              _list.isLiked = false;
            });
          }
          return _list.isLiked;
        }

LikeButton(
                          circleColor: CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
                          bubblesColor: BubblesColor(
                            dotPrimaryColor: Color(0xff33b5e5),
                            dotSecondaryColor: Color(0xff0099cc),
                          ),
                          likeBuilder: (bool isLiked) {
                            return _list.isLiked?Icon(
                              Icons.favorite,
                              color: BaseColor.red,
                            ):Icon(Icons.favorite_border,);
                          },
                          onTap: onLikeButtonTapped,
                          likeCount: _list.likes.length,
                          countBuilder: (int count, bool isLiked, String text) {
                            var color = _list.isLiked ? Colors.deepPurpleAccent : Colors.grey;
                            Widget result;
                            if (count == 0) {
                              result = Text(
                                "0",
                                style: TextStyle(color: color),
                              );
                            } else
                              result = Text(
                                text,
                                style: TextStyle(color: color),
                              );
                            return result;
                          },
                        ),

Exception Caused By Rendering Library

Dear FlutterCandies,

I found an issue while building Flutter App (flutter run --release) -
Please find below the issue occurred-

I/flutter (28095): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════

I/flutter (28095): The following assertion was thrown during layout:

I/flutter (28095): A RenderFlex overflowed by 5.0 pixels on the right.

I/flutter (28095):

I/flutter (28095): The relevant error-causing widget was:

I/flutter (28095): Row

I/flutter (28095): file:///C:/flutter/.pub-cache/hosted/pub.dartlang.org/like_button-0.2.0/lib/src/like_button.dart:246:11

I/flutter (28095):

I/flutter (28095): The overflowing RenderFlex has an orientation of Axis.horizontal.

I/flutter (28095): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and

I/flutter (28095): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

I/flutter (28095): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the

I/flutter (28095): RenderFlex to fit within the available space instead of being sized to their natural size.

I/flutter (28095): This is considered an error condition because it indicates that there is content that cannot be

I/flutter (28095): seen. If the content is legitimately bigger than the available space, consider clipping it with a

I/flutter (28095): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,

I/flutter (28095): like a ListView.

I/flutter (28095): The specific RenderFlex in question is: RenderFlex#77b67 OVERFLOWING:

I/flutter (28095): creator: Row ← _PointerListener ← Listener ← _GestureSemantics ← RawGestureDetector ←

I/flutter (28095): GestureDetector ← LikeButton ← SizedBox ← IconTheme ← Builder ← _ListTile ← MediaQuery ← ⋯

I/flutter (28095): parentData: (can use size)

I/flutter (28095): constraints: BoxConstraints(w=28.0, h=28.0)

I/flutter (28095): size: Size(28.0, 28.0)

I/flutter (28095): direction: horizontal

I/flutter (28095): mainAxisAlignment: center

I/flutter (28095): mainAxisSize: max

I/flutter (28095): crossAxisAlignment: center

I/flutter (28095): textDirection: ltr

I/flutter (28095): verticalDirection: down

I/flutter (28095): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤

I/flutter (28095): ════════════════════════════════════════════════════════════════════════════════════════════════════

I/flutter (28095): -- AppModule INITIALIZED

I/flutter (28095): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════

I/flutter (28095): The following assertion was thrown during layout:

I/flutter (28095): A RenderFlex overflowed by 9.0 pixels on the right.

I/flutter (28095):

I/flutter (28095): The relevant error-causing widget was:

I/flutter (28095): Row

I/flutter (28095): file:///C:/flutter/.pub-cache/hosted/pub.dartlang.org/like_button-0.2.0/lib/src/like_button.dart:246:11

I/flutter (28095):

I/flutter (28095): The overflowing RenderFlex has an orientation of Axis.horizontal.

I/flutter (28095): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and

I/flutter (28095): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

I/flutter (28095): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the

I/flutter (28095): RenderFlex to fit within the available space instead of being sized to their natural size.

I/flutter (28095): This is considered an error condition because it indicates that there is content that cannot be

I/flutter (28095): seen. If the content is legitimately bigger than the available space, consider clipping it with a

I/flutter (28095): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,

I/flutter (28095): like a ListView.

I/flutter (28095): The specific RenderFlex in question is: RenderFlex#7b634 OVERFLOWING:

I/flutter (28095): creator: Row ← _PointerListener ← Listener ← _GestureSemantics ← RawGestureDetector ←

I/flutter (28095): GestureDetector ← LikeButton ← SizedBox ← IconTheme ← Builder ← _ListTile ← MediaQuery ← ⋯

I/flutter (28095): parentData: (can use size)

I/flutter (28095): constraints: BoxConstraints(w=24.0, h=24.0)

I/flutter (28095): size: Size(24.0, 24.0)

I/flutter (28095): direction: horizontal

I/flutter (28095): mainAxisAlignment: center

I/flutter (28095): mainAxisSize: max

I/flutter (28095): crossAxisAlignment: center

I/flutter (28095): textDirection: ltr

I/flutter (28095): verticalDirection: down

I/flutter (28095): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤

I/flutter (28095): ════════════════════════════════════════════════════════════════════════════════════════════════════

Strange async behaviour

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

Like ontap issue

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?