geekabdelouahed / flutter-reaction-button

Flutter Reaction Button is a customizable Flutter package that allows you to easily create interactive buttons with reaction emojis, similar to Facebook's iconic reaction buttons.

Flutter reaction button

Flutter Reaction Button is a customizable Flutter package that allows you to easily create interactive buttons with reaction emojis, similar to Facebook's iconic reaction buttons.

Screenshot

Installation

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_reaction_button: <last-version>

Usage

import 'package:flutter_reaction_button/flutter_reaction_button.dart';

ReactionButton<String>(
    onReactionChanged: (Reaction<String>? reaction) {
        debugPrint('Selected value: ${reaction?.value}');
    },
    reactions: <Reaction<String>>[
        Reaction<String>(
            value: 'like',
            icon: widget,
        ),
        Reaction<String>(
            value: 'love',
            icon: widget,
        ),
        ...
    ],
    initialReaction: Reaction<String>(
        value: 'like',
        icon: widget,
    ),
    selectedReaction: Reaction<String>(
        value: 'like_fill',
        icon: widget,
    ),
)

License

MIT License

Copyright (c) 2023 Abdelouahed Medjoudja

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.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

flutter-reaction-button's Issues

iOS Screen move left

I'm trying to implement the buttons in my project but when I'm using it (just on iOS, on Android works great), the whole screen move left and create a black corner as you can see on the screenshot.

Is there something that I could do to fix it?

Relative position for ReactionBar

Hi

I really like this package, but for my use case, the global positioning of the reaction bar is a problem.
In my App i have multiple items scattered across the screen. For example, i have an item displayed in the bottom half of the screen on the right side and another one on the left side. I want the reaction bar to popup above this items. Currently when i do that, the reaction bar displays above the items, but in the center of the screen. Is there a way to display the reaction bar relative to the widget that contains the FlutterReactionButton?

Thank you!

Is it possible to display the text above the icon?

Data Persistent

There is a bug where when changing screens (in my case, a PageView), the reaction button states reverts back to default.

Removal of ID is a breaking change

Hello,

first of all, thank you very much for this great package.
Unfortunately, the removal of the ID was a breaking change for me which causes a lot of problems in my app. Can you please add an optional ID field again?

Thank you!

[Request] Popup position align with the button

Hi @GeekAbdelouahed ,

The popup is always at the center, it is pretty weird to see if we have short reaction items. Can we have an option to align it next the the button?

Thanks in advance.

Programmatically set state the reactions

How to set the reactions programmatically?

Typo in doc | Missing id in Reaction widget

Hi there,

In the example of FlutterReactionButtonCheck, you include an array of Reaction widgets. Each one of these components misses the id attribute, which is mandatory. What value should we give to this field?

Happy New Year!

Add callback support when reactions are shown

Hi! Thanks for a great library!

I would like to have haptic feedback when the reactions box is shown (just like fb messenger). Maybe haptic support can be added as a feature or a callback can be added when the reactions overlay is shown so it can be added manually.

problem value in rtl ?

Hi
When changing the direction of the application according to the language - Arabic, for example. The reaction value becomes the opposite

FlutterReactionButtonCheck | buildWidgetPreview & buildWidget methods not provided

Hi there,

At the example of the FlutterReactionButtonCheck component, these methods don't exist. Also, they aren't mentioned in the documentation.

I guess the "buildWidget" method should return a Icon or an Image but I'm not sure.

Awesome component!!!!💓💓💓💓💓💓💓

reaction disappeared if I scrolled down and returned.

I use this button in the posts widget in social apps like Facebook.
When I scroll down to show other posts the reaction is disappeared

Top Position isn't on top of ReactionButton

Hello,

I've got another issue. The reaction bar is not displayed on top of the reaction button, but there is little spacing between.

Can you add more custom positioning attributes? This would help me and maybe #13.

Thank you!

Pos of reaction-button is wrong on iPad

In the image I am using the Like on the far right column. Same thing happens if in the far left column - the button always shows in the center

