Chat bubbles are more customizable now

dave-k · Jul 27, 2019 · a705405 · a705405
1 parent 1f81114
commit a705405
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [0.1.2]
+
+- Chat Bubble are more customizable now.
+
 ## [0.1.1]
 
 - User avatar now show user initials while loading & if not avatar is passed

diff --git a/lib/src/message_listview.dart b/lib/src/message_listview.dart
@@ -148,6 +148,7 @@ class MessageListView extends StatelessWidget {
                           child: messageBuilder != null
                               ? messageBuilder(messages[i])
                               : MessageContainer(
+                                  isUser: messages[i].user.uid == user.uid,
                                   message: messages[i],
                                   timeFormat: timeFormat,
                                   messageImageBuilder: messageImageBuilder,

diff --git a/lib/src/models/chat_user.dart b/lib/src/models/chat_user.dart
@@ -7,16 +7,24 @@ class ChatUser {
   /// is automatically assigned to the chat user.
   String uid;
 
-  /// A [optional] parameter to set the user name.
+  /// An [optional] parameter to set the user name.
   String name;
 
-  /// A [optional] parameter to set the user avatar.
+  /// An [optional] parameter to set the user avatar.
   String avatar;
 
+  /// An [optional] parameter to set Text Color
+  Color color;
+
+  /// An [optional] parameter to set The Message bubble Color
+  Color containerColor;
+
   ChatUser({
     String uid,
     this.name,
     this.avatar,
+    this.containerColor,
+    this.color,
   }) {
     this.uid = uid != null ? uid : Uuid().v4().toString();
   }

diff --git a/lib/src/widgets/message_container.dart b/lib/src/widgets/message_container.dart
@@ -37,27 +37,40 @@ class MessageContainer extends StatelessWidget {
   /// and can also add custom pattersn using regex
   final List<MatchText> parsePatterns;
 
-  const MessageContainer({
-    @required this.message,
-    @required this.timeFormat,
-    this.messageImageBuilder,
-    this.messageTextBuilder,
-    this.messageTimeBuilder,
-    this.messageContainerDecoration,
-    this.parsePatterns = const <MatchText>[],
-  });
+  /// A flag which is used for assiging styles
+  final bool isUser;
+
+  const MessageContainer(
+      {@required this.message,
+      @required this.timeFormat,
+      this.messageImageBuilder,
+      this.messageTextBuilder,
+      this.messageTimeBuilder,
+      this.messageContainerDecoration,
+      this.parsePatterns = const <MatchText>[],
+      this.isUser});
 
   @override
   Widget build(BuildContext context) {
+    /* var containerDecoration = messageContainerDecoration;
+    containerDecoration.color = message.user.containerColor != null
+                    ? message.user.containerColor : messageContainerDecoration.c */
     return ConstrainedBox(
       constraints: BoxConstraints(
         maxWidth: 220.0,
       ),
       child: Container(
         decoration: messageContainerDecoration != null
-            ? messageContainerDecoration
+            ? messageContainerDecoration.copyWith(
+                color: message.user.containerColor != null
+                    ? message.user.containerColor
+                    : messageContainerDecoration.color,
+              )
             : BoxDecoration(
-                color: Colors.blue,
+                color: message.user.containerColor != null
+                    ? message.user.containerColor
+                    : isUser ? Theme.of(context).accentColor : Colors.white70,
+                borderRadius: BorderRadius.circular(5.0),
               ),
         margin: EdgeInsets.only(
           top: 8.0,
@@ -73,7 +86,10 @@ class MessageContainer extends StatelessWidget {
               ParsedText(
                 parse: parsePatterns,
                 text: message.text,
-                style: TextStyle(color: Colors.white),
+                style: TextStyle(
+                    color: message.user.color != null
+                        ? message.user.color
+                        : isUser ? Colors.white70 : Colors.black87),
               ),
             if (message.image != null)
               if (messageImageBuilder != null)

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: dash_chat
 description: A new Flutter package project.
-version: 0.1.1
+version: 0.1.2
 author:
 homepage: