Merge branch 'feature/new-ui' into feature/file-picker

example/assets/icon_arrow_right.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12Z" fill="#006CFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2929 7.29289C15.6834 6.90237 16.3166 6.90237 16.7071 7.29289L20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071C20.3166 13.0976 19.6834 13.0976 19.2929 12.7071L15.2929 8.70711C14.9024 8.31658 14.9024 7.68342 15.2929 7.29289Z" fill="#006CFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071L16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071C14.9024 16.3166 14.9024 15.6834 15.2929 15.2929L19.2929 11.2929C19.6834 10.9024 20.3166 10.9024 20.7071 11.2929Z" fill="#006CFF"/>
+</svg>

example/ios/Podfile.lock

@@ -274,7 +274,7 @@ SPEC CHECKSUMS:
   SwiftyGif: e466e86c660d343357ab944a819a101c4127cb40
   url_launcher: 6fef411d543ceb26efce54b05a0a40bfd74cbbef
   video_player: 9cc823b1d9da7e8427ee591e8438bfbcde500e6e
-  wakelock: 0d4a70faf8950410735e3f61fb15d517c8a6efc4
+  wakelock: bfc7955c418d0db797614075aabbc58a39ab5107
 
 PODFILE CHECKSUM: eb001256612a59f8f9e4d083ad8b9671e69dd184
 

example/lib/advanced_options_page.dart

@@ -17,10 +17,13 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
   final _formKey = GlobalKey<FormState>();
 
   final TextEditingController _apiKeyController = TextEditingController();
+  String _apiKeyError;
 
   final TextEditingController _userIdController = TextEditingController();
+  String _userIdError;
 
   final TextEditingController _userTokenController = TextEditingController();
+  String _userTokenError;
 
   final TextEditingController _usernameController = TextEditingController();
 
@@ -65,17 +68,34 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                 children: [
                   TextFormField(
                     controller: _apiKeyController,
+                    onChanged: (_) {
+                      if (_apiKeyError != null) {
+                        setState(() {
+                          _apiKeyError = null;
+                        });
+                      }
+                    },
                     validator: (value) {
                       if (value.isEmpty) {
-                        return 'Please enter the Chat API Key';
+                        setState(() {
+                          _apiKeyError = 'Please enter the Chat API Key';
+                        });
+                        return _apiKeyError;
                       }
                       return null;
                     },
+                    style: TextStyle(
+                      fontSize: 14,
+                      color: Colors.black,
+                    ),
                     decoration: InputDecoration(
+                      errorStyle: TextStyle(fontSize: 0),
                       labelStyle: TextStyle(
                         fontSize: 14,
                         fontWeight: FontWeight.bold,
-                        color: Colors.black.withOpacity(.5),
+                        color: _apiKeyError != null
+                            ? Color(0xffff3742)
+                            : Colors.black.withOpacity(.5),
                       ),
                       border: UnderlineInputBorder(
                         borderRadius: BorderRadius.circular(8),
@@ -83,7 +103,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                       ),
                       fillColor: Color(0xffF5F5F5),
                       filled: true,
-                      labelText: 'Chat API Key',
+                      labelText:
+                          'Chat API Key ${_apiKeyError != null ? ':$_apiKeyError' : ''}',
                     ),
                     textInputAction: TextInputAction.next,
                   ),
@@ -91,18 +112,35 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                     padding: const EdgeInsets.only(top: 8.0),
                     child: TextFormField(
                       controller: _userIdController,
+                      onChanged: (_) {
+                        if (_userIdError != null) {
+                          setState(() {
+                            _userIdError = null;
+                          });
+                        }
+                      },
                       validator: (value) {
                         if (value.isEmpty) {
-                          return 'Please enter the User ID';
+                          setState(() {
+                            _userIdError = 'Please enter the User ID';
+                          });
+                          return _userIdError;
                         }
                         return null;
                       },
+                      style: TextStyle(
+                        fontSize: 14,
+                        color: Colors.black,
+                      ),
                       textInputAction: TextInputAction.next,
                       decoration: InputDecoration(
+                        errorStyle: TextStyle(fontSize: 0),
                         labelStyle: TextStyle(
                           fontWeight: FontWeight.bold,
                           fontSize: 14,
-                          color: Colors.black.withOpacity(.5),
+                          color: _userIdError != null
+                              ? Color(0xffff3742)
+                              : Colors.black.withOpacity(.5),
                         ),
                         border: UnderlineInputBorder(
                           borderRadius: BorderRadius.circular(8),
@@ -110,26 +148,44 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                         ),
                         fillColor: Color(0xffF5F5F5),
                         filled: true,
-                        labelText: 'User ID',
+                        labelText:
+                            'User ID ${_userIdError != null ? ':$_userIdError' : ''}',
                       ),
                     ),
                   ),
                   Padding(
                     padding: const EdgeInsets.only(top: 8.0),
                     child: TextFormField(
+                      onChanged: (_) {
+                        if (_userTokenError != null) {
+                          setState(() {
+                            _userTokenError = null;
+                          });
+                        }
+                      },
                       controller: _userTokenController,
                       validator: (value) {
                         if (value.isEmpty) {
-                          return 'Please enter the user token';
+                          setState(() {
+                            _userTokenError = 'Please enter the user token';
+                          });
+                          return _userTokenError;
                         }
                         return null;
                       },
+                      style: TextStyle(
+                        fontSize: 14,
+                        color: Colors.black,
+                      ),
                       textInputAction: TextInputAction.next,
                       decoration: InputDecoration(
+                        errorStyle: TextStyle(fontSize: 0),
                         labelStyle: TextStyle(
                           fontWeight: FontWeight.bold,
                           fontSize: 14,
-                          color: Colors.black.withOpacity(.5),
+                          color: _userTokenError != null
+                              ? Color(0xffff3742)
+                              : Colors.black.withOpacity(.5),
                         ),
                         border: UnderlineInputBorder(
                           borderRadius: BorderRadius.circular(8),
@@ -137,7 +193,8 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                         ),
                         fillColor: Color(0xffF5F5F5),
                         filled: true,
-                        labelText: 'User Token',
+                        labelText:
+                            'User Token ${_userTokenError != null ? ':$_userTokenError' : ''}',
                       ),
                     ),
                   ),
