feat: ✨ Add support for plus icon and action items in chat text field #340

apurva010 · 2025-06-05T05:28:30Z

Description

Trailing action widgets (Camera, Image, Overlay)
https://github.com/user-attachments/assets/be603f7d-12fb-44f3-8aff-d9eb64ba5987

Leading action widget (Emoji)

ScreenRecording_06-18-2025.20-05-59_1.MP4

Checklist

The title of my PR starts with a Conventional Commit prefix (fix:, feat:, docs: etc).
I have followed the Contributor Guide when preparing my PR.
I have updated/added tests for ALL new/updated/fixed functionality.
I have updated/added relevant documentation in docs and added dartdoc comments with ///.
I have updated/added relevant examples in examples or docs.

Breaking Change?

Yes, this PR is a breaking change.
No, this PR is not a breaking change.

Related Issues

Closes #301, #318 and #222

Copilot

Pull Request Overview

This PR adds support for a plus icon and additional action items in the chat text field, introducing overlay functionality and new configuration options. Key changes include:

Implementation of an animated overlay for action items triggered by the plus icon.
Introduction of new configuration fields (actionItems, plusIcon, plusIconColor, actionWidgetList, onPressedPlusIcon) in the text field configuration.
Addition of the ActionItems enum and ActionWidget class to support these new features.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
lib/src/widgets/chatui_textfield.dart	Added overlay, animation, and plus icon logic to support extra action items.
lib/src/values/enumeration.dart	Introduced the ActionItems enum with helper getters.
lib/src/models/config_models/send_message_configuration.dart	Updated TextFieldConfiguration with new fields and added the ActionWidget class.
CHANGELOG.md	Updated changelog to document the new feature.

Comments suppressed due to low confidence (2)

lib/src/widgets/chatui_textfield.dart:90

[nitpick] Consider adding unit tests to cover the overlay display logic and animation transitions to ensure robust behavior.

