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.

Last update: Jun 20, 2022

like_button

pub package GitHub stars GitHub forks GitHub license GitHub issues flutter-candies

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

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

GitHub

https://github.com/fluttercandies/like_button
Comments
  • 1. 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

    WhatsApp Image 2019-10-09 at 4 18 23 PM

    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

    Reviewed by VickySalunkhe at 2019-10-09 10:54
  • 2. 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'],

    Reviewed by mohammadne at 2019-11-29 22:45
  • 3. 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 :)

    Reviewed by AteqEjaz at 2020-02-12 20:23
  • 4. 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

    Reviewed by tanzmeier at 2021-02-18 14:59
  • 5. 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

    Reviewed by jakthegr8 at 2020-04-01 06:10
  • 6. 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.

    Reviewed by ch3ckmat3 at 2019-06-08 19:38
  • 7. 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;
                              },
                            ),
    
    Reviewed by febryardiansyah at 2020-09-03 09:33
  • 8. 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)
    
    Reviewed by xiongdi9456 at 2020-05-30 15:28
  • 9. 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),
                ),
              ],
            );
          },
    
    Reviewed by rupertbulquerin at 2020-05-04 21:32
  • 10. Fix Number reversed when using RTL localization.

    :information_source: Number always writen from Left to Right it does not matter if the text direction is RTL or LTR.

    :bug: Bug:

    • when using a RTL localization the number appears reversed, for example if you have count=24 It Will appear as 42 and when you press the button it will go to 52 .

    :dart: Reason:

    • When using an Arabic Localization for examples, Flutter will automatically reverse Row items so the first item will be the last.

    :gear: Fix:

    • To fix this you need to force the row of numbers to use LTR by adding Directionality
    Reviewed by Danzo7 at 2021-11-25 22:49
  • 11. 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

    Reviewed by armandojimenez at 2021-03-23 05:09
  • 12. 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

    Reviewed by NaNostyle at 2022-04-18 17:46
  • 13. 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)

    Reviewed by emil45 at 2022-03-10 02:37
  • 14. 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:

    image

    Any chance to fix this?

    Thanks in advance!

    Reviewed by teceP at 2021-12-20 17:34
  • 15. 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;
                        },
                      ),
                    ],
                  ))
                ],
              ),
            )
    
    
    Reviewed by supidupicoder at 2021-08-16 09:10
  • 16. 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?

    Reviewed by dalton5 at 2021-07-09 08:40

Related

3d Drawer Animated && Made with algeria heart
3d Drawer Animated && Made with algeria heart

Cool 3D Drawer Animated With flutter part 1 ?? ?? Getting Started # You need to import this in our file import 'dart:math'; import 'package:flutter/m

Nov 4, 2021
Progress State Button - A customizable progress button for Flutter
Progress State Button - A customizable progress button for Flutter

Progress State Button - A customizable progress button for Flutter

Jun 17, 2022
A flutter package which contains a collection of some cool and beautiful effects; support android and ios
A flutter package which contains a collection of some cool and beautiful effects; support android and ios

flutter effects A flutter package which contains a collection of some cool and beautiful effects; support android and ios . Screenshot type support ch

Jun 21, 2022
Flutter animation tutorials, such common animation, flare animation.
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Jun 17, 2022
Flutter animation tutorials, such common animation, flare animation.
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

May 2, 2022
A sample for having PageView transformation effects in Flutter.
A sample for having PageView transformation effects in Flutter.

What is it? The end result looks a little something like this: Sample project for creating nice looking PageView parallax effects in Flutter. Read the

Jun 24, 2022
Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Lottie for Flutter Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and rende

Jun 28, 2022
Render After Effects animations natively on Flutter
Render After Effects animations natively on Flutter

Draw Lottie files on a Flutter Widget

Mar 10, 2022
This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts.
 This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts.

This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts. Installing 1. Depend on it Add th

Nov 25, 2020
Add particle effects to anything.
Add particle effects to anything.

Showcase Features Highly customizable (Don't like my particle effects? Make your own with little effort!) Very easy to use A lot of premade particles

May 28, 2022
Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Apr 16, 2021
Create powerful animations in Flutter and use the hero animation for complex animations
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚡  Social Media  Twit

Dec 11, 2021
Create your own custom SlideTransition combined with some animation in Flutter.
Create your own custom SlideTransition combined with some animation in Flutter.

Create your own custom SlideTransition combined with some animation in Flutter.

Mar 20, 2022
Arisslidetransition - Create your own custom SlideTransition combined with some animation in Flutter
Arisslidetransition - Create your own custom SlideTransition combined with some animation in Flutter

SlideTransition Animation - Flutter Create your own custom SlideTransition combi

Jan 9, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Jun 21, 2022
Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs.
Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs.

Flutter DropdownButton2 Intro Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs. Featur

Jun 23, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Apr 3, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Apr 3, 2022
Nubank card animation - Nubank card animation built with flutter
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Jun 18, 2022