@@ -183,13 +240,13 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                           if (loading) {
                             return;
                           }
-                          loading = true;
                           if (_formKey.currentState.validate()) {
                             final apiKey = _apiKeyController.text;
                             final userId = _userIdController.text;
                             final userToken = _userTokenController.text;
                             final username = _usernameController.text;
 
+                            loading = true;
                             showDialog(
                               barrierDismissible: false,
                               context: context,
@@ -208,7 +265,6 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                               ),
                             );
 
-                            print('CREATE CLIENT');
                             final client = Client(
                               apiKey,
                               logLevel: Level.INFO,
@@ -232,11 +288,9 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                                 errorText = e['message'] ?? errorText;
                               }
                               Navigator.pop(context);
-                              Scaffold.of(context).showSnackBar(
+                              setState(() {
-                                SnackBar(
+                                _apiKeyError = errorText;
-                                  content: Text(errorText),
+                              });
-                                ),
-                              );
                               loading = false;
                               await client.disconnect();
                               return;

example/lib/choose_user_page.dart

@@ -135,20 +135,18 @@ class ChooseUserPage extends StatelessWidget {
                           token,
                         );
 
-                        await Future.wait([
+                        secureStorage.write(
-                          secureStorage.write(
+                          key: kStreamApiKey,
-                            key: kStreamApiKey,
+                          value: kDefaultStreamApiKey,
-                            value: kDefaultStreamApiKey,
+                        );
-                          ),
+                        secureStorage.write(
-                          secureStorage.write(
+                          key: kStreamUserId,
-                            key: kStreamUserId,
+                          value: user.id,
-                            value: user.id,
+                        );
-                          ),
+                        secureStorage.write(
-                          secureStorage.write(
+                          key: kStreamToken,
-                            key: kStreamToken,
+                          value: token,
-                            value: token,
+                        );
-                          ),
-                        ]);
 
                         if (!kIsWeb) {
                           initNotifications(client);
@@ -178,9 +176,10 @@ class ChooseUserPage extends StatelessWidget {
                         style: TextStyle(fontWeight: FontWeight.bold),
                       ),
                       subtitle: Text('Stream test account'),
-                      trailing: Icon(
+                      trailing: SvgPicture.asset(
-                        StreamIcons.arrow_right,
+                        'assets/icon_arrow_right.svg',
-                        color: StreamChatTheme.of(context).accentColor,
+                        height: 24,
+                        width: 24,
                       ),
                     );
                   }),
@@ -206,9 +205,11 @@ class ChooseUserPage extends StatelessWidget {
                       style: TextStyle(fontWeight: FontWeight.bold),
                     ),
                     subtitle: Text('Custom settings'),
-                    trailing: Icon(
+                    trailing: SvgPicture.asset(
-                      StreamIcons.arrow_right,
+                      'assets/icon_arrow_right.svg',
-                      color: StreamChatTheme.of(context).accentColor,
+                      height: 24,
+                      width: 24,
+                      clipBehavior: Clip.none,
                     ),
                   ),
                 ][i];

