social_feed_reaction 是一个用于在 Flutter 应用中实现社交动态反应（如点赞、评论、分享等）的插件。它可以帮助开发者在应用中快速集成社交互动功能，类似于 Facebook 或 Instagram 的动态反应功能。

使用步骤

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 social_feed_reaction 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  social_feed_reaction: ^latest_version

然后运行 flutter pub get 以安装依赖。

2. 导入插件

在需要使用 social_feed_reaction 的 Dart 文件中导入插件：

import 'package:social_feed_reaction/social_feed_reaction.dart';

3. 使用 SocialFeedReaction 组件

SocialFeedReaction 是一个用于显示动态反应的组件。你可以将它嵌入到你的 UI 中，并根据需要自定义其外观和行为。

class MySocialFeed extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social Feed'),
      ),
      body: ListView(
        children: [
          SocialFeedReaction(
            postId: 'post_1', // 动态的唯一 ID
            reactions: [
              Reaction(
                emoji: '👍', // 表情符号
                count: 10, // 反应数量
                isSelected: false, // 是否被当前用户选择
              ),
              Reaction(
                emoji: '❤️',
                count: 5,
                isSelected: true,
              ),
              Reaction(
                emoji: '😂',
                count: 3,
                isSelected: false,
              ),
            ],
            onReactionSelected: (Reaction reaction) {
              // 当用户选择一个反应时触发
              print('Selected reaction: ${reaction.emoji}');
            },
          ),
          // 其他动态...
        ],
      ),
    );
  }
}

4. 自定义反应

你可以通过 reactions 参数自定义每个动态的反应。每个 Reaction 对象包含一个表情符号、反应数量以及是否被当前用户选择的标志。

5. 处理用户选择

当用户选择一个反应时，onReactionSelected 回调会被触发。你可以在这个回调中处理用户的反应，例如更新服务器上的反应数据或更新 UI。

onReactionSelected: (Reaction reaction) {
  // 处理用户选择的反应
  // 例如，更新服务器上的反应数据
  updateReactionOnServer(reaction);

  // 或者更新 UI
  setState(() {
    // 更新反应状态
  });
},

6. 自定义样式

你可以通过 SocialFeedReaction 的样式参数来自定义组件的外观，例如背景颜色、边框半径等。

SocialFeedReaction(
  postId: 'post_1',
  reactions: [...],
  onReactionSelected: (Reaction reaction) {...},
  backgroundColor: Colors.white,
  borderRadius: BorderRadius.circular(8.0),
  elevation: 2.0,
  padding: EdgeInsets.all(8.0),
);

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 social_feed_reaction 插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MySocialFeed(),
    );
  }
}

class MySocialFeed extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social Feed'),
      ),
      body: ListView(
        children: [
          SocialFeedReaction(
            postId: 'post_1',
            reactions: [
              Reaction(
                emoji: '👍',
                count: 10,
                isSelected: false,
              ),
              Reaction(
                emoji: '❤️',
                count: 5,
                isSelected: true,
              ),
              Reaction(
                emoji: '😂',
                count: 3,
                isSelected: false,
              ),
            ],
            onReactionSelected: (Reaction reaction) {
              print('Selected reaction: ${reaction.emoji}');
            },
          ),
          // 其他动态...
        ],
      ),
    );
  }
}