Use pull_down_button

Author: nicolasbraun

examples/flyer_chat/lib/local.dart

@@ -15,6 +15,7 @@ import 'package:flyer_chat_reactions/flyer_chat_reactions.dart';
 import 'package:flyer_chat_system_message/flyer_chat_system_message.dart';
 import 'package:flyer_chat_text_message/flyer_chat_text_message.dart';
 import 'package:image_picker/image_picker.dart';
+import 'package:pull_down_button/pull_down_button.dart';
 import 'package:uuid/uuid.dart';
 
 import 'create_message.dart';
@@ -363,24 +364,26 @@ class LocalState extends State<Local> {
     );
   }
 
-  List<MenuItem> _getMenuItems(Message message) {
+  List<PullDownMenuEntry> _getMenuItems(Message message) {
     if (message.authorId == 'system') return [];
 
     final items = [
       if (message is TextMessage)
-        MenuItem(
+        PullDownMenuItem(
           title: 'Copy',
           icon: CupertinoIcons.doc_on_doc,
           onTap: () {
             _copyMessage(message);
+            Navigator.of(context).pop();
           },
         ),
-      MenuItem(
+      PullDownMenuItem(
         title: 'Delete',
         icon: CupertinoIcons.delete,
         isDestructive: true,
         onTap: () {
           _removeItem(message);
+          Navigator.of(context).pop();
         },
       ),
     ];

packages/flyer_chat_reactions/lib/flyer_chat_reactions.dart

@@ -1,4 +1,3 @@
-export 'src/models/menu_item.dart';
 export 'src/models/reaction.dart';
 export 'src/widgets/flyer_chat_reactions_row.dart';
 export 'src/widgets/reaction_tile.dart';

packages/flyer_chat_reactions/lib/src/models/menu_item.dart

@@ -5,9 +5,10 @@ import 'package:flutter_chat_core/flutter_chat_core.dart';
 import 'package:flutter_chat_ui/flutter_chat_ui.dart'
     show ChatProviders, buildMessageContent;
 import 'package:provider/provider.dart';
+import 'package:pull_down_button/pull_down_button.dart'
+    show PullDownMenuEntry, PullDownMenu;
 
 import '../models/default_data.dart';
-import '../models/menu_item.dart';
 import '../utils/typedef.dart';
 
 //// Theme values for [ReactionsDialogWidget].
@@ -55,7 +56,7 @@ class ReactionsDialogWidget extends StatefulWidget {
   final VoidCallback? onMoreReactionsTap;
 
   /// The list of menu items to be displayed in the context menu
-  final List<MenuItem>? menuItems;
+  final List<PullDownMenuEntry>? menuItems;
 
   /// The list of default reactions to be displayed
   final List<String>? reactions;
@@ -125,94 +126,10 @@ class _ReactionsDialogWidgetState extends State<ReactionsDialogWidget> {
             buildReactionsPicker(context, theme),
             const SizedBox(height: 10),
             widget.messageWidget,
-            const SizedBox(height: 10),
-            buildMenuItems(context, theme),
-          ],
-        ),
-      ),
-    );
-  }
-
-  Widget buildMenuItems(BuildContext context, _LocalTheme theme) {
-    final destructiveColor = widget.menuItemDestructiveColor ?? Colors.red;
-    return Material(
-      color: Colors.transparent,
-      child: Container(
-        /// TODO: maybe use pixels, for desktop?
-        width:
-            MediaQuery.of(context).size.width *
-            (widget.menuItemsWidthRatio ?? 0.45),
-        decoration: BoxDecoration(
-          color: widget.menuItemBackgroundColor ?? theme.surfaceContainer,
-          borderRadius: theme.shape,
-        ),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            for (var item in widget.menuItems ?? const [])
-              Column(
-                children: [
-                  Padding(
-                    padding: const EdgeInsets.all(8),
-                    child: InkWell(
-                      onTap: () {
-                        setState(() {
-                          clickedContextMenuIndex = widget.menuItems?.indexOf(
-                            item,
-                          );
-                        });
-
-                        Future.delayed(
-                          widget.menuItemTapAnimationDuration ??
-                              const Duration(milliseconds: 200),
-                        ).whenComplete(() {
-                          if (context.mounted) {
-                            Navigator.of(context).pop();
-                          }
-                          item.onTap?.call();
-                        });
-                      },
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        children: [
-                          Text(
-                            item.title,
-                            style: TextStyle(
-                              color:
-                                  item.isDestructive
-                                      ? destructiveColor
-                                      : theme.onSurface,
-                            ),
-                          ),
-                          Pulse(
-                            infinite: false,
-                            duration:
-                                widget.menuItemTapAnimationDuration ??
-                                const Duration(milliseconds: 200),
-                            animate:
-                                clickedContextMenuIndex ==
-                                widget.menuItems?.indexOf(item),
-                            child: Icon(
-                              item.icon,
-                              color:
-                                  item.isDestructive
-                                      ? destructiveColor
-                                      : theme.onSurface,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                  if (widget.menuItems?.last != item)
-                    Divider(
-                      color: widget.menuItemDividerColor ?? Colors.white,
-                      thickness: 0.5,
-                      height: 0.5,
-                    ),
-                ],
-              ),
+            if (widget.menuItems != null && widget.menuItems!.isNotEmpty) ...[
+              const SizedBox(height: 10),
+              PullDownMenu(items: widget.menuItems!),
+            ],
           ],
         ),
       ),
@@ -333,7 +250,7 @@ void showReactionsDialog(
   required bool isSentByMe,
   required Function(String) onReactionTap,
   VoidCallback? onMoreReactionsTap,
-  List<MenuItem>? menuItems,
+  List<PullDownMenuEntry>? menuItems,
   List<String>? reactions,
   List<String>? userReactions,
   CrossAxisAlignment? widgetAlignment,

packages/flyer_chat_reactions/lib/src/widgets/reactions_dialog.dart

@@ -16,6 +16,7 @@ dependencies:
   flutter_chat_core: ^2.7.0
   flutter_chat_ui: ^2.7.0
   provider: ^6.1.5
+  pull_down_button: ^0.10.2
 
 dev_dependencies:
   flutter_lints: ^6.0.0