Here's my code:

 Builder(
                    builder: (BuildContext c) {
                      return FlutterReactionButtonCheck(
                        key: Key('reaction-${widget.story['id']}'),
                        onReactionChanged: (reaction, isChecked) async {
reactions: react.reactions,
                        initialReaction: widget.story['reactions'].length == 1
                            ? react.reactions[reactionTypes
                                .indexOf(widget.story['reactions'][0]['type'])]
                            : react.defaultInitialReaction,
                        selectedReaction: react.defaultInitialReaction,
                      );
                    },
                  ),
....

Ripple Effect on tap

Use Inkwell instead of GestureDetector

Swipe gesture for reaction?

Could implement the swipe gesture to choose reaction? Like hold to swipe and choose between reaction?

Any option to 'Wrap' the reactions items to avoid screen overflow ?

Is there a way to wrap the items to avoid screen overflows ?

Conflict with TextFormField autofocus: true, keyboard keep shown every set or dismiss reaction

The problem is when TextFormField has autofocus: true in same screen has ReactionButtonToggle, when select and reaction (or dismiss reaction box), keyboard shown

[Question] How to update selected reaction programmatically

Assume I have 2 pages (Page A and B)

Page A have list of posts that contain a single FlutterReactionButtonCheck.
Page B have a single FlutterReactionButtonCheck

My scenario is when I go to Page B and update reaction from index 1 to 2. When I come back to Page A. I wanted update a FlutterReactionButtonCheck reaction.

What I have done is send callback function from Page A to Page B. Whenever the reaction changed i will call a callbackfunction to setState of a reaction in PageA. But it still not update.

This is a call back function in Page A

updateReaction(int newReaction) {
    print('update new reaction to: $newReaction');
    setState(() {
      this.userReaction = newReaction;
    });
}

This is a FlutterReactionButtonCheck setup in Page A.

FlutterReactionButtonCheck(
              onReactionChanged: (reaction, isChecked) async {
             ....
  },
  reactions: this.reactions,
  isChecked: this.userReaction == null ? false : true,
  initialReaction: GurubookReaction.defaultInitialReaction,
  selectedReaction: this.userReaction != null
  ? this.reactions[this.userReaction - 1]
  : this.reactions[0],
),

In page B whenever onReactionChanged called will trigger updateReaction(reactions.id)

Thanks in advance.

Reaction box is showing off the screen.

Great package.

I have added this package as my reaction button but sometimes it starts from the left and goes off the screen. I have tested it multiple times.
Not see any exception in the console as well. I am attaching an image below

Take look.

[QUESTION] How to close popover menu programmatically?

Hi,

I want to close the popover reaction menu manually without user clicking outside the box, is there any possible way to achieve this?

Thanks in Advance

onReactionChanged should use id and not an index

each reaction should contain id value and onReactionChanged should print it for better programming

ReactionsBox keep showing when scroll

When you scroll App, ReactionsBox showing when scroll if scroll start from reaction button...

I think ReactionsBox should called only with long press on screen, not when onPointerDown ...

Remove reaction not working

Hi, When i set the FlutterReactionButtonCheck intiialReaction as "In Love", When i click again it should remove the reaction instead it adds "Happy' reaction. Can you please help me on this. Thanks in advance

[Question] Can this be an alternative to popup menu?

Hi @GeekAbdelouahed ,

This is a very cool package.
I am thinking to use this as popup menu, hence, is there a way not to change the button to the selected reaction?
Besides, it would be nice to have a enabled/disabled to the reaction item.

Thanks in advance.

Please provide better descriptions - confusing how to unset pervious state

what is isChecked param? Why do I need it?
what is initialReaction param?
what is selectedReaction param?

How are they used together?

How do I set an initial value from the db?
How do I unset the value? What tells me that the user deselected?

Also, on onReactionChanged: (reaction, isChecked) the param isChecked never has a value.

Change title background color

Hi I was looking at the src and noticed that the background on the title is transparent, are you going to extend the code base to support different title back ground colors and shapes?

Change emoji in reaction button according to the value of another clicked reaction button in a listviewbuilder

I have a listViewBuilder inside of which I dynamically display a mission name and a reaction button in every list item like so :

ListView.builder(

                                itemCount: result.data['allSheets']['timesheets'].length,


                                itemBuilder: (BuildContext context, int index){

                                 var sheets = result.data['allSheets']['timesheets'];

                                 var length = result.data['allSheets']['timesheets'].length;
                                  missionName = timesheet.missionName = result.data['allSheets']['mission']['name'];
                                 missionid = timesheet.missionName = result.data['allSheets']['mission']['id'];
                                 print (missionid);
                                  entries = timesheet.entries = result.data['allSheets']['timesheets'][index]['entriesTimeSheet'];
                                 box.write('missionName', missionName);
                                 box.write('entries', entries);
                                 box.write ('length',length);
                                 print(entries);
                                 int len = box.read ('length');
                                 var ind ;
                                 var ini;

                                 String ent= box.read('entries');

                                 print(len);

                                // box.put('missionName', missionName);
                                 //box.put("entries",entries);

                                 //var name = box.get('missionName');

                                 //print('Name: $name');


                                  return Card(
                                    child:Center(
                                      child: Container(
                                        height: 70,
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                          children: <Widget>[
                                            Expanded(child: Text(result.data['allSheets']['mission']['name'])),
                                            SizedBox(width: 30),


                                            FlutterReactionButton(




                                              onReactionChanged: (reaction, index) {

                                                print('reaction selected index: $index');



                                                for (var i = 0; i < result.data['allSheets']['timesheets'].length; i++)
                                                  print (i);
                                                switch (index) {
                                                  case 0:
                                                    for (var j= i+1; j< result.data['allSheets']['timesheets'].length; j++){
                                                      print(j);

                                                      onReactionChanged: (reaction, index){
                                                        index = 0;
                                                      };

                                                    }

                                                    break;
                                                  case 1:

                                                    for (var j= i+1; j< result.data['allSheets']['timesheets'].length; j++){
                                                      index = 1;
                                                    }

                                                    break;
                                                  case 2:

                                                    for (var j= i+1; j< result.data['allSheets']['timesheets'].length; j++){
                                                      index = 2;
                                                    }

                                                    break;
                                                  case 3:

                                                    for (var j= i+1; j< result.data['allSheets']['timesheets'].length; j++){
                                                      index = 3;
                                                    }


                                                    break;

                                                  default:
                                                    entries = timesheet.entries = result.data['allSheets']['timesheets'][index]['entriesTimeSheet'] ;
                                                }











                                                switch (index) {
                                                  case 0:
                                                    entries = "OFF";
                                                    box.write('entries', entries);
                                                    break;
                                                  case 1:
                                                    entries = "NOWORK";
                                                    box.write('entries', entries);
                                                    break;
                                                  case 2:
                                                    entries = "FULLDAY";
                                                    box.write('entries', entries);
                                                    break;
                                                  case 3:
                                                    entries = "HALFDAY";
                                                    box.write('entries', entries);
                                                    break;

                                                  default:
                                                    entries = timesheet.entries = result.data['allSheets']['timesheets'][index]['entriesTimeSheet'] ;
                                                }
                                                print(entries);
                                              },
                                              reactions: <Reaction>[
                                                Reaction(
                                                    icon: Image.asset(
                                                      "assets/icons/close.png",
                                                      height: 50,
                                                      width: 50,
                                                    )),
                                                Reaction(
                                                    icon: Image.asset(
                                                      "assets/icons/nowork.png",
                                                      height: 50,
                                                      width: 50,
                                                    )),
                                                Reaction(
                                                    icon: Image.asset(
                                                      "assets/icons/sunny.png",
                                                      height: 50,
                                                      width: 50,
                                                    )),

                                                Reaction(
                                                    icon: Image.asset(
                                                      "assets/icons/sunrise.png",
                                                      height: 50,
                                                      width: 50,
                                                    )),

                                              ],

                                              initialReaction: Reaction(

                                                icon: Row(
                                                  children: [
                                                    ConditionalBuilder(
                                                      condition: result.data['allSheets']['timesheets'][index]['entriesTimeSheet'] == "HALFDAY",
                                                      builder: (context){
                                                        return Image.asset(
                                                          "assets/icons/sunrise.png",
                                                          height: 50,
                                                          width: 50,
                                                        );
                                                      },

                                                    ),
                                                    ConditionalBuilder(
                                                      condition: result.data['allSheets']['timesheets'][index]['entriesTimeSheet'] == "OFF",
                                                      builder: (context){
                                                        return Image.asset(
                                                          "assets/icons/close.png",
                                                          height: 50,
                                                          width: 50,
                                                        );
                                                      },

                                                    ),
                                                    ConditionalBuilder(
                                                      condition: result.data['allSheets']['timesheets'][index]['entriesTimeSheet'] == "FULLDAY",
                                                      builder: (context){
                                                        return Image.asset(
                                                          "assets/icons/sunny.png",
                                                          height: 50,
                                                          width: 50,
                                                        );
                                                      },

                                                    ),

                                                  ],

                                                ),


                                              ),

                                            )

                                          ],
                                        ),
                                      ),
                                    ),
                                  );

                                }

                            ),

In the picture I attached , you can see the page . I want to change the value of each button according to the other clicked button , example , if I click on the first reaction button and I choose the sunny emoji , the second button's default emoji takes the x emoji , and vice versa didn't know how to do it I tried a switch case inside a for loop but it didn't work . If anyone can help I'd be grateful .

Reactions Are Never Turned Off

When I try to remove a reaction that I already selected it just sets it to the first reaction. Checking if isChecked always returns true.

 FlutterReactionButtonCheck(
          onReactionChanged: (reaction, index, isChecked) {
            print('click: $index');
            if (isChecked) {
              print(isChecked);
              if (!_likeExists(widget.post!.likeReactions)) {
                setState(() {
                  selectedReation = reaction;
                  widget.streamClient!.reactions.add('like', widget.post!.id!,
                      userId: widget.streamClient!.currentUser!.userId,
                      data: {
                        'value': index,
                      });
                  widget.post!.likesCount = widget.post!.likesCount! + 1;
                  StreamAPI().sendLikeNotificationPost(
                      widget.streamClient!,
                      widget.streamClient!.currentUser!.userId,
                      widget.post!.owner,
                      widget.post!.id,
                      index);
                });
              } else if (_likeExists(widget.post!.likeReactions)) {
                setState(() {
                  selectedReation = reaction;
                  widget.streamClient!.reactions.update(like.likeId!, data: {
                    'value': index,
                  });
                });
              }
            } else {
              if (_likeExists(widget.post!.likeReactions)) {
                setState(() {
                  selectedReation = reaction;
                  widget.streamClient!.reactions.delete(like.likeId!);
                  widget.post!.likesCount = widget.post!.likesCount! - 1;
                });
              }
            }
          },
          isChecked: selectedReation != null ? true : false,
          reactions: SNAB().reactions,
          initialReaction: _likeExists(widget.post!.likeReactions)
              ? SNAB().reactions[like.value!]
              : Reaction(
                  id: 7,
                  icon: Image.asset(
                    'assets/images/100.png',
                    height: 20,
                    color: Colors.grey[600],
                  )),
          selectedReaction: selectedReation,
        ),

