Flutter点赞功能插件easy_like的使用

Flutter点赞功能插件easy_like的使用

easy_like 插件提供了在应用中实现点赞功能的一种简单而高效的方式。它可以应用于用户资料、上传的照片、帖子和评论等多种实体。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  easy_like: ^版本号

然后运行 flutter pub get 命令来安装该包。

安全规则

在数据库的安全规则中，确保 likes 字段可以被任何人写入：

{
  "rules": {
    "likes": {
      ".write": "true"
    }
  }
}

术语

• vote 是执行点赞或取消点赞的动作。
• like document 是 /likes 集合下的文档。
• target document 是点赞所指向的原始文档，例如用户文档、帖子文档、评论文档等。

数据库结构

• /likes/{documentId}: 这里保存了点赞信息。文档ID即为目标文档ID。
• documentReference: 该字段是目标文档的引用，因此无论任何集合都可以访问目标文档。
• likedBy: 该字段是进行过点赞的用户UID列表。如果用户取消点赞，则UID将从该字段移除。
• likeCount: 该字段是点赞数量，可用于搜索目的。

注意，like document ID 与目标文档ID相同。

逻辑

• 使用事务来增加或减少点赞数。
• 每当点赞状态发生变化时，必须更新原始文档中的 likeCount 字段。
• 当用户取消点赞（或再次点赞）时，点赞数量会相应地减少。

显示点赞数量

由于 likeCount 字段保存在文档中，可以直接通过文档显示点赞数量。easy_like 包不提供任何小部件用于显示点赞数量。

以下是如何在帖子详情页面上显示 likeCount 的示例。注意，帖子详情页面应监听数据库更新。

TextButton(
  onPressed: () async {
    final like = Like(uid: my.uid, documentReference: widget.post.ref);
    await like.like();
  },
  child: Text(
    '点赞'.tr(args: {'n': widget.post.likeCount}, form: widget.post.likeCount),
  ),
),

更改图标根据点赞状态

你可以根据点赞状态（点赞或取消点赞）显示不同的小部件。

IconButton(
  onPressed: () async {
    final like = Like(documentReference: post.ref);
    await like.like();
  },
  icon: LikeDoc(
    uid: my.uid,
    documentReference: post.ref,
    sync: true,
    builder: (islike) {
      return FaIcon(
        islike
            ? FontAwesomeIcons.solidHeart
            : FontAwesomeIcons.heart,
        color: Colors.pink[700],
        size: 30,
      );
    },
  ),
)

onLiked 回调

onLiked 是在点赞或取消点赞操作触发后的一个回调函数。可以在其中发送推送通知给其他用户。

以下示例展示了如何在点赞触发后向帖子所有者发送推送通知。它包含了 Like 信息和 isLiked 信息，表示是否已点赞。

LikeService.instance.init(
  onLiked: ({required Like like, required bool isLiked}) async {
    /// 只有在点赞时才发送通知
    if (isLiked == false) return;

    /// 获取点赞文档引用以获取更多信息
    /// 然后根据文档引用决定通知应发送到哪里
    /// 设置推送通知，例如向帖子点赞发送推送通知
    if (like.documentReference.toString().contains('posts/')) {
      Post post = await Post.get(like.documentReference.id);

      /// 如果帖子所有者是登录用户，则不发送通知
      if (post.uid == myUid) return;

      /// 可以根据文档引用获取更多详细信息
      /// 可以在推送通知中提供更多细节
      MessagingService.instance.sendMessageToUids(
        uids: [post.uid],
        title: '你的帖子获得了点赞',
        body: '${my.displayName} 点赞了 ${post.title}',
        data: {
          "action": 'like',
          "source": 'post',
          'postId': post.id,
          'documentReference': like.documentReference.toString(),
        },
      );
    }
  },
);

示例代码

以下是完整的示例代码，展示如何在 Flutter 应用中使用 easy_like 插件。

import 'package:easy_like/easy_like.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            StreamBuilder(
                stream: FirebaseAuth.instance.authStateChanges(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator();
                  }
                  if (snapshot.hasError) {
                    return Text(snapshot.error.toString());
                  }
                  if (snapshot.hasData) {
                    return Text('用户已登录: ${snapshot.data?.uid}');
                  }
                  return const Text('用户未登录');
                }),
            ElevatedButton(
              onPressed: () {
                FirebaseAuth.instance.signInAnonymously();
              },
              child: const Text('匿名登录'),
            ),
            ElevatedButton(
              onPressed: () {
                LikeTestService.instance.runTests();
              },
              child: const Text('测试点赞功能'),
            ),
          ],
        ),
      ),
    );
  }
}