feat: ✨ Add selection and copy options for text view.

Author: japanshah-simform

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [3.0.0] (unreleased)
-
+* **Feat**: [401](https://github.com/SimformSolutionsPvtLtd/chatview/pull/401)
+  Add selection and copy options for text view.
 * **Breaking**: [318](https://github.com/SimformSolutionsPvtLtd/chatview/issues/318)
   Provide support for action item widgets on the chat text field with position options
   `leadingActions` and `trailingActions` in `TextFieldConfiguration`. Also, provide a way to add

lib/src/models/chat_bubble.dart

@@ -36,7 +36,10 @@ class ChatBubble {
     this.senderNameTextStyle,
     this.receiptsWidgetConfig,
     this.onMessageRead,
+    this.isSelectable = true,
     this.border,
+    this.selectionHighlightColor,
+    this.selectionCursorColor,
   });
 
   /// Used for giving color of chat bubble.
@@ -70,4 +73,13 @@ class ChatBubble {
 
   /// Used for giving border of chat bubble.
   final Border? border;
+
+  /// Used to determine whether the text can be selected.
+  final bool isSelectable;
+
+  /// Color used to paint the selected text highlight background.  If null, falls back to theme.
+  final Color? selectionHighlightColor;
+
+  /// Color for the drag handles. If null, falls back to theme.
+  final Color? selectionCursorColor;
 }

lib/src/widgets/custom_selection_area.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+
+/// A convenience wrapper around [SelectionArea] that lets you locally
+/// customize selection highlight, handle, and colors
+/// without changing the global app [Theme].
+
+class CustomSelectionArea extends StatelessWidget {
+  const CustomSelectionArea({
+    super.key,
+    required this.child,
+    this.selectionColor,
+    this.selectionHandleColor,
+    this.selectionControls,
+    this.cursorColor,
+  });
+
+  /// The subtree whose text becomes selectable.
+  final Widget child;
+
+  /// Color used to paint the selected text highlight background.
+  final Color? selectionColor;
+
+  /// Color for the drag handles. If null, falls back to theme.
+  final Color? selectionHandleColor;
+
+  /// Optional custom selection controls (toolbar / handles). If you just need
+  /// color tweaks, you usually do not need to supply this.
+  final TextSelectionControls? selectionControls;
+
+  /// Cursor color for any text.
+  final Color? cursorColor;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final baseTextSelectionTheme = theme.textSelectionTheme;
+
+    final mergedTextSelectionTheme = baseTextSelectionTheme.copyWith(
+      selectionColor: selectionColor ?? baseTextSelectionTheme.selectionColor,
+      selectionHandleColor:
+          selectionHandleColor ?? baseTextSelectionTheme.selectionHandleColor,
+      cursorColor: cursorColor ?? baseTextSelectionTheme.cursorColor,
+    );
+
+    return Theme(
+      data: theme.copyWith(textSelectionTheme: mergedTextSelectionTheme),
+      child: SelectionArea(selectionControls: selectionControls, child: child),
+    );
+  }
+}
+
+class ColoredTextSelectionControls extends MaterialTextSelectionControls {
+  ColoredTextSelectionControls(this.handleColor);
+
+  /// Color for the drag handles.
+  final Color handleColor;
+
+  @override
+  Widget buildHandle(
+    BuildContext context,
+    TextSelectionHandleType type,
+    double textHeight, [
+    VoidCallback? onTap,
+  ]) {
+    final handle = super.buildHandle(context, type, textHeight, onTap);
+    return IconTheme.merge(
+      data: IconThemeData(color: handleColor),
+      child: handle,
+    );
+  }
+}

lib/src/widgets/text_message_view.dart

@@ -19,6 +19,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import 'package:chatview/src/widgets/custom_selection_area.dart';
 import 'package:chatview_utils/chatview_utils.dart';
 import 'package:flutter/material.dart';
 
@@ -74,6 +75,23 @@ class TextMessageView extends StatelessWidget {
     final border = isMessageBySender
         ? outgoingChatBubbleConfig?.border
         : inComingChatBubbleConfig?.border;
+    final isSelectable = isMessageBySender
+        ? outgoingChatBubbleConfig?.isSelectable ?? false
+        : inComingChatBubbleConfig?.isSelectable ?? false;
+    final selectionHighlightColor = isMessageBySender
+        ? outgoingChatBubbleConfig?.selectionHighlightColor
+        : inComingChatBubbleConfig?.selectionHighlightColor;
+    final selectionCursorColor = isMessageBySender
+        ? outgoingChatBubbleConfig?.selectionCursorColor
+        : inComingChatBubbleConfig?.selectionCursorColor;
+    final baseWidget = Text(
+      textMessage,
+      style: _textStyle ??
+          textTheme.bodyMedium!.copyWith(
+            color: Colors.white,
+            fontSize: 16,
+          ),
+    );
     return Stack(
       clipBehavior: Clip.none,
       children: [
@@ -99,14 +117,15 @@ class TextMessageView extends StatelessWidget {
                   linkPreviewConfig: _linkPreviewConfig,
                   url: textMessage,
                 )
-              : Text(
-                  textMessage,
-                  style: _textStyle ??
-                      textTheme.bodyMedium!.copyWith(
-                        color: Colors.white,
-                        fontSize: 16,
-                      ),
-                ),
+              : isSelectable
+                  ? CustomSelectionArea(
+                      selectionColor: selectionHighlightColor,
+                      selectionHandleColor: selectionCursorColor,
+                      selectionControls: ColoredTextSelectionControls(
+                          selectionCursorColor ?? Colors.black),
+                      child: baseWidget,
+                    )
+                  : baseWidget,
         ),
         if (message.reaction.reactions.isNotEmpty)
           ReactionWidget(