feat: ✨ Add Menu Option for ChatViewList

dhyash-simform · dhyash-simform · commit 4be707d2b130 · 2025-07-29T16:55:01.000+05:30
diff --git a/example/lib/chat_view_list_screen.dart b/example/lib/chat_view_list_screen.dart
@@ -48,6 +48,31 @@ class _ChatViewListScreenState extends State<ChatViewListScreen> {
                   await Future.delayed(const Duration(seconds: 2)),
               pinIconConfig: const PinIconConfig(),
               muteIconConfig: const MuteIconConfig(),
+              menuConfig: ChatMenuConfig(
+                enabled: true,
+                muteStatusCallback: (result) {
+                  controller?.updateChat(
+                    result.chat.id,
+                    (previousChat) => previousChat.copyWith(
+                      settings: previousChat.settings.copyWith(
+                        muteStatus: result.status,
+                      ),
+                    ),
+                  );
+                  Navigator.of(context).pop();
+                },
+                pinStatusCallback: (result) {
+                  controller?.updateChat(
+                    result.chat.id,
+                    (previousChat) => previousChat.copyWith(
+                      settings: previousChat.settings.copyWith(
+                        pinStatus: result.status,
+                      ),
+                    ),
+                  );
+                  Navigator.of(context).pop();
+                },
+              ),
               config: ChatViewListConfig(
                 enablePagination: true,
                 loadMoreConfig: const LoadMoreConfig(),
@@ -74,9 +99,6 @@ class _ChatViewListScreenState extends State<ChatViewListScreen> {
                       ),
                     );
                   },
-                  onLongPress: (chat) {
-                    debugPrint('Long pressed on chat: ${chat.name}');
-                  },
                 ),
                 searchConfig: ChatViewListSearchConfig(
                   textEditingController: TextEditingController(),
diff --git a/lib/src/models/config_models/chat_view_list/chat_menu_config.dart b/lib/src/models/config_models/chat_view_list/chat_menu_config.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/cupertino.dart';
+
+import '../../../values/enumeration.dart';
+import '../../../values/typedefs.dart';
+
+class ChatMenuConfig {
+  const ChatMenuConfig({
+    this.enabled = true,
+    this.actions,
+    this.textStyle,
+    this.menuBuilder,
+    this.muteStatusCallback,
+    this.pinStatusCallback,
+    this.muteStatusTrailingIcon,
+    this.pinStatusTrailingIcon,
+  });
+
+  final bool enabled;
+  final TextStyle? textStyle;
+  final List<Widget>? actions;
+  final MenuBuilderCallback? menuBuilder;
+  final ChatStatusCallback<MuteStatus>? muteStatusCallback;
+  final ChatStatusCallback<PinStatus>? pinStatusCallback;
+  final StatusTrailingIcon<MuteStatus>? muteStatusTrailingIcon;
+  final StatusTrailingIcon<PinStatus>? pinStatusTrailingIcon;
+}
diff --git a/lib/src/models/config_models/chat_view_list/chat_view_list_tile_config.dart b/lib/src/models/config_models/chat_view_list/chat_view_list_tile_config.dart
@@ -48,7 +48,6 @@ class ChatViewListTileConfig {
     this.userNameTextStyle,
     this.lastMessageTextStyle,
     this.onTap,
-    this.onLongPress,
     this.lastMessageTileBuilder,
   });
 
