like_button 0.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

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


and you can also define custom effects.

          size: buttonSize,
              CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
          bubblesColor: BubblesColor(
            dotPrimaryColor: Color(0xff33b5e5),
            dotSecondaryColor: Color(0xff0099cc),
          likeBuilder: (bool isLiked) {
            return Icon(
              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(
                style: TextStyle(color: color),
            } else
              result = Text(
                style: TextStyle(color: color),
            return result;

The time to send your request #

      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 #

sizesize of like widget30.0
animationDurationanimation duration to change isLiked stateconst Duration(milliseconds: 1000)
bubblesSizetotal size of bubblessize * 2.0
bubblesColorcolors of bubblesconst BubblesColor(dotPrimaryColor: const Color(0xFFFFC107),dotSecondaryColor: const Color(0xFFFF9800),dotThirdColor: const Color(0xFFFF5722),dotLastColor: const Color(0xFFF44336),)
circleSizefinal size of circlesize * 0.8
circleColorcolors of circleconst CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107)
onTaptap call back of like button,you can handle your request in this call back
isLikedwhether it is liked(if it's null, always show like animation and increase like count)false
likeCountif null, will not show)null
mainAxisAlignmentMainAxisAlignment for like
likeBuilderbuilder to create like widgetnull
countBuilderbuilder to create like count widgetnull
likeCountAnimationDurationanimation duration to change like countconst Duration(milliseconds: 500)
likeCountAnimationTypeanimation type to change like count(none,part,all)LikeCountAnimationType.part
likeCountPaddingpadding for like count widgetconst EdgeInsets.only(left: 3.0)
countPostiontop,right,bottom,left of like button widgetCountPostion.right
countDecorationdecoration of like count widgetnull

more detail

[0.2.0] #

  • Support Flutter Web
  • Add web demo

[0.1.9] #

  • Change postion to CountPostion, support top/bottom
  • Add CountDecoration to custom count widget

[0.1.8] #

  • Add padding parameter for LikeButton
  • Change bubbles' position to make them more clear.

[0.1.7] #

  • Feature: Add postion(left,right) support for like count widget

[0.1.6] #

  • Issue: fix likeCount/isLiked are not updated when rebuild.

[0.1.4] #

  • Support to always show like animation and increase like count by setting isLiked to null.

[0.1.3] #

  • Clip rect before padding(like count)

[0.1.2] #

  • Add OpacityAnimation for LikeCountAnimationType.part

[0.1.1] #

  • Update readme
  • Change dotSize to bubblesSize

[0.1.0] #

  • First Release


import 'package:example/pages/no_route.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'example_route.dart';
import 'example_route_helper.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
      builder: (c, w) {
        ScreenUtil.instance =
            ScreenUtil(width: 750, height: 1334, allowFontScaling: true)
        var data = MediaQuery.of(c);
        return MediaQuery(
          data: data.copyWith(textScaleFactor: 1.0),
          child: w,
      initialRoute: "fluttercandies://mainpage",
      onGenerateRoute: (RouteSettings settings) {
        var routeResult =
            getRouteResult(name:, arguments: settings.arguments);

        if (routeResult.showStatusBar != null ||
            routeResult.routeName != null) {
          settings = FFRouteSettings(
              arguments: settings.arguments,
              isInitialRoute: settings.isInitialRoute,
              routeName: routeResult.routeName,
              showStatusBar: routeResult.showStatusBar);

        var page = routeResult.widget ?? NoRoute();

        switch (routeResult.pageRouteType) {
          case PageRouteType.material:
            return MaterialPageRoute(settings: settings, builder: (c) => page);
          case PageRouteType.cupertino:
            return CupertinoPageRoute(settings: settings, builder: (c) => page);
          case PageRouteType.transparent:
            return FFTransparentPageRoute(
                settings: settings,
                pageBuilder: (BuildContext context, Animation<double> animation,
                        Animation<double> secondaryAnimation) =>
            return Theme.of(context).platform == TargetPlatform.iOS
                ? CupertinoPageRoute(settings: settings, builder: (c) => page)
                : MaterialPageRoute(settings: settings, builder: (c) => page);

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  like_button: ^0.2.0

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:like_button/like_button.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies