add initial example

example/lib/custom_theme.dart

@@ -0,0 +1,129 @@
+import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+
+void main() async {
+  final client = Client('qk4nn7rpcn75', logLevel: Level.INFO);
+
+  await client.setUser(
+    User(id: 'wild-breeze-7'),
+    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoid2lsZC1icmVlemUtNyJ9.VM2EX1EXOfgqa-bTH_3JzeY0T99ngWzWahSauP3dBMo',
+  );
+
+  runApp(MyApp(client));
+}
+
+class MyApp extends StatelessWidget {
+  final Client client;
+
+  MyApp(this.client);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ThemeData(
+      primarySwatch: Colors.green,
+    );
+
+    final streamTheme = StreamChatThemeData.fromTheme(theme);
+
+    return MaterialApp(
+      theme: theme,
+      home: Container(
+        child: StreamChat(
+          streamChatThemeData: streamTheme.copyWith(
+            channelPreviewTheme: ChannelPreviewTheme(
+              avatarTheme: AvatarTheme(
+                borderRadius: BorderRadius.circular(16),
+              ),
+            ),
+            ownMessageTheme: MessageTheme(
+              replies: streamTheme.ownMessageTheme.replies
+                  .copyWith(fontStyle: FontStyle.italic),
+              avatarTheme: AvatarTheme(
+                borderRadius: BorderRadius.circular(12),
+              ),
+            ),
+            otherMessageTheme: MessageTheme(
+              messageBackgroundColor: Colors.red,
+            ),
+          ),
+          client: client,
+          child: ChannelListPage(),
+        ),
+      ),
+    );
+  }
+}
+
+class ChannelListPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ChannelListView(
+        filter: {
+          'members': {
+            '\$in': [StreamChat.of(context).user.id],
+          }
+        },
+        sort: [SortOption('last_message_at')],
+        pagination: PaginationParams(
+          limit: 20,
+        ),
+        channelWidget: ChannelPage(),
+      ),
+    );
+  }
+}
+
+class ChannelPage extends StatelessWidget {
+  const ChannelPage({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: ChannelHeader(),
+      body: Column(
+        children: <Widget>[
+          Expanded(
+            child: MessageListView(
+              threadBuilder: (_, parentMessage) {
+                return ThreadPage(
+                  parent: parentMessage,
+                );
+              },
+            ),
+          ),
+          MessageInput(),
+        ],
+      ),
+    );
+  }
+}
+
+class ThreadPage extends StatelessWidget {
+  final Message parent;
+
+  ThreadPage({
+    Key key,
+    this.parent,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Column(
+        children: <Widget>[
+          Expanded(
+            child: MessageListView(
+              parentMessage: parent,
+            ),
+          ),
+          MessageInput(
+            parentMessage: parent,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/src/message_widget.dart

@@ -41,6 +41,8 @@ class _MessageWidgetState extends State<MessageWidget>
   final Map<String, ChangeNotifier> _videoControllers = {};
   final Map<String, ChangeNotifier> _chuwieControllers = {};
 
+  MessageTheme messageTheme;
+
   @override
   Widget build(BuildContext context) {
     super.build(context);
@@ -56,6 +58,10 @@ class _MessageWidgetState extends State<MessageWidget>
     final alignment =
         isMyMessage ? Alignment.centerRight : Alignment.centerLeft;
 
+    messageTheme = isMyMessage
+        ? StreamChatTheme.of(context).ownMessageTheme
+        : StreamChatTheme.of(context).otherMessageTheme;
+
     Widget child;
 
     if (widget.message.type == 'deleted') {
@@ -121,9 +127,10 @@ class _MessageWidgetState extends State<MessageWidget>
         ),
         child: Text(
           'This message was deleted...',
-          style: StreamChatTheme.of(context).messageTheme.messageText.copyWith(
+          style: messageTheme.messageText.copyWith(
-                fontStyle: FontStyle.italic,
+            fontStyle: FontStyle.italic,
-              ),
+            color: Colors.black,
+          ),
         ),
       ),
     );
@@ -133,7 +140,7 @@ class _MessageWidgetState extends State<MessageWidget>
     var row = [
       Text(
         'Replies: ${widget.message.replyCount}',
-        style: StreamChatTheme.of(context).messageTheme.replies,
+        style: messageTheme.replies,
       ),
       Transform(
         transform: Matrix4.rotationY(isMyMessage ? 0 : pi),
@@ -220,13 +227,11 @@ class _MessageWidgetState extends State<MessageWidget>
                                       Text(
                                         attachment.title,
                                         overflow: TextOverflow.ellipsis,
-                                        style: StreamChatTheme.of(context)
+                                        style:
-                                            .messageTheme
+                                            messageTheme.messageText.copyWith(
-                                            .messageText
+                                          color: Colors.blue,
-                                            .copyWith(
+                                          fontWeight: FontWeight.bold,
-                                              color: Colors.blue,
+                                        ),
-                                              fontWeight: FontWeight.bold,
-                                            ),
                                       ),
                                       Text(
                                         Uri.parse(attachment.thumbUrl)
@@ -238,9 +243,7 @@ class _MessageWidgetState extends State<MessageWidget>
                                             .reversed
                                             .join('.'),
                                         overflow: TextOverflow.ellipsis,
-                                        style: StreamChatTheme.of(context)
+                                        style: messageTheme.createdAt,
-                                            .messageTheme
-                                            .createdAt,
                                       ),
                                     ],
                                   ),
@@ -321,9 +324,7 @@ class _MessageWidgetState extends State<MessageWidget>
                           styleSheet:
                               MarkdownStyleSheet.fromTheme(Theme.of(context))
                                   .copyWith(
-                            p: StreamChatTheme.of(context)
+                            p: messageTheme.messageText,
-                                .messageTheme
-                                .messageText,
                           ),
                         ),
                       ),
@@ -602,7 +603,7 @@ class _MessageWidgetState extends State<MessageWidget>
       padding: const EdgeInsets.only(top: 5.0),
       child: Text(
         formatDate(widget.message.createdAt.toLocal(), [HH, ':', nn]),
-        style: StreamChatTheme.of(context).messageTheme.createdAt,
+        style: messageTheme.createdAt,
       ),
     );
   }
@@ -616,11 +617,7 @@ class _MessageWidgetState extends State<MessageWidget>
         topRight: Radius.circular((isMyMessage && isLastUser) ? 2 : 16),
         bottomRight: Radius.circular(isMyMessage ? 2 : 16),
       ),