how to remove reaction or how to deselect reaction?

Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.

Showing this warning when running on Flutter 3

: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
../…/ui/widget_size_render_object.dart:36
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../Development/flutter/packages/flutter/lib/src/widgets/binding.dart').
package:flutter/…/widgets/binding.dart:1
        WidgetsBinding.instance?.addPostFrameCallback((_) {

✨ add offset parameter for box placement

[Guide] to run the `/example` project with Flutter 3.19.1

I got some gradle-related errors when trying to run the project with Flutter 3.19.1 on Android, here is how to fix them:

In the android/build.gradle file, change the android build tools dependency to:

classpath 'com.android.tools.build:gradle:7.4.1'

In the android/gradle/wrapper/gradle-wrapper.properties file, change the distributionUrl to:

distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-all.zip

Please include these in a future release.

Icons size too big when clicking the button

Go to the reactions popup without taking your finger off the screen

Currently, this plugin displays the reactions popup through the long press and the user needs to take their finger off the screen and select the reaction or drag their finger between the reactions. There is an option to use the long press to display the reactions popup and drag your finger to this popup without having to take your finger off the screen as occurs in the LinkedIn App with both options.

Is it ok to use facebook assets?

Maybe do you know if the images you are presenting on your example has a license to use it?

Flutter 3.0.0 is detecting issue with the library

`../../../Documents/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_reaction_button-2.0.0+2/lib/src/ui/w
idget_size_render_object.dart:19:24: Warning: Operand of null-aware operation '?.' has type
'WidgetsBinding' which excludes null.

• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart'
  ('../../../Documents/flutter/packages/flutter/lib/src/widgets/binding.dart').
  WidgetsBinding.instance?.addPostFrameCallback((_) {`

Reaction box size

Hi friends,

How can the reaction box size be increased, make it bigger? And does the gesture detect swiping on the larger size of the screen?

Thanks in advance!

InitialReaction not updating as Expected/

Hey guys, first of all thanks for this plugin and i am facing the issue while implementing it in one of my project, could you guys help me out of this. Thanks in advance.

Version : flutter_reaction_button: ^1.0.2

Here is my code:

                    FlutterReactionButtonCheck(
                         onReactionChanged: (reaction, isChecked) {
                         this.widget.post.isLike = !this.widget.post.isLike;
                        setState(() {});
                         print('reaction selected id: ${reaction.id}');
                           print('isChecked $isChecked');
                          },
                       reactions: Reactions.reactions,
                        initialReaction: this.widget.post.isLike
                          ? Reactions.reactions[0]
                        : Reactions.defaultInitialReaction,
                       selectedReaction: Reactions.reactions[0],
                        boxRadius: 26,
                        ),
                       ),

if you see the above code i am changing the initial reaction dynamically according to my needs whenever its change its not updating its always renders the first what we give to it. I saw the code of the implementation there its setted in initstate does that is prob or any other? @GeekAbdelouahed @mostafaAbdelazim