Flutter聊天反应插件flutter_chat_reactions的使用

flutter_chat_reactions 是一个用于增强Flutter聊天应用的插件，它允许用户通过长按消息来添加各种表情反应。以下是该插件的主要功能、使用方法以及一个完整的示例demo。

功能特性

• Reaction Dialog: 长按聊天窗口中的消息后，会弹出一个用户友好的对话框，提供一系列表达情感的表情。
• Compact Layout: 表情以整洁的列布局呈现，第一行包含六个默认表情，用户可以通过“+”号访问更多表情选项。
• Context Menu: 在消息下方提供上下文菜单，增加聊天应用内的交互深度。
• Customizable Widgets: 可自定义反应和上下文菜单。

开始使用

添加依赖

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

dependencies:
  flutter_chat_reactions: ^latest_version # 替换为最新版本号

然后在 Dart 文件中导入库：

import 'package:flutter_chat_reactions/flutter_chat_reactions.dart';

使用步骤

1. 将消息组件包裹在一个 Hero 组件中，以便实现平滑过渡效果。

   Hero(tag: message.id, child: MessageWidget(message: message),)
   

2. 使用 GestureDetector 或 InkWell 包裹 Hero 组件，并设置 onLongPress 回调函数。

   GestureDetector(
     onLongPress: () {
       // 触发长按事件
     },
     child: Hero(
       tag: message.id,
       child: MessageWidget(message: message),
     ),
   );
   

3. 在 onLongPress 回调函数中，通过 HeroDialogRoute 导航到 ReactionsDialogWidget。

   Navigator.of(context).push(
     HeroDialogRoute(
       builder: (context) {
         return ReactionsDialogWidget(
           id: message.id,
           messageWidget: MessageWidget(message: message),
           onReactionTap: (reaction) {
             print('reaction: $reaction');
             
             if (reaction == '➕') {
               // 显示更多表情选择器
             } else {
               // 添加表情到消息
             }
           },
           onContextMenuTap: (menuItem) {
             print('menu item: $menuItem');
             // 处理上下文菜单项
           },
         );
       },
     ),
   );
   

4. 在消息组件中加入 StackedReactions 组件以显示已有的表情反应。

   Stack(
     children: [
       buildMessage(context),
       Positioned(
         bottom: 4,
         right: 20,
         child: StackedReactions(
           reactions: message.reactions,
           stackedValue: 4.0,
         ),
       ),
     ],
   )
   

示例代码

以下是一个完整的示例demo，展示了如何集成 flutter_chat_reactions 插件到您的Flutter项目中：

import 'package:flutter/material.dart';
import 'package:flutter_chat_reactions/flutter_chat_reactions.dart';
import 'package:flutter_chat_reactions/utilities/hero_dialog_route.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chat Reactions Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  List<Message> messages = [
    Message(id: '1', content: 'Hello!', isMe: false, reactions: []),
    Message(id: '2', content: 'Hi there!', isMe: true, reactions: ['👍']),
    // 更多消息...
  ];

  void showEmojiBottomSheet({required Message message}) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return SizedBox(
          height: 310,
          child: EmojiPicker(
            onEmojiSelected: ((category, emoji) {
              Navigator.pop(context);
              addReactionToMessage(
                message: message,
                reaction: emoji.emoji,
              );
            }),
          ),
        );
      },
    );
  }

  void addReactionToMessage({required Message message, required String reaction}) {
    setState(() {
      message.reactions.add(reaction);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: messages.length,
              itemBuilder: (context, index) {
                final message = messages[index];
                return GestureDetector(
                  onLongPress: () {
                    Navigator.of(context).push(
                      HeroDialogRoute(
                        builder: (context) {
                          return ReactionsDialogWidget(
                            id: message.id,
                            messageWidget: MessageWidget(message: message),
                            onReactionTap: (reaction) {
                              print('reaction: $reaction');

                              if (reaction == '➕') {
                                showEmojiBottomSheet(message: message);
                              } else {
                                addReactionToMessage(
                                  message: message,
                                  reaction: reaction,
                                );
                              }
                            },
                            onContextMenuTap: (menuItem) {
                              print('menu item: $menuItem');
                            },
                            widgetAlignment: message.isMe
                                ? Alignment.centerRight
                                : Alignment.centerLeft,
                          );
                        },
                      ),
                    );
                  },
                  child: Hero(
                    tag: message.id,
                    child: MessageWidget(message: message),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 8.0),
            child: BottomChatField(),
          ),
        ],
      ),
    );
  }
}

class Message {
  final String id;
  final String content;
  final bool isMe;
  List<String> reactions;

  Message({
    required this.id,
    required this.content,
    required this.isMe,
    this.reactions = const [],
  });

  static List<Message> messages = [
    Message(id: '1', content: 'Hello!', isMe: false),
    Message(id: '2', content: 'Hi there!', isMe: true, reactions: ['👍']),
    // 更多消息...
  ];
}

class MessageWidget extends StatelessWidget {
  final Message message;

  MessageWidget({required this.message});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          padding: EdgeInsets.all(8.0),
          margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
          decoration: BoxDecoration(
            color: message.isMe ? Colors.blue : Colors.grey[300],
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: Text(message.content),
        ),
        Positioned(
          bottom: 4,
          right: message.isMe ? null : 20,
          left: message.isMe ? 20 : null,
          child: StackedReactions(
            reactions: message.reactions,
            stackedValue: 4.0,
          ),
        ),
      ],
    );
  }
}

class BottomChatField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: TextField(
            decoration: InputDecoration(
              hintText: 'Type a message...',
              border: OutlineInputBorder(),
            ),
          ),
        ),
        IconButton(
          icon: Icon(Icons.send),
          onPressed: () {},
        ),
      ],
    );
  }
}

这个示例展示了一个简单的聊天界面，其中包含了消息列表、发送消息输入框以及对每条消息进行表情反应的功能。希望这对您有所帮助！