fz_reactions_chat - Dart API docs

🎬 fz_reactions_chat

A Flutter package for show Reaction Dialog Chat And Stack Widget.

📖 Table of Contents

Screenshots
Features
Getting Started
Usage
- fzReactionsChat
Example
Dependencies Used
About the Developer
License

🎥 Check out the video trimming in action!

Screens

Features

🚀 A Flutter package for show Reaction Dialog Chat And Stack Widget.

Getting Started

Add dependency: In your pubspec.yaml:

dependencies:
  fz_reactions_chat: ^0.0.1

Install Package In your project:

flutter pub get

Android Configuration: In your AndroidManifest.xml no Configuration Required:

in /android/app/build.gradle

minSdk = 24
// Prefered 
compileSdk = 34

iOS Configuration: In your iOS Info.plist, no Configuration Required:

Usage

Here’s a complete example showing how to build a custom Reaction Dialog Chat using the fz_reactions_chat package.

usage fzReactionsChat Reaction Dialog

fzReactionsChat.showReactionsDialog(
context: context,
isMe: true,
onContextMenuSelected: (context, massageId) {},
onEmojiSelected: (reaction, massageId) {},
setMassageReplyNull: () {},
onTapPreviewImage: (image) {},
onReplyScroll: (_) {},
replayText: "Replay",
copyText: "Copy",
deleteText: "Delete",
closeText: "Close",
myMassageContent: const Text("My Massage"),
receiveMassageContent: const Text("receive Massage"),
messageId: "5",
reactionSelectedByMy: "❤️",
);

fzReactionsChat Stack Reaction

  fzReactionsChat.stackReactions(
isMe: true,
isDialogReactions: true,
size: 20,
onPressed: () {},
allMessageReactions: {"❤️": 5},
messageReactionsByCountForEachReaction: {"❤️": 1},
),

Example

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

  final String title;

  @override
  State<ChatReactions> createState() => _ChatReactionsState();
}

class _ChatReactionsState extends State<ChatReactions> {
  FzReactionsChat fzReactionsChat = FzReactionsChat();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 50),
            TextButton(
              onPressed: () {
                fzReactionsChat.showReactionsDialog(
                  context: context,
                  isMe: true,
                  onContextMenuSelected: (context, massageId) {},
                  onEmojiSelected: (reaction, massageId) {},
                  setMassageReplyNull: () {},
                  onTapPreviewImage: (image) {},
                  onReplyScroll: (_) {},
                  replayText: "Replay",
                  copyText: "Copy",
                  deleteText: "Delete",
                  closeText: "Close",
                  myMassageContent: const Text("My Massage"),
                  receiveMassageContent: const Text("receive Massage"),
                  messageId: "5",
                  reactionSelectedByMy: "❤️",
                );
              },
              child: const Text("Show Reaction Dialog Chat"),
            ),
            const SizedBox(height: 200),
            SizedBox(
              width: 50,
              height: 50,
              child: Stack(
                alignment: Alignment.topCenter,
                children: [
                  Container(
                    width: 50,
                    height: 30,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.purple,
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    left: 5,
                    right: 0,
                    child: fzReactionsChat.stackReactions(
                      isMe: true,
                      isDialogReactions: true,
                      size: 20,
                      width: 50,
                      onPressed: () {},
                      allMessageReactions: {"❤️": 5},
                      messageReactionsByCountForEachReaction: {"❤️": 1},
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 50),
          ],
        ),
      ),
    );
  }
}

Example_Full_Code

You Can Find The Full Code Here

Dependencies Used

This package uses (You do not have to import them):

animate_do:

Before using this example directly in a Flutter app, don't forget to add the fz_reactions_chat packages to your pubspec.yaml file.
You can try out this example by replacing the entire content of main.dart file of a newly created
Flutter project.

About the Developer

Hello! 👋 I'm Fady Zaher, a Mid Level Flutter Developer with extensive experience in building high-quality mobile applications.

📧 Email: fedo.zaher@gmail.com

If you like this package, feel free to ⭐️ the repo and share it!

📝 License MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.