Add support for overriding bubbleMargin using ChatTheme (#585)

* Add support for overriding bubbleMargin using ChatTheme * Add super.bubbleMargin to DefaultChatTheme and DarkChatTheme * Refactor bubbleMargin to use EdgeInsetsGeometry instead of EdgeInsets
flyerhq · Apr 25, 2024 · 2b5978c · 2b5978c
1 parent d559096
commit 2b5978c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/lib/src/chat_theme.dart b/lib/src/chat_theme.dart
@@ -59,6 +59,7 @@ abstract class ChatTheme {
     required this.attachmentButtonIcon,
     required this.attachmentButtonMargin,
     required this.backgroundColor,
+    this.bubbleMargin,
     required this.dateDividerMargin,
     required this.dateDividerTextStyle,
     required this.deliveredIcon,
@@ -125,6 +126,9 @@ abstract class ChatTheme {
   /// Used as a background color of a chat widget.
   final Color backgroundColor;
 
+  // Margin around the message bubble.
+  final EdgeInsetsGeometry? bubbleMargin;
+
   /// Margin around date dividers.
   final EdgeInsets dateDividerMargin;
 
@@ -316,6 +320,7 @@ class DefaultChatTheme extends ChatTheme {
     super.attachmentButtonIcon,
     super.attachmentButtonMargin,
     super.backgroundColor = neutral7,
+    super.bubbleMargin,
     super.dateDividerMargin = const EdgeInsets.only(
       bottom: 32,
       top: 16,
@@ -489,6 +494,7 @@ class DarkChatTheme extends ChatTheme {
     super.attachmentButtonIcon,
     super.attachmentButtonMargin,
     super.backgroundColor = dark,
+    super.bubbleMargin,
     super.dateDividerMargin = const EdgeInsets.only(
       bottom: 32,
       top: 16,

diff --git a/lib/src/widgets/message/message.dart b/lib/src/widgets/message/message.dart
@@ -339,6 +339,19 @@ class Message extends StatelessWidget {
             topRight: Radius.circular(messageBorderRadius),
           );
 
+    final bubbleMargin = InheritedChatTheme.of(context).theme.bubbleMargin ??
+        (bubbleRtlAlignment == BubbleRtlAlignment.left
+            ? EdgeInsetsDirectional.only(
+                bottom: 4,
+                end: isMobile ? query.padding.right : 0,
+                start: 20 + (isMobile ? query.padding.left : 0),
+              )
+            : EdgeInsets.only(
+                bottom: 4,
+                left: 20 + (isMobile ? query.padding.left : 0),
+                right: isMobile ? query.padding.right : 0,
+              ));
+
     return Container(
       alignment: bubbleRtlAlignment == BubbleRtlAlignment.left
           ? currentUserIsAuthor
@@ -347,17 +360,7 @@ class Message extends StatelessWidget {
           : currentUserIsAuthor
               ? Alignment.centerRight
               : Alignment.centerLeft,
-      margin: bubbleRtlAlignment == BubbleRtlAlignment.left
-          ? EdgeInsetsDirectional.only(
-              bottom: 4,
-              end: isMobile ? query.padding.right : 0,
-              start: 20 + (isMobile ? query.padding.left : 0),
-            )
-          : EdgeInsets.only(
-              bottom: 4,
-              left: 20 + (isMobile ? query.padding.left : 0),
-              right: isMobile ? query.padding.right : 0,
-            ),
+      margin: bubbleMargin,
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisSize: MainAxisSize.min,