-      color: isMyMessage
+      color: messageTheme.messageBackgroundColor,
-          ? StreamChatTheme.of(context).messageTheme.ownMessageBackgroundColor
-          : StreamChatTheme.of(context)
-              .messageTheme
-              .otherMessageBackgroundColor,
     );
   }
 

lib/src/stream_chat.dart

@@ -107,20 +107,32 @@ class StreamChatState extends State<StreamChat> {
         messageInputButtonTheme:
             themeData?.channelTheme?.messageInputButtonTheme,
       ),
-      messageTheme: defaultTheme.messageTheme.copyWith(
+      ownMessageTheme: defaultTheme.ownMessageTheme.copyWith(
-        replies: themeData?.messageTheme?.replies,
+        replies: themeData?.ownMessageTheme?.replies,
-        createdAt: themeData?.messageTheme?.createdAt,
+        createdAt: themeData?.ownMessageTheme?.createdAt,
-        messageText: themeData?.messageTheme?.messageText,
+        messageText: themeData?.ownMessageTheme?.messageText,
-        otherMessageBackgroundColor:
+        messageBackgroundColor:
-            themeData?.messageTheme?.otherMessageBackgroundColor,
+            themeData?.ownMessageTheme?.messageBackgroundColor,
-        ownMessageBackgroundColor:
+        fontFamily: themeData?.ownMessageTheme?.fontFamily,
-            themeData?.messageTheme?.ownMessageBackgroundColor,
+        messageAuthor: themeData?.ownMessageTheme?.messageAuthor,
-        fontFamily: themeData?.messageTheme?.fontFamily,
+        messageMention: themeData?.ownMessageTheme?.messageMention,
-        messageAuthor: themeData?.messageTheme?.messageAuthor,
+        avatarTheme: defaultTheme.ownMessageTheme.avatarTheme.copyWith(
-        messageMention: themeData?.messageTheme?.messageMention,
+          constraints: themeData?.ownMessageTheme?.avatarTheme?.constraints,
-        avatarTheme: defaultTheme.messageTheme.avatarTheme.copyWith(
+          borderRadius: themeData?.ownMessageTheme?.avatarTheme?.borderRadius,
-          constraints: themeData?.messageTheme?.avatarTheme?.constraints,
+        ),
-          borderRadius: themeData?.messageTheme?.avatarTheme?.borderRadius,
+      ),
+      otherMessageTheme: defaultTheme.otherMessageTheme.copyWith(
+        replies: themeData?.otherMessageTheme?.replies,
+        createdAt: themeData?.otherMessageTheme?.createdAt,
+        messageText: themeData?.otherMessageTheme?.messageText,
+        messageBackgroundColor:
+            themeData?.otherMessageTheme?.messageBackgroundColor,
+        fontFamily: themeData?.otherMessageTheme?.fontFamily,
+        messageAuthor: themeData?.otherMessageTheme?.messageAuthor,
+        messageMention: themeData?.otherMessageTheme?.messageMention,
+        avatarTheme: defaultTheme.otherMessageTheme.avatarTheme.copyWith(
+          constraints: themeData?.otherMessageTheme?.avatarTheme?.constraints,
+          borderRadius: themeData?.otherMessageTheme?.avatarTheme?.borderRadius,
         ),
       ),
       accentColor: themeData?.accentColor,

lib/src/stream_chat_theme.dart

@@ -28,7 +28,8 @@ class StreamChatThemeData {
   final Color accentColor;
   final ChannelPreviewTheme channelPreviewTheme;
   final ChannelTheme channelTheme;
-  final MessageTheme messageTheme;
+  final MessageTheme ownMessageTheme;
+  final MessageTheme otherMessageTheme;
 
   StreamChatThemeData({
     this.primaryColor,
@@ -36,7 +37,8 @@ class StreamChatThemeData {
     this.accentColor,
     this.channelPreviewTheme,
     this.channelTheme,
-    this.messageTheme,
+    this.otherMessageTheme,
+    this.ownMessageTheme,
   });
 
   factory StreamChatThemeData.fromTheme(ThemeData theme) {
@@ -52,8 +54,13 @@ class StreamChatThemeData {
           theme.accentColor,
         ]),
       ),
-      messageTheme: MessageTheme(
+      ownMessageTheme: MessageTheme(
-        replies: defaultTheme.messageTheme.replies.copyWith(
+        replies: defaultTheme.ownMessageTheme.replies.copyWith(
+          color: theme.accentColor,
+        ),
+      ),
+      otherMessageTheme: MessageTheme(
+        replies: defaultTheme.ownMessageTheme.replies.copyWith(
           color: theme.accentColor,
         ),
       ),
@@ -66,7 +73,8 @@ class StreamChatThemeData {
     Color accentColor,
     ChannelPreviewTheme channelPreviewTheme,
     ChannelTheme channelTheme,
-    MessageTheme messageTheme,
+    MessageTheme ownMessageTheme,
+    MessageTheme otherMessageTheme,
   }) =>
       StreamChatThemeData(
         primaryColor: primaryColor ?? this.primaryColor,
@@ -97,27 +105,44 @@ class StreamChatThemeData {
                   this.channelTheme.inputBackground,
             ) ??
             this.channelTheme,
-        messageTheme: messageTheme?.copyWith(
+        ownMessageTheme: ownMessageTheme?.copyWith(
-              messageText:
+              messageText: ownMessageTheme?.messageText ??
-                  messageTheme?.messageText ?? this.messageTheme.messageText,
+                  this.ownMessageTheme.messageText,
-              messageAuthor: messageTheme?.messageAuthor ??
+              messageAuthor: ownMessageTheme?.messageAuthor ??
-                  this.messageTheme.messageAuthor,
+                  this.ownMessageTheme.messageAuthor,
-              messageMention: messageTheme?.messageMention ??
+              messageMention: ownMessageTheme?.messageMention ??
-                  this.messageTheme.messageMention,
+                  this.ownMessageTheme.messageMention,
-              createdAt: messageTheme?.createdAt ?? this.messageTheme.createdAt,
+              createdAt:
-              replies: messageTheme?.replies ?? this.messageTheme.replies,
+                  ownMessageTheme?.createdAt ?? this.ownMessageTheme.createdAt,
-              fontFamily:
+              replies: ownMessageTheme?.replies ?? this.ownMessageTheme.replies,
-                  messageTheme?.fontFamily ?? this.messageTheme.fontFamily,
+              fontFamily: ownMessageTheme?.fontFamily ??
-              ownMessageBackgroundColor:
+                  this.ownMessageTheme.fontFamily,
-                  messageTheme?.ownMessageBackgroundColor ??
+              messageBackgroundColor: ownMessageTheme?.messageBackgroundColor ??
-                      this.messageTheme.ownMessageBackgroundColor,
+                  this.ownMessageTheme.messageBackgroundColor,
-              otherMessageBackgroundColor:
+              avatarTheme: ownMessageTheme?.avatarTheme ??
-                  messageTheme?.otherMessageBackgroundColor ??
+                  this.ownMessageTheme.avatarTheme,
-                      this.messageTheme.otherMessageBackgroundColor,
-              avatarTheme:
-                  messageTheme?.avatarTheme ?? this.messageTheme.avatarTheme,
             ) ??
-            this.messageTheme,
+            this.ownMessageTheme,
+        otherMessageTheme: otherMessageTheme?.copyWith(
+              messageText: otherMessageTheme?.messageText ??
+                  this.otherMessageTheme.messageText,
+              messageAuthor: otherMessageTheme?.messageAuthor ??
+                  this.otherMessageTheme.messageAuthor,
+              messageMention: otherMessageTheme?.messageMention ??
+                  this.otherMessageTheme.messageMention,
+              createdAt: otherMessageTheme?.createdAt ??
+                  this.otherMessageTheme.createdAt,
+              replies:
+                  otherMessageTheme?.replies ?? this.otherMessageTheme.replies,
+              fontFamily: otherMessageTheme?.fontFamily ??
+                  this.otherMessageTheme.fontFamily,
+              messageBackgroundColor:
+                  otherMessageTheme?.messageBackgroundColor ??
+                      this.otherMessageTheme.messageBackgroundColor,
+              avatarTheme: otherMessageTheme?.avatarTheme ??
+                  this.otherMessageTheme.avatarTheme,
+            ) ??
+            this.otherMessageTheme,
       );
 
   static StreamChatThemeData getDefaultTheme(ThemeData theme) {
@@ -174,7 +199,7 @@ class StreamChatThemeData {
           Color(0xFF0076FF),
         ]),
       ),
-      messageTheme: MessageTheme(
+      ownMessageTheme: MessageTheme(
         messageText: TextStyle(
           fontSize: 15,
           color: Colors.black,
@@ -188,8 +213,30 @@ class StreamChatThemeData {
           fontWeight: FontWeight.bold,
           fontSize: 12,
         ),
-        ownMessageBackgroundColor: Color(0xffebebeb),
+        messageBackgroundColor: Color(0xffebebeb),
-        otherMessageBackgroundColor: Colors.white,
+        avatarTheme: AvatarTheme(
+          borderRadius: BorderRadius.circular(20),
+          constraints: BoxConstraints.tightFor(
+            height: 32,
+            width: 32,
+          ),
+        ),
+      ),
+      otherMessageTheme: MessageTheme(
+        messageText: TextStyle(
+          fontSize: 15,
+          color: Colors.black,
+        ),
+        createdAt: TextStyle(
+          color: Colors.black.withOpacity(.5),
+          fontSize: 11,
+        ),
+        replies: TextStyle(
+          color: accentColor,
+          fontWeight: FontWeight.bold,
+          fontSize: 12,
+        ),
+        messageBackgroundColor: Colors.white,
         avatarTheme: AvatarTheme(
           borderRadius: BorderRadius.circular(20),
           constraints: BoxConstraints.tightFor(
@@ -269,8 +316,7 @@ class MessageTheme {
   final TextStyle createdAt;
   final TextStyle replies;
   final String fontFamily;
-  final Color ownMessageBackgroundColor;
+  final Color messageBackgroundColor;
-  final Color otherMessageBackgroundColor;
   final AvatarTheme avatarTheme;
 
   const MessageTheme({
@@ -279,8 +325,7 @@ class MessageTheme {
     this.messageAuthor,
     this.messageMention,
     this.fontFamily,
-    this.ownMessageBackgroundColor,
+    this.messageBackgroundColor,
-    this.otherMessageBackgroundColor,
     this.avatarTheme,
     this.createdAt,
   });
@@ -292,7 +337,7 @@ class MessageTheme {
     TextStyle createdAt,
     TextStyle replies,
     String fontFamily,
-    Color ownMessageBackgroundColor,
+    Color messageBackgroundColor,
     Color otherMessageBackgroundColor,
     AvatarTheme avatarTheme,
   }) =>
@@ -302,10 +347,8 @@ class MessageTheme {
         messageMention: messageMention ?? this.messageMention,
         createdAt: createdAt ?? this.createdAt,
         fontFamily: fontFamily ?? this.fontFamily,
-        ownMessageBackgroundColor:
+        messageBackgroundColor:
-            ownMessageBackgroundColor ?? this.ownMessageBackgroundColor,
+            messageBackgroundColor ?? this.messageBackgroundColor,
-        otherMessageBackgroundColor:
-            otherMessageBackgroundColor ?? this.otherMessageBackgroundColor,
         avatarTheme: avatarTheme ?? this.avatarTheme,
         replies: replies ?? this.replies,
       );

lib/src/user_avatar.dart

@@ -19,10 +19,12 @@ class UserAvatar extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.all(4),
       constraints:
-          StreamChatTheme.of(context).messageTheme.avatarTheme.constraints,
+          StreamChatTheme.of(context).ownMessageTheme.avatarTheme.constraints,
       decoration: BoxDecoration(
-        borderRadius:
+        borderRadius: StreamChatTheme.of(context)
-            StreamChatTheme.of(context).messageTheme.avatarTheme.borderRadius,
+            .ownMessageTheme
+            .avatarTheme
+            .borderRadius,
         color: StreamChatTheme.of(context).accentColor,
       ),
       child: user.extraData?.containsKey('image') ?? false