example/lib/stream_version.dart

@@ -24,7 +24,6 @@ class StreamVersion extends StatelessWidget {
           final streamChatDep =
               yaml['packages']['stream_chat_flutter']['version'];
 
-          print('streamChatDep: ${streamChatDep}');
           return Text(
             'Stream SDK v ${streamChatDep}',
             style: TextStyle(

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.54+56
+version: 1.0.58+60
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/group_image.dart

@@ -46,9 +46,16 @@ class GroupImage extends StatelessWidget {
                       .take(2)
                       .map((url) => Flexible(
                             fit: FlexFit.tight,
-                            child: CachedNetworkImage(
+                            child: FittedBox(
-                              imageUrl: url,
                               fit: BoxFit.cover,
+                              clipBehavior: Clip.antiAlias,
+                              child: Transform.scale(
+                                scale: 1.2,
+                                child: CachedNetworkImage(
+                                  imageUrl: url,
+                                  fit: BoxFit.cover,
+                                ),
+                              ),
                             ),
                           ))
                       .toList(),
@@ -64,9 +71,16 @@ class GroupImage extends StatelessWidget {
                         .skip(2)
                         .map((url) => Flexible(
                               fit: FlexFit.tight,
-                              child: CachedNetworkImage(
+                              child: FittedBox(
-                                imageUrl: url,
                                 fit: BoxFit.cover,
+                                clipBehavior: Clip.antiAlias,
+                                child: Transform.scale(
+                                  scale: 1.2,
+                                  child: CachedNetworkImage(
+                                    imageUrl: url,
+                                    fit: BoxFit.cover,
+                                  ),
+                                ),
                               ),
                             ))
                         .toList(),

lib/src/message_widget.dart

@@ -493,7 +493,10 @@ class _MessageWidgetState extends State<MessageWidget> {
               message: widget.message,
               editMessageInputBuilder: widget.editMessageInputBuilder,
               onThreadTap: widget.onThreadTap,
-              showEditMessage: widget.showEditMessage,
+              showEditMessage: widget.showEditMessage &&
+                  widget.message.attachments
+                          ?.any((element) => element.type == 'giphy') !=
+                      true,
               showReactions: widget.showReactions,
               showReply:
                   widget.showReplyIndicator && widget.onThreadTap != null,

lib/src/stream_chat_theme.dart

@@ -229,6 +229,7 @@ class StreamChatThemeData {
       backgroundColor: isDark ? Colors.black : Colors.white,
       defaultUserImage: (context, user) => Center(
         child: CachedNetworkImage(
+          filterQuality: FilterQuality.high,
           imageUrl: getRandomPicUrl(user),
           fit: BoxFit.cover,
         ),

lib/src/user_avatar.dart

@@ -38,23 +38,26 @@ class UserAvatar extends StatelessWidget {
           : null,
       child: Stack(
         children: <Widget>[
-          Container(
+          ClipRRect(
-            constraints: constraints ??
+            borderRadius: borderRadius ??
-                streamChatTheme.ownMessageTheme.avatarTheme.constraints,
+                streamChatTheme.ownMessageTheme.avatarTheme.borderRadius,
-            clipBehavior: Clip.antiAlias,
+            child: Container(
-            decoration: BoxDecoration(
+              constraints: constraints ??
-              borderRadius: borderRadius ??
+                  streamChatTheme.ownMessageTheme.avatarTheme.constraints,
-                  streamChatTheme.ownMessageTheme.avatarTheme.borderRadius,
+              decoration: BoxDecoration(
-              color: streamChatTheme.accentColor,
+                color: streamChatTheme.accentColor,
+              ),
+              child: hasImage
+                  ? CachedNetworkImage(
+                      filterQuality: FilterQuality.high,
+                      imageUrl: user.extraData['image'],
+                      errorWidget: (_, __, ___) {
+                        return streamChatTheme.defaultUserImage(context, user);
+                      },
+                      fit: BoxFit.cover,
+                    )
+                  : streamChatTheme.defaultUserImage(context, user),
             ),
-            child: hasImage
-                ? CachedNetworkImage(
-                    imageUrl: user.extraData['image'],
-                    errorWidget: (_, __, ___) {
-                      return streamChatTheme.defaultUserImage(context, user);
-                    },
-                  )
-                : streamChatTheme.defaultUserImage(context, user),
           ),
           if (showOnlineStatus && user.online == true)
             Positioned(