From cc22b1b4ae8c9b7ffd5600fa3054480d62452e6b Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Fri, 20 Nov 2020 14:55:38 +0100 Subject: [PATCH] fix ui issues --- example/lib/chips_input_text_field.dart | 5 ++- example/lib/main.dart | 43 +++++++++++++++++-------- example/pubspec.yaml | 2 +- lib/src/message_input.dart | 6 ++-- lib/src/user_avatar.dart | 15 +++++---- lib/src/user_item.dart | 5 ++- 6 files changed, 50 insertions(+), 26 deletions(-) diff --git a/example/lib/chips_input_text_field.dart b/example/lib/chips_input_text_field.dart index 1eb3159d..30183926 100644 --- a/example/lib/chips_input_text_field.dart +++ b/example/lib/chips_input_text_field.dart @@ -69,13 +69,14 @@ class ChipInputTextFieldState extends State> { 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 extends State> { hintText: widget.hint, hintStyle: TextStyle( color: Colors.black.withOpacity(0.5), + fontSize: 14, ), ), ), @@ -122,6 +124,7 @@ class ChipInputTextFieldState extends State> { icon: Icon( _chips.isEmpty ? StreamIcons.user : StreamIcons.user_add, color: Colors.black.withOpacity(0.5), + size: 24, ), onPressed: !_pauseItemAddition ? null : resumeItemAddition, alignment: Alignment.topRight, diff --git a/example/lib/main.dart b/example/lib/main.dart index 2a30af4f..758e7784 100644 --- a/example/lib/main.dart +++ b/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 { 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 { 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 { 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 { 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 { ), ), Positioned( - top: 0, - right: 0, - child: InkWell( + top: -4, + right: -4, + child: GestureDetector( onTap: () { if (_selectedUsers.contains(user)) { setState(() => _selectedUsers.remove(user)); @@ -671,14 +679,15 @@ class _NewGroupChatScreenState extends State { decoration: BoxDecoration( color: Colors.white, shape: BoxShape.circle, - border: - Border.all(color: Colors.grey.shade100), + border: Border.all( + color: Colors.grey.shade100, + ), ), child: Padding( - padding: const EdgeInsets.all(2.0), + padding: const EdgeInsets.all(0.0), child: Icon( - Icons.clear_rounded, - size: 14, + StreamIcons.close, + size: 24, ), ), ), @@ -848,7 +857,10 @@ class _GroupChatDetailsScreenState extends State { 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 { Text( 'NAME', style: TextStyle( + fontSize: 12, color: Colors.black.withOpacity(0.5), ), ), @@ -876,6 +889,8 @@ class _GroupChatDetailsScreenState extends State { disabledBorder: InputBorder.none, contentPadding: const EdgeInsets.all(0), hintText: 'Choose a group chat name', + hintStyle: TextStyle( + fontSize: 14, color: Colors.black.withOpacity(.5)), ), ), ), diff --git a/example/pubspec.yaml b/example/pubspec.yaml index fca549d2..0fe6a0ad 100644 --- a/example/pubspec.yaml +++ b/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" diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index cd96119a..423d4c8f 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -423,7 +423,7 @@ class MessageInputState extends State { } 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 { if (!kIsWeb) { _keyboardListener = KeyboardVisibility.onChange.listen((visible) { - _onChanged(context, textEditingController.text); + if (_focusNode.hasFocus) { + _onChanged(context, textEditingController.text); + } }); } diff --git a/lib/src/user_avatar.dart b/lib/src/user_avatar.dart index 66edba39..566ef603 100644 --- a/lib/src/user_avatar.dart +++ b/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( - top: 0, - right: 0, - child: Material( - child: Center( + Positioned.fill( + child: Align( + alignment: onlineIndicatorAlignment, + child: Material( + 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, ), ), ], diff --git a/lib/src/user_item.dart b/lib/src/user_item.dart index be8037b6..06ab0848 100644 --- a/lib/src/user_item.dart +++ b/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, ); }