Search packages, repositories and app categories

like_button cover
Package detailsv2.1.0

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.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
32.2K
Likes
1.4K
Pub points
150

Install package

flutter pub add like_button

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

LikeButton is a Flutter package that provides an animated like button with effects reminiscent of Twitter's heart animation. It enables users to interact with content by liking it, featuring smooth animations and customizable styling. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, making it ideal for cross-platform social media apps. It integrates easily via pub.dev and offers options for customizing the icon, color, size, and animation behavior.

Use cases

  • Social media app interactions
  • Content liking features
  • User engagement tracking
  • Interactive UI elements
  • Real-time feedback mechanisms

Key features

  • Animated heart-like effect
  • Customizable icon and colors
  • Cross-platform compatibility
  • Easy integration with pub.dev
  • Support for tap and long-press gestures

Suitable for

  • Developers building social apps
  • UI designers seeking engaging buttons
  • Projects requiring user interaction feedback
  • Apps with content sharing or rating systems
  • Flutter beginners exploring animation

Considerations

  • May require additional state management
  • Animation performance on low-end devices
  • Limited customization beyond basic styling
  • Depends on external dependencies for full functionality
  • Not optimized for high-frequency use cases

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

like_button

pub package GitHub stars GitHub forks GitHub license GitHub issues FlutterCandies QQ 群

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
postFrameCallback call back of first frame with LikeButtonState null

Categories

Source repository

Projects using this package