Flutter自定义点赞按钮插件custom_like_button的使用

custom_like_button 是一个用于实现点赞和取消点赞功能的 Flutter 插件。它支持动画效果和颜色变化。✨

通过这个插件，你可以使用自定义图标或任何自定义小部件（无状态或有状态）来实现点赞功能。

非常平滑的动画效果，支持 Android、iOS、Web 应用和桌面应用。

使用场景

我们构建这个插件的原因是：

• 希望拥有带有翻转动画的自定义图标。
• 能够改变图标的颜色和大小。

即将推出的功能

• 提供对资产图像（SVG、PNG）和 Material 图标的支持，并添加新的更新。
• 支持自定义动画持续时间。

安装

首先，创建一个新的 Flutter 项目：

flutter create MyApp

然后，在你的 pubspec.yaml 文件中添加依赖项：

dependencies:
  custom_like_button: ^x.y.z

或者在项目的根目录下运行以下命令：

flutter pub add custom_like_button

在你的库文件中添加以下导入语句：

import 'package:custom_like_button/custom_like_button.dart';

使用

下面是一个简单的示例，展示了如何使用 CustomLikeButton 组件。

import 'package:flutter/material.dart';
import 'package:custom_like_button/custom_like_button.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("点赞按钮示例"),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(height: 20),
                CustomLikeButton(
                  likeCount: 50,
                  size: 50,
                  isLiked: false,
                  likeBuilder: (bool isLiked) {
                    return Icon(
                      isLiked ? Icons.favorite : Icons.favorite_border,
                      color: Colors.red,
                      size: 50,
                    );
                  },
                  onTap: () {
                    print('点赞');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

构造函数参数说明

完整示例

下面是一个完整的示例代码，展示了如何在 Flutter 中使用 CustomLikeButton 插件。

import 'package:flutter/material.dart';
import 'package:custom_like_button/custom_like_button.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("点赞按钮示例"),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(height: 20),
                CustomLikeButton(
                  likeCount: 50,
                  size: 50,
                  isLiked: false,
                  likeBuilder: (bool isLiked) {
                    return Icon(
                      isLiked ? Icons.favorite : Icons.favorite_border,
                      color: Colors.red,
                      size: 50,
                    );
                  },
                  onTap: () {
                    print('点赞');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}