void _showOverlay(List<ActionWidget> plusOptions, {GlobalKey? plusIconKey}) {

lib/src/widgets/chatui_textfield.dart:157

Verify that 'withValues' is the intended method for adjusting color opacity; if it is not part of the updated API, consider using 'withOpacity' for clarity and consistency.

color: Colors.black.withValues(alpha: 0.08),

vatsaltanna-simformsolutions · 2025-06-05T06:54:30Z

lib/src/models/config_models/send_message_configuration.dart

+  final List<ActionItems> actionItems;
+
+  /// Color of plus icon in text field
+  final Color? plusIconColor;


Instead of Plus Icon let's call it Custom Action, so user can add whatever icon they want, like we have seen in whatsapp for attachments

aditya-css

Please add migration guide in readme and also add a separate section that shows how to add icons next to textfield and the overlay one.

aditya-css · 2025-06-06T08:13:02Z

lib/src/models/config_models/send_message_configuration.dart

+}
+
+/// Represents a widget that can be used in the plus/attach modal sheet.
+class ActionWidget {


Please move this to a separate file for this.

aditya-css · 2025-06-06T08:13:27Z

lib/src/utils/helper.dart

+import 'package:chatview/chatview.dart';
+import 'package:image_picker/image_picker.dart';
+
+Future<String?> onIconPressed(


Please rename this.

aditya-css · 2025-06-06T08:13:56Z

lib/src/utils/helper.dart

+      imageQuality: config?.imageQuality,
+      preferredCameraDevice: config?.preferredCameraDevice ?? CameraDevice.rear,
+    );
+    String? imagePath = image?.path;


Suggested change

String? imagePath = image?.path;

var imagePath = image?.path;

aditya-css · 2025-06-06T08:14:41Z

lib/src/utils/helper.dart

+      preferredCameraDevice: config?.preferredCameraDevice ?? CameraDevice.rear,
+    );
+    String? imagePath = image?.path;
+    if (config?.onImagePicked != null) {


Seems like an unnecessary check. Please remove it.

It is a callback for image picked.

aditya-css · 2025-06-06T08:17:34Z

lib/src/utils/helper.dart

+    if (config?.onImagePicked != null) {
+      String? updatedImagePath = await config?.onImagePicked!(imagePath);
+      if (updatedImagePath != null) imagePath = updatedImagePath;
+    }


You can rewrite the lines from 16 to 21 as:

final imagePath = await config?.onImagePicked?.call(imagePath); return imagePath ?? image?.path;

aditya-css · 2025-06-06T08:38:25Z

lib/src/widgets/chatui_textfield.dart

                        if ((sendMessageConfig?.allowRecordingVoice ?? false) &&
                            !kIsWeb &&
-                            (Platform.isIOS || Platform.isAndroid))
+                            (Platform.isIOS || Platform.isAndroid)) ...{


The bracket seems unnecessary.

aditya-css · 2025-06-06T08:38:58Z

lib/src/widgets/message_view.dart

 import 'package:chatview/chatview.dart';
+import 'package:chatview/src/extensions/extensions.dart';
 import 'package:chatview/src/widgets/chat_view_inherited_widget.dart';


Please use relative import.

aditya-css · 2025-06-06T08:44:52Z

lib/src/models/config_models/send_message_configuration.dart

@@ -168,6 +160,11 @@ class TextFieldConfiguration {
  /// Default is [true].
  final bool enabled;

+  /// List of options to show in the plus/attach modal sheet
+  final List<ActionWidget> actionWidgetList;


I believe you can remove this.

aditya-css · 2025-06-06T08:45:58Z

lib/src/widgets/action_widgets/custom_action_button.dart

+import 'package:flutter/material.dart';
+
+/// Custom action button that displays a plus icon and shows a horizontal row of options when pressed.
+class CustomActionButton extends TextFieldActionButton {


Please rename this to OverlayActionButton.

aditya-css · 2025-06-06T08:47:12Z

lib/src/widgets/action_widgets/custom_action_button.dart

+    required this.actionWidgets,
+  });
+
+  final List<ActionWidget> actionWidgets;


Suggested change

final List<ActionWidget> actionWidgets;

final List<OverlayActionWidget> actions;

aditya-css · 2025-06-17T06:46:07Z

doc/documentation.md

+- Now, you can add overlay action button to show overlay action items in the text field.
+  - With multiple action items


Please check this.

doc/documentation.md

aditya-css · 2025-06-17T06:58:23Z

lib/src/models/overlay_action_widget.dart

@@ -0,0 +1,15 @@
+import 'package:chatview/chatview.dart';


Seems unnecessary.

aditya-css · 2025-06-17T06:59:13Z

lib/src/utils/helper.dart

@@ -0,0 +1,21 @@
+import 'package:chatview/chatview.dart';


Please use relative import.

aditya-css · 2025-06-17T07:00:31Z

lib/src/values/typedefs.dart

@@ -67,3 +67,11 @@ typedef CustomViewForReplyMessage = Widget Function(
  ReplyMessage state,
 );
 typedef GetMessageSeparator = (Map<int, DateTime>, DateTime);
+typedef TextFieldLeadingActionWidgetBuilder = List<Widget> Function(


You can keep just a single typedef for both leading and trailing.

aditya-css · 2025-06-17T07:01:04Z

lib/src/widgets/action_widgets/camera_action_button.dart

@@ -0,0 +1,35 @@
+import 'package:chatview/chatview.dart';


Please use relative import.

aditya-css · 2025-06-17T07:02:02Z

lib/src/widgets/action_widgets/emoji_picker_action_button.dart

@@ -0,0 +1,62 @@
+import 'package:chatview/chatview.dart';


Relative import.

aditya-css · 2025-06-17T07:05:45Z

lib/src/widgets/action_widgets/overlay_action_button.dart

+    var overlayBottom = 0.0;
+    var overlayLeft = 0.0;
+
+    final screenHeight = MediaQuery.sizeOf(context).height;


Please cache the size once.

aditya-css · 2025-06-17T07:07:50Z

lib/src/widgets/action_widgets/overlay_action_button.dart

+
+    if (plusIconKey?.currentContext case final context?) {
+      final renderObject = context.findRenderObject();
+      if (renderObject != null && renderObject is RenderBox) {


You can avoid renderObject != null check here.

aditya-css · 2025-06-18T12:13:24Z

lib/src/widgets/chatui_textfield.dart

+                                      context,
+                                      widget.textEditingController,
+                                    ) ??
+                                    [],


Please avoid having row with empty list.

aditya-css · 2025-06-18T12:16:05Z

lib/src/widgets/chatui_textfield.dart

+                                  onPressed: (value) {
+                                    (textFieldConfig?.enabled ?? true)
+                                        ? widget.onImageSelected(
+                                            value ?? '',
+                                            '',
+                                          )
+                                        : null;
+                                  },


Please assign null to the parameter directly.

aditya-css · 2025-06-18T12:16:29Z

lib/src/widgets/send_message_widget.dart

@@ -309,6 +301,14 @@ class SendMessageWidgetState extends State<SendMessageWidget> {
    _assignRepliedMessage();
  }

+  void _onImageSelected(String imagePath, String error) {
+    debugPrint('Call in Send Message Widget');


Please remove this.

aditya-css · 2025-06-18T12:16:40Z

lib/src/widgets/send_message_widget.dart

@@ -309,6 +301,14 @@ class SendMessageWidgetState extends State<SendMessageWidget> {
    _assignRepliedMessage();
  }

+  void _onImageSelected(String imagePath, String error) {
+    debugPrint('Call in Send Message Widget');
+    if (imagePath.isNotEmpty) {


Please invert this condition.

aditya-css · 2025-06-18T12:19:30Z

lib/src/widgets/action_widgets/overlay_action_button.dart

+        overlayWidth -= overlayLeft - horizontalPadding * 2;
+      } else {
+        // For trailing, keep plus icon at right edge of overlay, but don't overflow left
+        overlayLeft = (iconRight - overlayWidth);


Brackets seems unnecessary.

aditya-css · 2025-06-18T12:23:22Z

lib/src/widgets/action_widgets/emoji_picker_action_button.dart

+  final double? height;
+
+  /// Shows the emoji picker as a modal bottom sheet and returns the selected emoji.
+  static Future<String?> pickEmoji({


I believe you can make this private.

aditya-css

Need to use breaking convention in commit message (feat!:) and update the changelog to version 3.0.0.

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch from 1e7b83e to 8d78667 Compare June 5, 2025 05:28

apurva010 requested a review from aditya-css June 5, 2025 05:29

vatsaltanna-simformsolutions requested a review from Copilot June 5, 2025 06:50

Copilot AI reviewed Jun 5, 2025

View reviewed changes

vatsaltanna-simformsolutions reviewed Jun 5, 2025

View reviewed changes

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch 2 times, most recently from acd28cf to 8ecfa00 Compare June 5, 2025 13:59

aditya-css requested changes Jun 6, 2025

View reviewed changes

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch 4 times, most recently from 01c4d8c to 9238657 Compare June 12, 2025 12:53

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch 2 times, most recently from 15e0665 to 46c62cf Compare June 17, 2025 05:57

aditya-css requested changes Jun 17, 2025

View reviewed changes

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch 2 times, most recently from 98e7f01 to 9d2ef45 Compare June 17, 2025 09:53

aditya-css requested changes Jun 18, 2025

View reviewed changes

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch from 9d2ef45 to ba98f1a Compare June 18, 2025 12:42

feat: ✨ Add support for plus icon and action items in chat text field

ef2c096

apurva010 force-pushed the feat/add_plus_icon_beside_textfield branch from ba98f1a to ef2c096 Compare June 18, 2025 14:33

aditya-css approved these changes Jun 18, 2025

View reviewed changes

	String? imagePath = image?.path;
	var imagePath = image?.path;

	final List<ActionWidget> actionWidgets;
	final List<OverlayActionWidget> actions;

		- Now, you can add overlay action button to show overlay action items in the text field.
		- With multiple action items

feat: ✨ Add support for plus icon and action items in chat text field #340

Are you sure you want to change the base?

feat: ✨ Add support for plus icon and action items in chat text field #340

Uh oh!

Conversation

apurva010 commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Breaking Change?

Related Issues

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aditya-css left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aditya-css left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

apurva010 commented Jun 5, 2025 •

edited

Loading