Add message insets

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.3.3
+
+- Add `onTextFieldTap`. Thanks @halildurmus for the PR!
+- Add `messageInsetsHorizontal` and `messageInsetsVertical` to the theme to customize message bubble's paddings
+
 ## 1.3.2
 
 - Fix memory leak. Thanks @m-j-g for reporting!

example/pubspec.yaml

@@ -31,7 +31,7 @@ dependencies:
   file_picker: ^4.0.1
   flutter_chat_ui:
     path: ../
-  image_picker: ^0.8.3+3
+  image_picker: ^0.8.4
   intl: ^0.17.0
   mime: ^1.0.0
   open_file: ^3.2.1

lib/src/chat_theme.dart

@@ -65,6 +65,8 @@ abstract class ChatTheme {
     required this.inputTextDecoration,
     required this.inputTextStyle,
     required this.messageBorderRadius,
+    required this.messageInsetsHorizontal,
+    required this.messageInsetsVertical,
     required this.primaryColor,
     required this.receivedMessageBodyTextStyle,
     required this.receivedMessageCaptionTextStyle,
@@ -134,6 +136,12 @@ abstract class ChatTheme {
   /// Border radius of message container
   final double messageBorderRadius;
 
+  /// Horizontal message bubble insets
+  final double messageInsetsHorizontal;
+
+  /// Vertical message bubble insets
+  final double messageInsetsVertical;
+
   /// Primary color of the chat used as a background of sent messages
   /// and statuses
   final Color primaryColor;
@@ -248,7 +256,9 @@ class DefaultChatTheme extends ChatTheme {
       fontWeight: FontWeight.w500,
       height: 1.5,
     ),
-    double messageBorderRadius = 20.0,
+    double messageBorderRadius = 20,
+    double messageInsetsHorizontal = 20,
+    double messageInsetsVertical = 16,
     Color primaryColor = PRIMARY,
     TextStyle receivedMessageBodyTextStyle = const TextStyle(
       color: NEUTRAL_0,
@@ -344,6 +354,8 @@ class DefaultChatTheme extends ChatTheme {
           inputTextDecoration: inputTextDecoration,
           inputTextStyle: inputTextStyle,
           messageBorderRadius: messageBorderRadius,
+          messageInsetsHorizontal: messageInsetsHorizontal,
+          messageInsetsVertical: messageInsetsVertical,
           primaryColor: primaryColor,
           receivedMessageBodyTextStyle: receivedMessageBodyTextStyle,
           receivedMessageCaptionTextStyle: receivedMessageCaptionTextStyle,
@@ -413,7 +425,9 @@ class DarkChatTheme extends ChatTheme {
       fontWeight: FontWeight.w500,
       height: 1.5,
     ),
-    double messageBorderRadius = 20.0,
+    double messageBorderRadius = 20,
+    double messageInsetsHorizontal = 20,
+    double messageInsetsVertical = 16,
     Color primaryColor = PRIMARY,
     TextStyle receivedMessageBodyTextStyle = const TextStyle(
       color: NEUTRAL_7,
@@ -503,6 +517,8 @@ class DarkChatTheme extends ChatTheme {
           errorIcon: errorIcon,
           inputBackgroundColor: inputBackgroundColor,
           inputBorderRadius: inputBorderRadius,
+          messageInsetsHorizontal: messageInsetsHorizontal,
+          messageInsetsVertical: messageInsetsVertical,
           inputPadding: inputPadding,
           inputTextColor: inputTextColor,
           inputTextCursorColor: inputTextCursorColor,

lib/src/widgets/chat.dart

@@ -42,8 +42,8 @@ class Chat extends StatefulWidget {
     this.onMessageTap,
     this.onPreviewDataFetched,
     required this.onSendPressed,
-    this.onTextFieldTap,
     this.onTextChanged,
+    this.onTextFieldTap,
     this.sendButtonVisibilityMode = SendButtonVisibilityMode.editing,
     this.showUserAvatars = false,
     this.showUserNames = false,
@@ -250,8 +250,8 @@ class _ChatState extends State<Chat> {
   ) {
     return Center(
       child: SizedBox(
-        width: 20.0,
-        height: 20.0,
+        width: 20,
+        height: 20,
         child: CircularProgressIndicator(
           value: event == null || event.expectedTotalBytes == null
               ? 0

lib/src/widgets/file_message.dart

@@ -26,7 +26,12 @@ class FileMessage extends StatelessWidget {
     return Semantics(
       label: InheritedL10n.of(context).l10n.fileButtonAccessibilityLabel,
       child: Container(
-        padding: const EdgeInsets.fromLTRB(16, 16, 24, 16),
+        padding: EdgeInsets.fromLTRB(
+          InheritedChatTheme.of(context).theme.messageInsetsVertical,
+          InheritedChatTheme.of(context).theme.messageInsetsVertical,
+          InheritedChatTheme.of(context).theme.messageInsetsHorizontal,
+          InheritedChatTheme.of(context).theme.messageInsetsVertical,
+        ),
         child: Row(
           mainAxisSize: MainAxisSize.min,
           children: [

lib/src/widgets/image_message.dart

@@ -95,7 +95,12 @@ class _ImageMessageState extends State<ImageMessage> {
           children: [
             Container(
               height: 64,
-              margin: const EdgeInsets.all(16),
+              margin: EdgeInsets.fromLTRB(
+                InheritedChatTheme.of(context).theme.messageInsetsVertical,
+                InheritedChatTheme.of(context).theme.messageInsetsVertical,
+                16,
+                InheritedChatTheme.of(context).theme.messageInsetsVertical,
+              ),
               width: 64,
               child: ClipRRect(
                 borderRadius: BorderRadius.circular(15),
@@ -107,7 +112,12 @@ class _ImageMessageState extends State<ImageMessage> {
             ),
             Flexible(
               child: Container(
-                margin: const EdgeInsets.fromLTRB(0, 16, 24, 16),
+                margin: EdgeInsets.fromLTRB(
+                  0,
+                  InheritedChatTheme.of(context).theme.messageInsetsVertical,
+                  InheritedChatTheme.of(context).theme.messageInsetsHorizontal,
+                  InheritedChatTheme.of(context).theme.messageInsetsVertical,
+                ),
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [

lib/src/widgets/input.dart

@@ -45,7 +45,7 @@ class Input extends StatefulWidget {
   /// Will be called whenever the text inside [TextField] changes
   final void Function(String)? onTextChanged;
 
-  /// Will be called on [TextField] tap.
+  /// Will be called on [TextField] tap
   final void Function()? onTextFieldTap;
 
   /// Controls the visibility behavior of the [SendButton] based on the

lib/src/widgets/text_message.dart

@@ -72,9 +72,10 @@ class TextMessage extends StatelessWidget {
       metadataTextStyle: linkDescriptionTextStyle,
       metadataTitleStyle: linkTitleTextStyle,
       onPreviewDataFetched: _onPreviewDataFetched,
-      padding: const EdgeInsets.symmetric(
-        horizontal: 24,
-        vertical: 16,
+      padding: EdgeInsets.symmetric(
+        horizontal:
+            InheritedChatTheme.of(context).theme.messageInsetsHorizontal,
+        vertical: InheritedChatTheme.of(context).theme.messageInsetsVertical,
       ),
       previewData: message.previewData,
       text: message.text,
@@ -93,7 +94,7 @@ class TextMessage extends StatelessWidget {
       children: [
         if (showName)
           Padding(
-            padding: const EdgeInsets.only(bottom: 6.0),
+            padding: const EdgeInsets.only(bottom: 6),
             child: Text(
               name,
               maxLines: 1,
@@ -132,9 +133,10 @@ class TextMessage extends StatelessWidget {
     }
 
     return Container(
-      margin: const EdgeInsets.symmetric(
-        horizontal: 24,
-        vertical: 16,
+      margin: EdgeInsets.symmetric(
+        horizontal:
+            InheritedChatTheme.of(context).theme.messageInsetsHorizontal,
+        vertical: InheritedChatTheme.of(context).theme.messageInsetsVertical,
       ),
       child: _textWidgetBuilder(_user, context),
     );

pubspec.yaml

@@ -2,7 +2,7 @@ name: flutter_chat_ui
 description: >
   Actively maintained, community-driven chat UI implementation with an
   optional Firebase BaaS.
-version: 1.3.2
+version: 1.3.3
 homepage: https://flyer.chat
 repository: https://github.com/flyerhq/flutter_chat_ui