Merge branch 'feature/new-ui' into qa-fix-dj

example/android/app/build.gradle

@@ -31,15 +31,15 @@ android {
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
     }
-
     lintOptions {
         disable 'InvalidPackage'
+        checkReleaseBuilds false
     }
 
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.example.example"
-        minSdkVersion 16
+        minSdkVersion 21
         targetSdkVersion 28
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

example/android/build.gradle

@@ -6,7 +6,7 @@ buildscript {
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.1.0'
+        classpath 'com.android.tools.build:gradle:3.6.2'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
         classpath 'com.google.gms:google-services:4.3.2'
     }

example/ios/Podfile.lock

@@ -80,6 +80,8 @@ PODS:
   - Flutter (1.0.0)
   - flutter_apns (0.0.1):
     - Flutter
+  - flutter_app_badger (0.0.1):
+    - Flutter
   - flutter_keyboard_visibility (0.0.1):
     - Flutter
   - flutter_local_notifications (0.0.1):
@@ -160,6 +162,7 @@ DEPENDENCIES:
   - firebase_messaging (from `.symlinks/plugins/firebase_messaging/ios`)
   - Flutter (from `Flutter`)
   - flutter_apns (from `.symlinks/plugins/flutter_apns/ios`)
+  - flutter_app_badger (from `.symlinks/plugins/flutter_app_badger/ios`)
   - flutter_keyboard_visibility (from `.symlinks/plugins/flutter_keyboard_visibility/ios`)
   - flutter_local_notifications (from `.symlinks/plugins/flutter_local_notifications/ios`)
   - image_picker (from `.symlinks/plugins/image_picker/ios`)
@@ -207,6 +210,8 @@ EXTERNAL SOURCES:
     :path: Flutter
   flutter_apns:
     :path: ".symlinks/plugins/flutter_apns/ios"
+  flutter_app_badger:
+    :path: ".symlinks/plugins/flutter_app_badger/ios"
   flutter_keyboard_visibility:
     :path: ".symlinks/plugins/flutter_keyboard_visibility/ios"
   flutter_local_notifications:
@@ -244,6 +249,7 @@ SPEC CHECKSUMS:
   FirebaseMessaging: 29543feb343b09546ab3aa04d008ee8595b43c44
   Flutter: 0e3d915762c693b495b44d77113d4970485de6ec
   flutter_apns: f516b118e423fe7c0a38771180549c4d6cb67c2f
+  flutter_app_badger: 65de4d6f0c34a891df49e6cfb8a1c0496426fa68
   flutter_keyboard_visibility: 0339d06371254c3eb25eeb90ba8d17dca8f9c069
   flutter_local_notifications: 0c0b1ae97e741e1521e4c1629a459d04b9aec743
   FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a

example/ios/Runner.xcodeproj/project.pbxproj

@@ -322,6 +322,7 @@
 				"${BUILT_PRODUCTS_DIR}/SwiftyGif/SwiftyGif.framework",
 				"${BUILT_PRODUCTS_DIR}/file_picker/file_picker.framework",
 				"${BUILT_PRODUCTS_DIR}/flutter_apns/flutter_apns.framework",
+				"${BUILT_PRODUCTS_DIR}/flutter_app_badger/flutter_app_badger.framework",
 				"${BUILT_PRODUCTS_DIR}/flutter_keyboard_visibility/flutter_keyboard_visibility.framework",
 				"${BUILT_PRODUCTS_DIR}/flutter_local_notifications/flutter_local_notifications.framework",
 				"${BUILT_PRODUCTS_DIR}/image_picker/image_picker.framework",
@@ -350,6 +351,7 @@
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SwiftyGif.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/file_picker.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_apns.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_app_badger.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_keyboard_visibility.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_local_notifications.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/image_picker.framework",

example/ios/Runner/Info.plist

@@ -54,5 +54,9 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIBackgroundModes</key>
+    <array>
+        <string>remote-notification</string>
+    </array>
 </dict>
 </plist>

example/lib/main.dart

