flutter_chat_reactions #

flutter_chat_reactions Enhance your Flutter chat with expressive reactions. Need a simple and powerful way to add customizable message reactions to your Flutter chat app? Look no further than flutter_chat_reactions!

Liked some of my work? Buy me a coffee. Thanks for your support ❤️

[Demo 1] [Demo 2]

Features #

• Reaction Dialog: Upon long-pressing the chat widget, a user-friendly dialog appears, offering a range of expressive reactions.
• Compact Layout: The reactions are presented in a clean column layout, with the first child being a row containing six default reactions. A convenient '+' sign allows users to access an extended emoji container for even more reaction options.
• Context Menu: Below the message widget, users can access a context menu, adding depth to the interaction within the chat application.
• customizable Widgets: Reactions and Context Menu can be customized.

Getting started #

Add dependency to pubspec.yaml

dependencies:
  flutter_chat_reactions: <latest-version>

In your dart file, import the library:

import 'package:flutter_chat_reactions/flutter_chat_reactions.dart';

Usage #

1. First wrap your Widget with a Hero Widget:

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

2. Wrap your Hero Widget with a GestureDetector or Inkwell Widget:

    GestureDetector(
                      // wrap your message widget with a [GestureDectector] or [InkWell]
                      onLongPress: () {
                        // navigate with a custom [HeroDialogRoute] to [ReactionsDialogWidget]
                      },
                      // wrap message with [Hero] widget
                      child: Hero(
                        tag: message.id,
                        child: MessageWidget(message: message),
                      ),
                    );

3. OnLonPress navigate with HeroDialogRoute to ReactionsDialogWidget See example for more:

    GestureDetector(
                      // wrap your message widget with a [GestureDectector] or [InkWell]
                      onLongPress: () {
                        // navigate with a custom [HeroDialogRoute] to [ReactionsDialogWidget]
                        Navigator.of(context).push(
                          HeroDialogRoute(
                            builder: (context) {
                              return ReactionsDialogWidget(
                                id: message.id, // unique id for message
                                messageWidget: MyMessage(message: message), // message widget
                                onReactionTap: (reaction) {
                                  print('reaction: $reaction');

                                  if (reaction == '➕') {
                                    // show emoji picker container
                                  } else {
                                    // add reaction to message
                                  }
                                },
                                onContextMenuTap: (menuItem) {
                                  print('menu item: $menuItem');
                                  // handle context menu item
                                },
                              );
                            },
                          ),
                        );
                      },
                      // wrap message with [Hero] widget
                      child: Hero(
                        tag: message.id,
                        child: MessageWidget(message: message),
                      ),
                    );

Parameters: #

Contributions #

All contributions are welcome!