Merge branch 'feature/new-ui' into feat/channel-search

lib/src/channel_bottom_sheet.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/utils.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 import 'channel_info.dart';
 import 'channel_name.dart';
@@ -12,13 +13,11 @@ import 'user_avatar.dart';
 class ChannelBottomSheet extends StatelessWidget {
   const ChannelBottomSheet({
     Key key,
-    @required this.channel,
   }) : super(key: key);
 
-  final Channel channel;
-
   @override
   Widget build(BuildContext context) {
+    final channel = StreamChannel.of(context).channel;
     return SafeArea(
       child: Padding(
         padding: const EdgeInsets.all(8.0),

lib/src/channel_list_view.dart

@@ -511,7 +511,10 @@ class _ChannelListViewState extends State<ChannelListView>
                         ),
                         context: context,
                         builder: (context) {
-                          return ChannelBottomSheet(channel: channel);
+                          return StreamChannel(
+                            child: ChannelBottomSheet(),
+                            channel: channel,
+                          );
                         },
                       );
                     },

lib/src/channel_name.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:stream_chat/stream_chat.dart';
 
 import '../stream_chat_flutter.dart';
@@ -25,6 +26,8 @@ class ChannelName extends StatelessWidget {
   Widget build(BuildContext context) {
     final client = StreamChat.of(context);
     final channel = this.channel ?? StreamChannel.of(context).channel;
+    return LayoutBuilder(
+      builder: (context, constraints) {
         return StreamBuilder<Map<String, dynamic>>(
           stream: channel.extraDataStream,
           initialData: channel.extraData,
@@ -34,9 +37,22 @@ class ChannelName extends StatelessWidget {
               final otherMembers = channel.state.members
                   .where((member) => member.userId != client.user.id);
               if (otherMembers.isNotEmpty) {
-            final exceedingMembers = otherMembers.length - 5;
+                final maxWidth = constraints.maxWidth;
+                final maxChars = maxWidth / textStyle.fontSize;
+                int currentChars = 0;
+                final currentMembers = <Member>[];
+                otherMembers.forEach((element) {
+                  final newLength = currentChars + element.user.name.length;
+                  if (newLength < maxChars) {
+                    currentChars = newLength;
+                    currentMembers.add(element);
+                  }
+                });
+
+                final exceedingMembers =
+                    otherMembers.length - currentMembers.length;
                 title =
-                '${otherMembers.take(5).map((e) => e.user.name).join(', ')} ${exceedingMembers > 0 ? '+ $exceedingMembers' : ''}';
+                    '${currentMembers.map((e) => e.user.name).join(', ')} ${exceedingMembers > 0 ? '+ $exceedingMembers' : ''}';
               } else {
                 title = channel.id;
               }
@@ -51,5 +67,7 @@ class ChannelName extends StatelessWidget {
             );
           },
         );
+      },
+    );
   }
 }