@@ -76,7 +76,7 @@ void main() async {
 
   await client.setUser(
     User(id: 'super-band-9', extraData: {
-      'name': 'John Doe',
+      'name': 'Jonathan Doe',
     }),
     'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoic3VwZXItYmFuZC05In0.0L6lGoeLwkz0aZRUcpZKsvaXtNEDHBcezVTZ0oPq40A',
   );

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.32+34
+version: 1.0.36+38
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/message_actions_modal.dart

@@ -43,26 +43,30 @@ class MessageActionsModal extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
+    final ownId = StreamChat.of(context).user.id;
-      children: [
+    return GestureDetector(
-        Positioned.fill(
-          child: GestureDetector(
       behavior: HitTestBehavior.translucent,
       onTap: () {
         Navigator.pop(context);
       },
+      child: Stack(
+        children: [
+          Positioned.fill(
             child: BackdropFilter(
               filter: ImageFilter.blur(
-                sigmaX: 10,
+                sigmaX: 10.8731,
-                sigmaY: 10,
+                sigmaY: 10.8731,
               ),
               child: Container(
-                color: Colors.transparent,
+                color: Colors.black.withOpacity(0.2),
               ),
             ),
           ),
-        ),
+          Center(
-        Column(
+            child: SingleChildScrollView(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(vertical: 8.0),
+                child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: <Widget>[
@@ -75,18 +79,22 @@ class MessageActionsModal extends StatelessWidget {
                           messageTheme: messageTheme,
                         ),
                       ),
-            AbsorbPointer(
+                    IgnorePointer(
                       child: MessageWidget(
                         key: Key('MessageWidget'),
                         reverse: reverse,
-                message: message.text.length > 200
+                        message: message.copyWith(
-                    ? message.copyWith(
+                          text: message.text.length > 200
-                        text: '${message.text.substring(0, 200)}...')
+                              ? '${message.text.substring(0, 200)}...'
-                    : message,
+                              : message.text,
+                        ),
                         messageTheme: messageTheme,
                         showReactions: false,
                         showUsername: false,
                         showReplyIndicator: false,
+                        showUserAvatar: message.user.id == ownId
+                            ? DisplayWidget.gone
+                            : DisplayWidget.show,
                         showTimestamp: false,
                         showSendingIndicator: DisplayWidget.gone,
                         shape: messageShape,
@@ -110,12 +118,14 @@ class MessageActionsModal extends StatelessWidget {
                             context: context,
                             tiles: [
                               if (showReply &&
-                          (message.status == MessageSendingStatus.SENT ||
+                                  (message.status ==
+                                          MessageSendingStatus.SENT ||
                                       message.status == null) &&
                                   message.parentId == null)
                                 _buildReplyButton(context),
                               if (showEditMessage) _buildEditMessage(context),
-                      if (showDeleteMessage) _buildDeleteButton(context),
+                              if (showDeleteMessage)
+                                _buildDeleteButton(context),
                               if (showCopyMessage) _buildCopyButton(context),
                             ],
                           ).toList(),
@@ -124,7 +134,11 @@ class MessageActionsModal extends StatelessWidget {
                     )
                   ],
                 ),
+              ),
+            ),
+          ),
         ],
+      ),
     );
   }
 

lib/src/message_reactions_modal.dart

@@ -34,26 +34,30 @@ class MessageReactionsModal extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
+    final ownId = StreamChat.of(context).user.id;
-      children: [
+    return GestureDetector(
-        Positioned.fill(
-          child: GestureDetector(
       behavior: HitTestBehavior.translucent,
       onTap: () {
         Navigator.pop(context);
       },
+      child: Stack(
+        children: [
+          Positioned.fill(
             child: BackdropFilter(
               filter: ImageFilter.blur(
-                sigmaX: 10,
+                sigmaX: 10.8731,
-                sigmaY: 10,
+                sigmaY: 10.8731,
               ),
               child: Container(
-                color: Colors.transparent,
+                color: Colors.black.withOpacity(0.2),
               ),
             ),
           ),
-        ),
+          Center(
-        Column(
+            child: SingleChildScrollView(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(vertical: 8.0),
+                child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: <Widget>[
@@ -66,17 +70,21 @@ class MessageReactionsModal extends StatelessWidget {
                           messageTheme: messageTheme,
                         ),
                       ),
-            AbsorbPointer(
+                    IgnorePointer(
                       child: MessageWidget(
                         key: Key('MessageWidget'),
                         reverse: reverse,
-                message: message.text.length > 200
+                        message: message.copyWith(
-                    ? message.copyWith(
+                          text: message.text.length > 200
-                        text: '${message.text.substring(0, 200)}...')
+                              ? '${message.text.substring(0, 200)}...'
-                    : message,
+                              : message.text,
+                        ),
                         messageTheme: messageTheme,
                         showReactions: false,
                         showUsername: false,
+                        showUserAvatar: message.user.id == ownId
+                            ? DisplayWidget.gone
+                            : DisplayWidget.show,
                         showReplyIndicator: false,
                         showTimestamp: false,
                         showSendingIndicator: DisplayWidget.gone,
@@ -87,13 +95,14 @@ class MessageReactionsModal extends StatelessWidget {
                       height: 16,
                     ),
                     if (message.latestReactions?.isNotEmpty == true)
-              Container(
+                      _buildReactionCard(context),
-                constraints: BoxConstraints.loose(Size.fromHeight(400)),
+                  ],
-                child: _buildReactionCard(context),
+                ),
+              ),
+            ),
           ),
         ],
       ),
-      ],
     );
   }
 
@@ -119,30 +128,25 @@ class MessageReactionsModal extends StatelessWidget {
               ),
             ),
             Flexible(
+              child: SingleChildScrollView(
                 child: Padding(
                   padding: const EdgeInsets.only(
-                  left: 16.0,
+                    left: 18,
-                  right: 16,
+                    right: 18,
-                  bottom: 16,
+                    bottom: 26,
                   ),
-                child: GridView.builder(
+                  child: Wrap(
-                  shrinkWrap: true,
+                    spacing: 16,
-                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                    runSpacing: 22,
-                    crossAxisCount: 4,
+                    alignment: WrapAlignment.start,
-                    crossAxisSpacing: 16,
+                    children: message.latestReactions
-                    childAspectRatio: 0.75,
+                        .map((e) => _buildReaction(
-                    mainAxisSpacing: 22,
+                              e,
-                  ),
-                  itemCount: message.latestReactions.length,
-                  itemBuilder: (context, i) {
-                    final reaction = message.latestReactions[i];
-
-                    return _buildReaction(
-                      reaction,
                               currentUser,
                               context,
-                    );
+                            ))
-                  },
+                        .toList(),
+                  ),
                 ),
               ),
             ),
@@ -152,13 +156,18 @@ class MessageReactionsModal extends StatelessWidget {
     );
   }
 
-  Column _buildReaction(
+  Widget _buildReaction(
     Reaction reaction,
     User currentUser,
     BuildContext context,
   ) {
     final isCurrentUser = reaction.user.id == currentUser.id;
-    return Column(
+    return ConstrainedBox(
+      constraints: BoxConstraints.loose(Size(
+        64,
+        98,
+      )),
+      child: Column(
         mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.center,
@@ -175,17 +184,16 @@ class MessageReactionsModal extends StatelessWidget {
                 borderRadius: BorderRadius.circular(32),
               ),
               Positioned(
+                child: Align(
+                  alignment: Alignment.centerLeft,
                   child: ReactionBubble(
                     reactions: [reaction],
-                borderColor: isCurrentUser
+                    borderColor: messageTheme.reactionsBorderColor,
-                    ? messageTheme.ownReactionsBorderColor
+                    backgroundColor: messageTheme.reactionsBackgroundColor,
-                    : messageTheme.otherReactionsBorderColor,
+                    highlightOwnReactions: false,
-                backgroundColor: isCurrentUser
-                    ? messageTheme.ownReactionsBackgroundColor
-                    : messageTheme.otherReactionsBackgroundColor,
-                flipTail: !isCurrentUser,
                   ),
-              bottom: 0,
+                ),
+                bottom: 4,
                 left: isCurrentUser ? 0 : null,
                 right: isCurrentUser ? 0 : null,
               ),
@@ -197,6 +205,7 @@ class MessageReactionsModal extends StatelessWidget {
             textAlign: TextAlign.center,
           ),
         ],
+      ),
     );
   }
 }

lib/src/message_text.dart

@@ -24,7 +24,7 @@ class MessageText extends StatelessWidget {
     final text = _replaceMentions(message.text);
     return MarkdownBody(
       data: text,
-      onTapLink: (link) {
+      onTapLink: (text, link, title) {
         if (link.startsWith('@')) {
           final mentionedUser = message.mentionedUsers.firstWhere(
             (u) => '@${u.name.replaceAll(' ', '')}' == link,

lib/src/message_widget.dart

@@ -239,20 +239,24 @@ class _MessageWidgetState extends State<MessageWidget> {
                                 8,
                           ),
                         Flexible(
+                          child: PortalEntry(
+                            portal: Container(
+                              transform: Matrix4.translationValues(-16, 2, 0),
+                              child: _buildReactionIndicator(context),
+                              constraints: BoxConstraints(maxWidth: 22 * 6.0),
+                            ),
+                            portalAnchor: Alignment(-1.0, -1.0),
+                            childAnchor: Alignment(1, -1.0),
                             child: Padding(
                               padding: widget.showReactions
                                   ? EdgeInsets.only(
                                       top: widget.message.reactionCounts
                                                   ?.isNotEmpty ==
                                               true
-                                        ? 12
+                                          ? 18
                                           : 0,
                                     )
                                   : EdgeInsets.zero,
-                            child: PortalEntry(
-                              portalAnchor: Alignment(-0.81, 0),
-                              childAnchor: Alignment.topRight,
-                              portal: _buildReactionIndicator(context),
                               child: (widget.message.isDeleted &&
                                       widget.message.status !=
                                           MessageSendingStatus.FAILED_DELETE)
@@ -378,75 +382,33 @@ class _MessageWidgetState extends State<MessageWidget> {
     );
   }
 
-  Widget _buildReactionIndicator(BuildContext context) {
+  Widget _buildReactionIndicator(
-    final otherReactions = widget.message.latestReactions
+    BuildContext context,
-            ?.where(
+  ) {
-                (element) => element.user.id != StreamChat.of(context).user.id)
+    final ownId = StreamChat.of(context).user.id;
-            ?.toList() ??
+    final reactionsMap = <String, Reaction>{};
-        [];
+    widget.message.latestReactions?.forEach((element) {
-
+      if (!reactionsMap.containsKey(element.type) || element.user.id == ownId) {
-    var rowChildren = [
+        reactionsMap[element.type] = element;
-      if (widget.message.ownReactions?.isNotEmpty == true) ...[
-        Transform.translate(
-          offset: Offset(
-            widget.reverse ? -6 : 0,
-            0,
-          ),
-          child: ReactionBubble(
-            key: ValueKey('${widget.message.id}.own'),
-            reverse: widget.reverse,
-            backgroundColor: widget.messageTheme.ownReactionsBackgroundColor,
-            borderColor: widget.messageTheme.ownReactionsBorderColor,
-            reactions: widget.message.ownReactions,
-          ),
-        ),
-        if (otherReactions.isEmpty)
-          Container(
-            width: 18,
-          ),
-      ],
-      if (otherReactions?.isNotEmpty == true) ...[
-        if (widget.message.ownReactions?.isEmpty == true)
-          Container(
-            width: 18,
-          ),
-        Transform.translate(
-          offset: Offset(
-            widget.reverse ? 0 : -6,
-            0,
-          ),
-          child: ReactionBubble(
-            key: ValueKey('${widget.message.id}.other'),
-            reactions: otherReactions,
-            reverse: widget.reverse,
-            flipTail: true,
-            backgroundColor: widget.messageTheme.otherReactionsBackgroundColor,
-            borderColor: widget.messageTheme.otherReactionsBorderColor,
-          ),
-        ),
-      ]
-    ];
-
-    if (widget.reverse) {
-      rowChildren = rowChildren.reversed.toList();
       }
+    });
+    final reactionsList = reactionsMap.values.toList()
+      ..sort((a, b) => a.user.id == ownId ? 1 : -1);
+
     return AnimatedSwitcher(
       duration: Duration(milliseconds: 300),
       child: (widget.showReactions &&
-              (widget.message.reactionCounts?.isNotEmpty == true ||
+              (widget.message.reactionCounts?.isNotEmpty == true) &&
-                  otherReactions.isNotEmpty) &&
               !widget.message.isDeleted)
-          ? Container(
+          ? GestureDetector(
-              child: GestureDetector(
               onTap: () => _showMessageReactionsModalBottomSheet(context),
-                child: FractionallySizedBox(
+              child: ReactionBubble(
-                  widthFactor: 0.5,
+                key: ValueKey('${widget.message.id}.reactions'),
-                  child: Row(
+                reverse: widget.reverse,
-                    mainAxisAlignment: MainAxisAlignment.start,
+                flipTail: widget.reverse,
-                    mainAxisSize: MainAxisSize.min,
+                backgroundColor: widget.messageTheme.reactionsBackgroundColor,
-                    children: rowChildren,
+                borderColor: widget.messageTheme.reactionsBorderColor,
-                  ),
+                reactions: reactionsList,
-                ),
               ),
             )
           : SizedBox(),
@@ -498,8 +460,8 @@ class _MessageWidgetState extends State<MessageWidget> {
         });
   }
 
-  ContinuousRectangleBorder _getDefaultShape(BuildContext context) {
+  ShapeBorder _getDefaultShape(BuildContext context) {
-    return ContinuousRectangleBorder(
+    return RoundedRectangleBorder(
       side: widget.attachmentBorderSide ??
           widget.borderSide ??
           BorderSide(
@@ -718,7 +680,7 @@ class _MessageWidgetState extends State<MessageWidget> {
       onLongPress: () => onLongPress(context),
       child: Material(
         shape: widget.shape ??
-            ContinuousRectangleBorder(
+            RoundedRectangleBorder(
               side: widget.borderSide ??
                   BorderSide(
                     color: Theme.of(context).brightness == Brightness.dark

lib/src/reaction_bubble.dart

@@ -1,6 +1,8 @@
 import 'dart:math';
 
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:stream_chat_flutter/src/reaction_icon.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 class ReactionBubble extends StatelessWidget {
@@ -11,6 +13,7 @@ class ReactionBubble extends StatelessWidget {
     @required this.backgroundColor,
     this.reverse = false,
     this.flipTail = false,
+    this.highlightOwnReactions = true,
   }) : super(key: key);
 
   final List<Reaction> reactions;
@@ -18,20 +21,22 @@ class ReactionBubble extends StatelessWidget {
   final Color backgroundColor;
   final bool reverse;
   final bool flipTail;
+  final bool highlightOwnReactions;
 
   @override
   Widget build(BuildContext context) {
     final reactionIcons = StreamChatTheme.of(context).reactionIcons;
+    final offset = reactions.length > 1 ? 16.0 : 2.0;
     return Transform(
       transform: Matrix4.rotationY(reverse ? pi : 0),
       alignment: Alignment.center,
-      child: Column(
+      child: Stack(
-        crossAxisAlignment:
+        alignment: Alignment.center,
-            flipTail ? CrossAxisAlignment.start : CrossAxisAlignment.end,
-        mainAxisSize: MainAxisSize.min,
         children: [
-          Container(
+          Transform.translate(
-            padding: const EdgeInsets.all(4),
+            offset: Offset(reverse ? offset : -offset, 0),
+            child: Container(
+              padding: const EdgeInsets.symmetric(vertical: 4),
               decoration: BoxDecoration(
                 border: Border.all(
                   color: borderColor,
@@ -39,46 +44,77 @@ class ReactionBubble extends StatelessWidget {
                 color: backgroundColor,
                 borderRadius: BorderRadius.all(Radius.circular(14)),
               ),
-            child: Wrap(
+              child: LayoutBuilder(
+                builder: (context, constraints) {
+                  return Flex(
+                    direction: Axis.horizontal,
+                    mainAxisSize: MainAxisSize.min,
                     children: [
-                ...reactions.map((reaction) {
+                      if (constraints.maxWidth < double.infinity)
-                  final reactionIcon = reactionIcons.firstWhere(
+                        ...reactions
-                    (r) => r.type == reaction.type,
+                            .take((constraints.maxWidth) ~/ 22)
-                    orElse: () => null,
+                            .map((reaction) {
+                          return _buildReaction(
+                            reactionIcons,
+                            reaction,
+                            context,
                           );
-                  if (reactionIcon == null) {
+                        }).toList(),
-                    return Text(
+                      if (constraints.maxWidth == double.infinity)
-                      '?',
+                        ...reactions.map((reaction) {
-                      style: TextStyle(
+                          return _buildReaction(
-                        color: StreamChatTheme.of(context).accentColor,
+                            reactionIcons,
+                            reaction,
+                            context,
+                          );
+                        }).toList(),
+                    ],
+                  );
+                },
+              ),
+            ),
+          ),
+          Positioned(
+            bottom: 0,
+            left: reverse ? null : 11,
+            right: !reverse ? null : 11,
+            child: _buildReactionsTail(context),
+          ),
+        ],
       ),
     );
   }
 
-                  return Icon(
+  Widget _buildReaction(
-                    reactionIcon.iconData,
+    List<ReactionIcon> reactionIcons,
-                    size: 16,
+    Reaction reaction,
-                    color: StreamChatTheme.of(context).accentColor,
+    BuildContext context,
+  ) {
+    final reactionIcon = reactionIcons.firstWhere(
+      (r) => r.type == reaction.type,
+      orElse: () => null,
     );
-                }).toList(),
+
-              ],
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: 4.0,
       ),
-          ),
+      child: Icon(
-          _buildReactionsTail(context),
+        reactionIcon?.iconData ?? Icons.help_outline_rounded,
-        ],
+        size: 16,
+        color: (!highlightOwnReactions ||
+                reaction.user.id == StreamChat.of(context).user.id)
+            ? StreamChatTheme.of(context).accentColor
+            : Colors.black.withOpacity(.5),
       ),
     );
   }
 
   Widget _buildReactionsTail(BuildContext context) {
-    final tail = Transform.translate(
+    final tail = CustomPaint(
-      offset: Offset(reactions.length > 1 ? -9 : -9, 0),
-      child: CustomPaint(
       painter: ReactionBubblePainter(
         backgroundColor,
         borderColor,
-          reactions.length,
-        ),
       ),
     );
 
@@ -97,12 +133,10 @@ class ReactionBubble extends StatelessWidget {
 class ReactionBubblePainter extends CustomPainter {
   final Color color;
   final Color borderColor;
-  final int reactionsCount;
 
   ReactionBubblePainter(
     this.color,
     this.borderColor,
-    this.reactionsCount,
   );
 
   @override
@@ -125,7 +159,7 @@ class ReactionBubblePainter extends CustomPainter {
     final path = Path();
     path.addOval(
       Rect.fromCircle(
-        center: Offset(6, 2),
+        center: Offset(4, 3),
         radius: 2,
       ),
     );
@@ -139,7 +173,7 @@ class ReactionBubblePainter extends CustomPainter {
 
     final path = Path();
     path.addOval(Rect.fromCircle(
-      center: Offset(6, 2),
+      center: Offset(4, 3),
       radius: 2,
     ));
     canvas.drawPath(path, paint);
@@ -151,13 +185,13 @@ class ReactionBubblePainter extends CustomPainter {
       ..strokeWidth = 1
       ..style = PaintingStyle.stroke;
 
-    final dy = reactionsCount > 1 ? -2.0 : -3.0;
+    final dy = -2.2;
-    final startAngle = reactionsCount > 1 ? 1.08 : 1.16;
+    final startAngle = 1.1;
-    final sweepAngle = reactionsCount > 1 ? 0.95 : 1.1;
+    final sweepAngle = 1.2;
     final path = Path();
     path.addArc(
       Rect.fromCircle(
-        center: Offset(0, dy),
+        center: Offset(1, dy),
         radius: 4,
       ),
       -pi * startAngle,
@@ -171,13 +205,13 @@ class ReactionBubblePainter extends CustomPainter {
       ..color = color
       ..strokeWidth = 1;
 
-    final dy = reactionsCount > 1 ? -2.0 : -3.0;
+    final dy = -2.2;
-    final startAngle = reactionsCount > 1 ? 1 : 1.16;
+    final startAngle = 1;
-    final sweepAngle = reactionsCount > 1 ? 1.2 : 1;
+    final sweepAngle = 1.3;
     final path = Path();
     path.addArc(
       Rect.fromCircle(
-        center: Offset(0, dy),
+        center: Offset(1, dy),
         radius: 4,
       ),
       -pi * startAngle,

lib/src/reaction_picker.dart

@@ -26,7 +26,7 @@ class ReactionPicker extends StatelessWidget {
       fit: StackFit.passthrough,
       children: [
         Material(
-          color: messageTheme.ownReactionsBackgroundColor,
+          color: messageTheme.reactionsBackgroundColor,
           clipBehavior: Clip.hardEdge,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(24),
@@ -45,7 +45,7 @@ class ReactionPicker extends StatelessWidget {
                   reactionIcon.iconData,
                   color: ownReactionIndex != -1
                       ? StreamChatTheme.of(context).accentColor
-                      : Theme.of(context).iconTheme.color,
+                      : Theme.of(context).iconTheme.color.withOpacity(.5),
                 ),
                 onPressed: () {
                   if (ownReactionIndex != -1) {
@@ -69,9 +69,8 @@ class ReactionPicker extends StatelessWidget {
           bottom: 0,
           child: CustomPaint(
             painter: ReactionBubblePainter(
-              messageTheme.ownReactionsBackgroundColor,
+              messageTheme.reactionsBackgroundColor,
-              messageTheme.ownReactionsBorderColor,
+              messageTheme.reactionsBorderColor,
-              2,
             ),
           ),
         ),

lib/src/stream_chat.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_app_badger/flutter_app_badger.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
 
@@ -129,14 +130,9 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
           constraints: themeData?.ownMessageTheme?.avatarTheme?.constraints,
           borderRadius: themeData?.ownMessageTheme?.avatarTheme?.borderRadius,
         ),
-        otherReactionsBorderColor:
+        reactionsBorderColor: themeData?.ownMessageTheme?.reactionsBorderColor,
-            themeData?.ownMessageTheme?.otherReactionsBorderColor,
+        reactionsBackgroundColor:
-        otherReactionsBackgroundColor:
+            themeData?.ownMessageTheme?.reactionsBackgroundColor,
-            themeData?.ownMessageTheme?.otherReactionsBackgroundColor,
-        ownReactionsBackgroundColor:
-            themeData?.ownMessageTheme?.ownReactionsBackgroundColor,
-        ownReactionsBorderColor:
-            themeData?.ownMessageTheme?.ownReactionsBorderColor,
       ),
       otherMessageTheme: defaultTheme.otherMessageTheme.copyWith(
         replies: themeData?.otherMessageTheme?.replies,
@@ -150,14 +146,10 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
           constraints: themeData?.otherMessageTheme?.avatarTheme?.constraints,
           borderRadius: themeData?.otherMessageTheme?.avatarTheme?.borderRadius,
         ),
-        otherReactionsBorderColor:
+        reactionsBorderColor:
-            themeData?.otherMessageTheme?.otherReactionsBorderColor,
+            themeData?.otherMessageTheme?.reactionsBorderColor,
-        otherReactionsBackgroundColor:
+        reactionsBackgroundColor:
-            themeData?.otherMessageTheme?.otherReactionsBackgroundColor,
+            themeData?.otherMessageTheme?.reactionsBackgroundColor,
-        ownReactionsBackgroundColor:
-            themeData?.otherMessageTheme?.ownReactionsBackgroundColor,
-        ownReactionsBorderColor:
-            themeData?.otherMessageTheme?.ownReactionsBorderColor,
       ),
       accentColor: themeData?.accentColor,
       secondaryColor: themeData?.secondaryColor,
@@ -186,6 +178,13 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
   void initState() {
     super.initState();
     WidgetsBinding.instance.addObserver(this);
+    client.state?.totalUnreadCountStream?.listen((count) {
+      if (count > 0) {
+        FlutterAppBadger.updateBadgeCount(count);
+      } else {
+        FlutterAppBadger.removeBadge();
+      }
+    });
   }
 
   StreamSubscription _newMessageSubscription;

lib/src/stream_chat_theme.dart

@@ -220,8 +220,8 @@ class StreamChatThemeData {
     return StreamChatThemeData(
       accentColor: accentColor,
       primaryColor: isDark ? Colors.black : Colors.white,
-      primaryIconTheme:
+      primaryIconTheme: IconThemeData(
-          IconThemeData(color: isDark ? Colors.white : Colors.black),
+          color: isDark ? Colors.white : Colors.black.withOpacity(.5)),
       defaultChannelImage: (context, channel) => SizedBox(),
       backgroundColor: isDark ? Colors.black : Colors.white,
       defaultUserImage: (context, user) => Center(
@@ -287,7 +287,7 @@ class StreamChatThemeData {
       ),
       ownMessageTheme: MessageTheme(
         messageText: TextStyle(
-          fontSize: 15,
+          fontSize: 14.5,
           color: isDark ? Colors.white : Colors.black,
         ),
         createdAt: TextStyle(
@@ -302,12 +302,8 @@ class StreamChatThemeData {
           fontSize: 12,
         ),
         messageBackgroundColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA),
-        ownReactionsBackgroundColor:
+        reactionsBackgroundColor: isDark ? Colors.black : Colors.white,
-            isDark ? Color(0xff191919) : Color(0xffEAEAEA),
+        reactionsBorderColor: isDark ? Color(0xff191919) : Color(0xffEAEAEA),
-        ownReactionsBorderColor: isDark ? Colors.black : Colors.white,
-        otherReactionsBackgroundColor: isDark ? Colors.black : Colors.white,
-        otherReactionsBorderColor:
-            isDark ? Color(0xff191919) : Color(0xffEAEAEA),
         avatarTheme: AvatarTheme(
           borderRadius: BorderRadius.circular(20),
           constraints: BoxConstraints.tightFor(
@@ -320,14 +316,11 @@ class StreamChatThemeData {
         ),
       ),
       otherMessageTheme: MessageTheme(
-        ownReactionsBackgroundColor:
+        reactionsBackgroundColor:
-            isDark ? Color(0xff191919) : Color(0xffEAEAEA),
-        ownReactionsBorderColor: isDark ? Colors.black : Colors.white,
-        otherReactionsBackgroundColor: isDark ? Colors.black : Colors.white,
-        otherReactionsBorderColor:
             isDark ? Color(0xff191919) : Color(0xffEAEAEA),
+        reactionsBorderColor: isDark ? Colors.black : Colors.white,
         messageText: TextStyle(
-          fontSize: 15,
+          fontSize: 14.5,
           color: isDark ? Colors.white : Colors.black,
         ),
         createdAt: TextStyle(
@@ -457,10 +450,8 @@ class MessageTheme {
   final TextStyle createdAt;
   final TextStyle replies;
   final Color messageBackgroundColor;
-  final Color ownReactionsBackgroundColor;
+  final Color reactionsBackgroundColor;
-  final Color ownReactionsBorderColor;
+  final Color reactionsBorderColor;
-  final Color otherReactionsBackgroundColor;
-  final Color otherReactionsBorderColor;
   final AvatarTheme avatarTheme;
 
   const MessageTheme({
@@ -469,10 +460,8 @@ class MessageTheme {
     this.messageAuthor,
     this.messageLinks,
     this.messageBackgroundColor,
-    this.ownReactionsBackgroundColor,
+    this.reactionsBackgroundColor,
-    this.ownReactionsBorderColor,
+    this.reactionsBorderColor,
-    this.otherReactionsBackgroundColor,
-    this.otherReactionsBorderColor,
     this.avatarTheme,
     this.createdAt,
   });
@@ -485,10 +474,8 @@ class MessageTheme {
     TextStyle replies,
     Color messageBackgroundColor,
     AvatarTheme avatarTheme,
-    Color ownReactionsBackgroundColor,
+    Color reactionsBackgroundColor,
-    Color ownReactionsBorderColor,
+    Color reactionsBorderColor,
-    Color otherReactionsBackgroundColor,
-    Color otherReactionsBorderColor,
   }) =>
       MessageTheme(
         messageText: messageText ?? this.messageText,
@@ -499,14 +486,9 @@ class MessageTheme {
             messageBackgroundColor ?? this.messageBackgroundColor,
         avatarTheme: avatarTheme ?? this.avatarTheme,
         replies: replies ?? this.replies,
-        ownReactionsBackgroundColor:
+        reactionsBackgroundColor:
-            ownReactionsBackgroundColor ?? this.ownReactionsBackgroundColor,
+            reactionsBackgroundColor ?? this.reactionsBackgroundColor,
-        ownReactionsBorderColor:
+        reactionsBorderColor: reactionsBorderColor ?? this.reactionsBorderColor,
-            ownReactionsBorderColor ?? this.ownReactionsBorderColor,
-        otherReactionsBackgroundColor:
-            otherReactionsBackgroundColor ?? this.otherReactionsBackgroundColor,
-        otherReactionsBorderColor:
-            otherReactionsBorderColor ?? this.otherReactionsBorderColor,
       );
 }
 

pubspec.yaml

@@ -11,16 +11,17 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  flutter_app_badger: ^1.1.2
   photo_view: ^0.10.1
   rxdart: ^0.24.1
   jiffy: ^3.0.1
   flutter_portal: ^0.3.0
   cached_network_image: ^2.2.0+1
-  flutter_markdown: ^0.4.2
+  flutter_markdown: ^0.5.0
   url_launcher: ^5.4.11
-  video_player: ^0.10.11+1
+  video_player: ^0.10.12+5
   chewie: ^0.9.10
-  file_picker: ^2.0.0
+  file_picker: ^2.0.8+1
   image_picker: ^0.6.7+2
   flutter_keyboard_visibility: ^3.2.1
   stream_chat: ^0.2.10

test/src/message_reaction_modal_test.dart

@@ -10,13 +10,21 @@ void main() {
   testWidgets(
     'it should show one thumbs from the picker',
     (WidgetTester tester) async {
+      final client = MockClient();
+      final clientState = MockClientState();
       final themeData = ThemeData();
+
+      when(client.state).thenReturn(clientState);
+      when(clientState.user).thenReturn(OwnUser(id: 'user-id'));
+
       final streamTheme = StreamChatThemeData.getDefaultTheme(themeData);
+
       await tester.pumpWidget(
         MaterialApp(
           theme: themeData,
-          home: StreamChatTheme(
+          home: StreamChat(
-            data: streamTheme,
+            client: client,
+            streamChatThemeData: streamTheme,
             child: MessageReactionsModal(
               message: Message(
                 id: 'test',

test/src/reaction_bubble_test.dart

@@ -1,8 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:mockito/mockito.dart';
 import 'package:stream_chat_flutter/src/reaction_bubble.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import 'mocks.dart';
+
 void main() {
   testWidgets(
     'it should show no reactions',
@@ -29,17 +32,25 @@ void main() {
   testWidgets(
     'it should show a thumb up',
     (WidgetTester tester) async {
+      final client = MockClient();
+      final clientState = MockClientState();
       final themeData = ThemeData();
+
+      when(client.state).thenReturn(clientState);
+      when(clientState.user).thenReturn(OwnUser(id: 'user-id'));
+
       await tester.pumpWidget(
         MaterialApp(
           theme: themeData,
-          home: StreamChatTheme(
+          home: StreamChat(
-            data: StreamChatThemeData.getDefaultTheme(themeData),
+            client: client,
+            streamChatThemeData: StreamChatThemeData.getDefaultTheme(themeData),
             child: Container(
               child: ReactionBubble(
                 reactions: [
                   Reaction(
                     type: 'thumbs_up',
+                    user: User(id: 'test'),
                   ),
                 ],
                 borderColor: Colors.black,
@@ -56,20 +67,29 @@ void main() {
   testWidgets(
     'it should show two reactions',
     (WidgetTester tester) async {
+      final client = MockClient();
+      final clientState = MockClientState();
       final themeData = ThemeData();
+
+      when(client.state).thenReturn(clientState);
+      when(clientState.user).thenReturn(OwnUser(id: 'user-id'));
+
       await tester.pumpWidget(
         MaterialApp(
           theme: themeData,
-          home: StreamChatTheme(
+          home: StreamChat(
-            data: StreamChatThemeData.getDefaultTheme(themeData),
+            client: client,
+            streamChatThemeData: StreamChatThemeData.getDefaultTheme(themeData),
             child: Container(
               child: ReactionBubble(
                 reactions: [
                   Reaction(
                     type: 'thumbs_up',
+                    user: User(id: 'test'),
                   ),
                   Reaction(
                     type: 'love',
+                    user: User(id: 'test'),
                   ),
                 ],
                 borderColor: Colors.black,