@@ -97,9 +96,6 @@ class ChatViewListTileConfig {
   /// Callback function that is called when a user taps on a chat item.
   final ValueSetter<ChatViewListItem>? onTap;
 
-  /// Callback function that is called when the user long presses on a chat item.
-  final ValueSetter<ChatViewListItem>? onLongPress;
-
   /// Configuration for the user avatar in the chat list.
   final UserAvatarConfig userAvatarConfig;
 
diff --git a/lib/src/models/config_models/chat_view_list/models.dart b/lib/src/models/config_models/chat_view_list/models.dart
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 export 'chat_settings.dart';
+export 'chat_menu_config.dart';
 export 'chat_view_list_config.dart';
 export 'chat_view_list_tile_config.dart';
 export 'last_message_time_config.dart';
diff --git a/lib/src/values/typedefs.dart b/lib/src/values/typedefs.dart
@@ -129,3 +129,8 @@ typedef ChatSorter = int Function(
   ChatViewListItem chat1,
   ChatViewListItem chat2,
 );
+typedef MenuWidgetCallback = Widget Function(ChatViewListItem chat);
+typedef MenuBuilderCallback = Widget Function(
+  BuildContext context,
+  ChatViewListItem chat,
+);
diff --git a/lib/src/widgets/chat_view_list/chat_list_tile_context_menu.dart b/lib/src/widgets/chat_view_list/chat_list_tile_context_menu.dart
@@ -0,0 +1,73 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+import '../../models/models.dart';
+import '../../values/enumeration.dart';
+
+class ChatListTileContextMenu extends StatelessWidget {
+  const ChatListTileContextMenu({
+    required this.chat,
+    required this.child,
+    required this.config,
+    required this.chatTileColor,
+    super.key,
+  });
+
+  final Widget child;
+  final ChatViewListItem chat;
+  final ChatMenuConfig config;
+  final Color chatTileColor;
+
+  @override
+  Widget build(BuildContext context) {
+    if (!config.enabled) return child;
+    final newMuteStatus = switch (chat.settings.muteStatus) {
+      MuteStatus.muted => MuteStatus.unmute,
+      MuteStatus.unmute => MuteStatus.muted,
+    };
+    final newPinStatus = switch (chat.settings.pinStatus) {
+      PinStatus.pinned => PinStatus.unpinned,
+      PinStatus.unpinned => PinStatus.pinned,
+    };
+    return config.menuBuilder?.call(context, chat) ??
+        CupertinoContextMenu.builder(
+          builder: (_, __) => Material(
+            color: chatTileColor,
+            child: child,
+          ),
+          actions: [
+            ...?config.actions,
+            if (config.muteStatusCallback != null)
+              CupertinoContextMenuAction(
+                trailingIcon: config.muteStatusTrailingIcon?.call(
+                      newMuteStatus,
+                    ) ??
+                    newMuteStatus.iconData,
+                child: Text(
+                  newMuteStatus.menuName,
+                  style: config.textStyle,
+                ),
+                onPressed: () => config.muteStatusCallback?.call((
+                  chat: chat,
+                  status: newMuteStatus,
+                )),
+              ),
+            if (config.pinStatusCallback != null)
+              CupertinoContextMenuAction(
+                trailingIcon: config.pinStatusTrailingIcon?.call(
+                      newPinStatus,
+                    ) ??
+                    newPinStatus.iconData,
+                child: Text(
+                  newPinStatus.menuName,
+                  style: config.textStyle,
+                ),
+                onPressed: () => config.pinStatusCallback?.call((
+                  chat: chat,
+                  status: newPinStatus,
+                )),
+              ),
+          ],
+        );
+  }
+}
diff --git a/lib/src/widgets/chat_view_list/chat_view_list.dart b/lib/src/widgets/chat_view_list/chat_view_list.dart
@@ -24,17 +24,20 @@ import 'package:flutter/material.dart';
 
 import '../../controller/chat_list_view_controller.dart';
 import '../../models/chat_view_list_item.dart';
+import '../../models/config_models/chat_view_list/chat_menu_config.dart';
 import '../../models/config_models/chat_view_list/chat_view_list_config.dart';
 import '../../models/config_models/chat_view_list/load_more_config.dart';
 import '../../models/config_models/chat_view_list/mute_icon_config.dart';
 import '../../models/config_models/chat_view_list/pin_icon_config.dart';
+import 'chat_list_tile_context_menu.dart';
 import 'chat_view_list_item_tile.dart';
 import 'search_text_field.dart';
 
 class ChatViewList extends StatefulWidget {
   const ChatViewList({
     required this.controller,
     this.config = const ChatViewListConfig(),
+    this.menuConfig = const ChatMenuConfig(),
     this.scrollViewKeyboardDismissBehavior =
         ScrollViewKeyboardDismissBehavior.onDrag,
     this.muteIconConfig = const MuteIconConfig(),
@@ -98,6 +101,9 @@ class ChatViewList extends StatefulWidget {
   /// Provides configurations related to pin icon appearance.
   final PinIconConfig pinIconConfig;
 
+  /// Callback to provide a widget for the menu in the chat list.
+  final ChatMenuConfig menuConfig;
+
   @override
   State<ChatViewList> createState() => _ChatViewListState();
 }
@@ -150,18 +156,25 @@ class _ChatViewListState extends State<ChatViewList> {
                     return widget.config.separator;
                   }
 
-                  return widget.chatListUserWidgetBuilder
-                          ?.call(context, itemIndex) ??
-                      ChatViewListItemTile(
-                        chat: chats[itemIndex],
-                        profile: widget.profile,
-                        trailing: widget.trailing,
-                        userName: widget.userName,
-                        lastMessageTime: widget.lastMessageTime,
-                        tileConfig: widget.config.tileConfig,
-                        muteIconConfig: widget.muteIconConfig,
-                        pinIconConfig: widget.pinIconConfig,
-                      );
+                  final chat = chats[itemIndex];
+                  return ChatListTileContextMenu(
+                    key: ValueKey(chat.id),
+                    chat: chat,
+                    config: widget.menuConfig,
+                    chatTileColor: widget.config.backgroundColor,
+                    child: widget.chatListUserWidgetBuilder
+                            ?.call(context, itemIndex) ??
+                        ChatViewListItemTile(
+                          chat: chat,
+                          profile: widget.profile,
+                          trailing: widget.trailing,
+                          userName: widget.userName,
+                          lastMessageTime: widget.lastMessageTime,
+                          tileConfig: widget.config.tileConfig,
+                          muteIconConfig: widget.muteIconConfig,
+                          pinIconConfig: widget.pinIconConfig,
+                        ),
+                  );
                 },
               ),
             );
diff --git a/lib/src/widgets/chat_view_list/chat_view_list_item_tile.dart b/lib/src/widgets/chat_view_list/chat_view_list_item_tile.dart
@@ -80,7 +80,6 @@ class ChatViewListItemTile extends StatelessWidget {
     final lastMessage = chat.lastMessage;
     return GestureDetector(
       behavior: HitTestBehavior.opaque,
-      onLongPress: () => tileConfig.onLongPress?.call(chat),
       onTap: () {
         FocusManager.instance.primaryFocus?.unfocus();
         tileConfig.onTap?.call(chat);
