fix ui issues

example/lib/chips_input_text_field.dart

@@ -69,13 +69,14 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
           padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
           child: IntrinsicHeight(
             child: Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.baseline,
               children: [
                 Padding(
                   padding: const EdgeInsets.symmetric(vertical: 4.0),
                   child: Text(
                     'TO:',
                     style: TextStyle(
+                      fontSize: 12,
                       color: Colors.black.withOpacity(0.5),
                     ),
                   ),
@@ -109,6 +110,7 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
                             hintText: widget.hint,
                             hintStyle: TextStyle(
                               color: Colors.black.withOpacity(0.5),
+                              fontSize: 14,
                             ),
                           ),
                         ),
@@ -122,6 +124,7 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
                     icon: Icon(
                       _chips.isEmpty ? StreamIcons.user : StreamIcons.user_add,
                       color: Colors.black.withOpacity(0.5),
+                      size: 24,
                     ),
                     onPressed: !_pauseItemAddition ? null : resumeItemAddition,
                     alignment: Alignment.topRight,

example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:io';
 
 import 'package:example/choose_user_page.dart';
@@ -8,9 +9,8 @@ import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 import 'chips_input_text_field.dart';
-import 'notifications_service.dart';
 import 'neumorphic_button.dart';
-import 'dart:async';
+import 'notifications_service.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -179,7 +179,6 @@ class ChannelListPage extends StatelessWidget {
           options: {
             'presence': true,
           },
-          sort: [SortOption('last_message_at')],
           pagination: PaginationParams(
             limit: 20,
           ),
@@ -323,7 +322,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
         leading: const StreamBackButton(),
         title: Text(
           'New Chat',
-          style: TextStyle(color: Colors.black),
+          style: TextStyle(
+            color: Colors.black,
+            fontSize: 16,
+          ),
         ),
         centerTitle: true,
       ),
@@ -577,7 +579,10 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
         leading: const StreamBackButton(),
         title: Text(
           'Add Group Members',
-          style: TextStyle(color: Colors.black),
+          style: TextStyle(
+            color: Colors.black,
+            fontSize: 16,
+          ),
         ),
         centerTitle: true,
         actions: [
@@ -622,10 +627,12 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                   prefixIcon: Icon(
                     StreamIcons.search,
                     color: Colors.black,
+                    size: 24,
                   ),
                   hintText: 'Search',
                   hintStyle: TextStyle(
                     color: Colors.black.withOpacity(0.5),
+                    fontSize: 14,
                   ),
                   contentPadding: const EdgeInsets.all(0),
                   border: OutlineInputBorder(
@@ -650,6 +657,7 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                         Stack(
                           children: [
                             UserAvatar(
+                              onlineIndicatorAlignment: Alignment(0.9, 0.9),
                               user: user,
                               showOnlineStatus: true,
                               borderRadius: BorderRadius.circular(32),
@@ -659,9 +667,9 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                               ),
                             ),
                             Positioned(
-                              top: 0,
+                              top: -4,
-                              right: 0,
+                              right: -4,
-                              child: InkWell(
+                              child: GestureDetector(
                                 onTap: () {
                                   if (_selectedUsers.contains(user)) {
                                     setState(() => _selectedUsers.remove(user));
@@ -671,14 +679,15 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                   decoration: BoxDecoration(
                                     color: Colors.white,
                                     shape: BoxShape.circle,
-                                    border:
+                                    border: Border.all(
-                                        Border.all(color: Colors.grey.shade100),
+                                      color: Colors.grey.shade100,
+                                    ),
                                   ),
                                   child: Padding(
-                                    padding: const EdgeInsets.all(2.0),
+                                    padding: const EdgeInsets.all(0.0),
                                     child: Icon(
-                                      Icons.clear_rounded,
+                                      StreamIcons.close,
-                                      size: 14,
+                                      size: 24,
                                     ),
                                   ),
                                 ),
@@ -848,7 +857,10 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
         leading: const StreamBackButton(),
         title: Text(
           'Name of Group Chat',
-          style: TextStyle(color: Colors.black),
+          style: TextStyle(
+            color: Colors.black,
+            fontSize: 16,
+          ),
         ),
         centerTitle: true,
         bottom: PreferredSize(
@@ -860,6 +872,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                 Text(
                   'NAME',
                   style: TextStyle(
+                    fontSize: 12,
                     color: Colors.black.withOpacity(0.5),
                   ),
                 ),
@@ -876,6 +889,8 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                       disabledBorder: InputBorder.none,
                       contentPadding: const EdgeInsets.all(0),
                       hintText: 'Choose a group chat name',
+                      hintStyle: TextStyle(
+                          fontSize: 14, color: Colors.black.withOpacity(.5)),
                     ),
                   ),
                 ),

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.60+62
+version: 1.0.62+64
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/message_input.dart

@@ -423,7 +423,7 @@ class MessageInputState extends State<MessageInput> {
   }
 
   void _onChanged(BuildContext context, String s) {
-    StreamChannel.of(context).channel.keyStroke();
+    StreamChannel.of(context).channel.keyStroke().catchError((e) {});
 
     setState(() {
       _messageIsPresent = s.trim().isNotEmpty;
@@ -1712,7 +1712,9 @@ class MessageInputState extends State<MessageInput> {
 
     if (!kIsWeb) {
       _keyboardListener = KeyboardVisibility.onChange.listen((visible) {
-        _onChanged(context, textEditingController.text);
+        if (_focusNode.hasFocus) {
+          _onChanged(context, textEditingController.text);
+        }
       });
     }
 

lib/src/user_avatar.dart

@@ -13,9 +13,11 @@ class UserAvatar extends StatelessWidget {
     this.onTap,
     this.showOnlineStatus = true,
     this.borderRadius,
+    this.onlineIndicatorAlignment = Alignment.topRight,
   }) : super(key: key);
 
   final User user;
+  final Alignment onlineIndicatorAlignment;
   final BoxConstraints constraints;
   final BorderRadius borderRadius;
   final BoxConstraints onlineIndicatorConstraints;
@@ -60,11 +62,11 @@ class UserAvatar extends StatelessWidget {
             ),
           ),
           if (showOnlineStatus && user.online == true)
-            Positioned(
+            Positioned.fill(
-              top: 0,
+              child: Align(
-              right: 0,
+                alignment: onlineIndicatorAlignment,
-              child: Material(
+                child: Material(
-                child: Center(
+                  type: MaterialType.circle,
                   child: Container(
                     padding: const EdgeInsets.all(2.0),
                     constraints: onlineIndicatorConstraints ??
@@ -77,9 +79,8 @@ class UserAvatar extends StatelessWidget {
                       color: Color(0xff20E070),
                     ),
                   ),
+                  color: Colors.white,
                 ),
-                shape: CircleBorder(),
-                color: Colors.white,
               ),
             ),
         ],

lib/src/user_item.dart

@@ -80,7 +80,10 @@ class UserItem extends StatelessWidget {
               radius: 10,
             )
           : null,
-      title: Text(user.name,style: TextStyle(fontWeight: FontWeight.bold),),
+      title: Text(
+        user.name,
+        style: TextStyle(fontWeight: FontWeight.bold),
+      ),
       subtitle: showLastOnline ? _buildLastActive(context) : null,
     );
   }