strange behaviour with like count widget

[VickySalunkhe]

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

[zmtzawqlp]

please provide runable demo to show your case.

[VickySalunkhe]

https://drive.google.com/file/d/15c3dqPNE9146FNqM8ZplOEiACLaukQCg/view?usp=drivesdk

You can view the video here.

[zmtzawqlp]

I need to know what code is causing this problem，i can't just think about it

[VickySalunkhe]

class _PostLikeState extends State<PostLike> {
  @override
  Widget build(BuildContext context) {
    return Material(child: _likeButton());
  }

  Widget _likeButton() {
    return LikeButton(
      size: 26,
      isLiked: widget.post.likeStatus,
      likeBuilder: (bool isLiked) {
        return Icon(
          isLiked ? Icons.favorite : Icons.favorite_border,
          color: isLiked ? Colors.red : Colors.black54,
          size: widget.fontSize >= 24 ? widget.fontSize : 20,
        );
      },
      likeCount: widget.post.likeCount,
      countBuilder: (int count, bool isLiked, String text) {
        var color = Colors.black54;
        Widget result;
        result = InkWell(
          onTap: () =>
              Routes.launchLikesPage(context, widget.post.postID, "post"),
          child: Container(
            padding: EdgeInsets.only(
                left: widget.fontSize >= 24 ? 8.0 : 0.0,
                right: 6.0,
                top: 6.0,
                bottom: 6.0),
            child: Text(
              ConstantValues.getCountString(count),
              style: TextStyle(
                  color: color, fontSize: widget.fontSize >= 24 ? 14 : 11),
            ),
          ),
        );
        return result;
      },
      likeCountAnimationType: widget.post.likeCount < 1000
          ? LikeCountAnimationType.part
          : LikeCountAnimationType.none,
      onTap: (bool isLiked) {
        return onLikeButtonTap(isLiked, widget.post);
      },
    );
  }

  Future<bool> onLikeButtonTap(bool isLiked, Post post) {
    ///send your request here
    ///
    final Completer<bool> completer = new Completer<bool>();
    Timer(const Duration(milliseconds: 200), () {
      if (widget.post.likeStatus) {
        widget.post.likeStatus = !widget.post.likeStatus;
        widget.post.likeCount--;
        removeLike("post", widget.post.postID);
      } else {
        widget.post.likeCount++;
        widget.post.likeStatus = !widget.post.likeStatus;
        addLike("post", widget.post.postID);
      }

      // if your request is failed,return null,
      completer.complete(post.likeStatus);
    });
    return completer.future;
  }
}

addLike(String type, String postID) async {
}

removeLike(String type, String postID) async {
}

this is the code im using

[VickySalunkhe]

I guess the problem is with LikeCountWidgetBuilder
when i dont pass it, likes are shown are properly
but i want to customize somethings like font size and spacing and i guess thats why LikeCountWidgetBuilder is there for

[zmtzawqlp]

countBuilder: (int count, bool isLiked, String text) {
                var color = Colors.grey;
                Widget result;

                result = Text(
                  text,
                  style: TextStyle(color: color),
                );
                return result;
              },
              likeCountPadding: EdgeInsets.only(top: 15.0),
              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),
                    )
                  ],
                );
              },
            ),

i think you need countDecoration

[VickySalunkhe]

no help same problem occurs when I add countDecoration code

I guess that double text is appearing while transition may be there is something to do while count is increased or decreased but I don't know why it only occurs when count > 10

[zmtzawqlp]

don't use count to calculate text to show。 please take a look at demo

              countBuilder: (int count, bool isLiked, String text) {
                var color = Colors.grey;
                Widget result;

                result = Text(
                  text,
                  style: TextStyle(color: color),
                );
                return result;
              },

[VickySalunkhe]

does it support text append for million and thousand like
1k, 1m ?

i am using count as that function returns a text

some space is being added dont know how
please look into it

[VickySalunkhe]

that space issue was being caused because of padding in container i added for now its resolved

can you add a support for changing background colour ?

[zmtzawqlp]

please take a look at demo。。1k has demo

[zmtzawqlp]

countDecoration for background

[VickySalunkhe]

i am taling about changing the whole background including like icon as you can see in the image whole widget provided by the library passes light grey colour

[zmtzawqlp]

change whole background when like count is changing?

[VickySalunkhe]

no i want to change the background colour whole time

example my app them colour is white so will need to add every widget with background colour set to white

i just tested with count of 1000, 9999, 10000 support of 1k is missing i guess

and transistion animation is not working above like of 999
well i know this part you have included in your code
but i think when 1k is not visible it shows 1002 it should show some transisition

[zmtzawqlp]

does it work for you about background?

   Container(
        child: LikeButton(),
        color: Colors.grey,
      );

999=>1k is support transistion animation,please take a look at first like button demo.

[VickySalunkhe]

Above code helps for the background thankyou

but that support for count > 999
followed your like button demo too.

[AlexV525]

We noticed that your issue can't tell the specific bug/issue of this package, so plz be more specific and track only one problem per issue, thanks.