diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b5988e..aaefea8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## 1.4.1 +- Made UI changes to match the Figma design + ## 1.4.0 - Add way to create group chats - Update flutter_profile to 1.3.0 diff --git a/packages/flutter_chat/example/lib/main.dart b/packages/flutter_chat/example/lib/main.dart index 8c8d809..f8e92cc 100644 --- a/packages/flutter_chat/example/lib/main.dart +++ b/packages/flutter_chat/example/lib/main.dart @@ -24,7 +24,12 @@ class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Center( - child: chatNavigatorUserStory(context), - ); + child: chatNavigatorUserStory(context, + configuration: ChatUserStoryConfiguration( + chatService: LocalChatService(), + chatOptionsBuilder: (ctx) => ChatOptions( + noChatsPlaceholderBuilder: (translations) => + Text(translations.noUsersFound), + )))); } } diff --git a/packages/flutter_chat/pubspec.yaml b/packages/flutter_chat/pubspec.yaml index b65c44f..a32f89d 100644 --- a/packages/flutter_chat/pubspec.yaml +++ b/packages/flutter_chat/pubspec.yaml @@ -4,7 +4,7 @@ name: flutter_chat description: A new Flutter package project. -version: 1.4.0 +version: 1.4.1 publish_to: none @@ -20,17 +20,17 @@ dependencies: git: url: https://github.com/Iconica-Development/flutter_chat path: packages/flutter_chat_view - ref: 1.4.0 + ref: 1.4.1 flutter_chat_interface: git: url: https://github.com/Iconica-Development/flutter_chat path: packages/flutter_chat_interface - ref: 1.4.0 + ref: 1.4.1 flutter_chat_local: git: url: https://github.com/Iconica-Development/flutter_chat path: packages/flutter_chat_local - ref: 1.4.0 + ref: 1.4.1 uuid: ^4.3.3 dev_dependencies: diff --git a/packages/flutter_chat_firebase/pubspec.yaml b/packages/flutter_chat_firebase/pubspec.yaml index be75c9f..cc657f5 100644 --- a/packages/flutter_chat_firebase/pubspec.yaml +++ b/packages/flutter_chat_firebase/pubspec.yaml @@ -4,7 +4,7 @@ name: flutter_chat_firebase description: A new Flutter package project. -version: 1.4.0 +version: 1.4.1 publish_to: none environment: @@ -23,7 +23,7 @@ dependencies: git: url: https://github.com/Iconica-Development/flutter_chat path: packages/flutter_chat_interface - ref: 1.4.0 + ref: 1.4.1 dev_dependencies: flutter_iconica_analysis: diff --git a/packages/flutter_chat_interface/pubspec.yaml b/packages/flutter_chat_interface/pubspec.yaml index 5e7f6c9..21cbc0c 100644 --- a/packages/flutter_chat_interface/pubspec.yaml +++ b/packages/flutter_chat_interface/pubspec.yaml @@ -4,7 +4,7 @@ name: flutter_chat_interface description: A new Flutter package project. -version: 1.4.0 +version: 1.4.1 publish_to: none environment: diff --git a/packages/flutter_chat_local/lib/service/local_chat_detail_service.dart b/packages/flutter_chat_local/lib/service/local_chat_detail_service.dart index 7341235..b0cf5d2 100644 --- a/packages/flutter_chat_local/lib/service/local_chat_detail_service.dart +++ b/packages/flutter_chat_local/lib/service/local_chat_detail_service.dart @@ -68,7 +68,7 @@ class LocalChatDetailService with ChangeNotifier implements ChatDetailService { .chats .firstWhere((element) => element.id == chatId); var message = ChatImageMessageModel( - sender: ChatUserModel( + sender: const ChatUserModel( id: '3', firstName: 'ico', lastName: 'nica', @@ -101,7 +101,7 @@ class LocalChatDetailService with ChangeNotifier implements ChatDetailService { .chats .firstWhere((element) => element.id == chatId); var message = ChatTextMessageModel( - sender: ChatUserModel( + sender: const ChatUserModel( id: '3', firstName: 'ico', lastName: 'nica', diff --git a/packages/flutter_chat_local/lib/service/local_chat_user_service.dart b/packages/flutter_chat_local/lib/service/local_chat_user_service.dart index 5a0f5a7..5ad90db 100644 --- a/packages/flutter_chat_local/lib/service/local_chat_user_service.dart +++ b/packages/flutter_chat_local/lib/service/local_chat_user_service.dart @@ -4,19 +4,19 @@ import 'package:flutter_chat_interface/flutter_chat_interface.dart'; class LocalChatUserService implements ChatUserService { /// List of predefined chat users. List users = [ - ChatUserModel( + const ChatUserModel( id: '1', firstName: 'John', lastName: 'Doe', imageUrl: 'https://picsum.photos/200/300', ), - ChatUserModel( + const ChatUserModel( id: '2', firstName: 'Jane', lastName: 'Doe', imageUrl: 'https://picsum.photos/200/300', ), - ChatUserModel( + const ChatUserModel( id: '3', firstName: 'ico', lastName: 'nica', @@ -29,7 +29,8 @@ class LocalChatUserService implements ChatUserService { Future.value(users.where((element) => element.id != '3').toList()); @override - Future getCurrentUser() => Future.value(ChatUserModel()); + Future getCurrentUser() => + Future.value(const ChatUserModel()); @override Future getUser(String id) { diff --git a/packages/flutter_chat_local/pubspec.yaml b/packages/flutter_chat_local/pubspec.yaml index 51986ed..93fcfdf 100644 --- a/packages/flutter_chat_local/pubspec.yaml +++ b/packages/flutter_chat_local/pubspec.yaml @@ -1,6 +1,6 @@ name: flutter_chat_local description: "A new Flutter package project." -version: 1.4.0 +version: 1.4.1 publish_to: none homepage: @@ -15,7 +15,7 @@ dependencies: git: url: https://github.com/Iconica-Development/flutter_chat path: packages/flutter_chat_interface - ref: 1.4.0 + ref: 1.4.1 dev_dependencies: flutter_test: diff --git a/packages/flutter_chat_view/lib/src/components/chat_detail_row.dart b/packages/flutter_chat_view/lib/src/components/chat_detail_row.dart index 3140518..75b9838 100644 --- a/packages/flutter_chat_view/lib/src/components/chat_detail_row.dart +++ b/packages/flutter_chat_view/lib/src/components/chat_detail_row.dart @@ -102,11 +102,11 @@ class _ChatDetailRowState extends State { ) else Text( - widget.message.sender.fullName?.toUpperCase() ?? + widget.message.sender.fullName ?? widget.translations.anonymousUser, style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w500, + fontSize: 16, + fontWeight: FontWeight.w800, color: Theme.of(context) .textTheme .labelMedium @@ -121,7 +121,8 @@ class _ChatDetailRowState extends State { showFullDate: true, ), style: const TextStyle( - fontSize: 12, + fontSize: 16, + fontWeight: FontWeight.w300, color: Color(0xFFBBBBBB), ), ), diff --git a/packages/flutter_chat_view/lib/src/components/chat_row.dart b/packages/flutter_chat_view/lib/src/components/chat_row.dart index 5acfc46..9c8875a 100644 --- a/packages/flutter_chat_view/lib/src/components/chat_row.dart +++ b/packages/flutter_chat_view/lib/src/components/chat_row.dart @@ -31,7 +31,7 @@ class ChatRow extends StatelessWidget { @override Widget build(BuildContext context) => Row( - crossAxisAlignment: CrossAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.only(left: 10.0), @@ -39,7 +39,7 @@ class ChatRow extends StatelessWidget { ), Expanded( child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 22.0), + padding: const EdgeInsets.only(left: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -48,10 +48,10 @@ class ChatRow extends StatelessWidget { maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle( - fontSize: 18, + fontSize: 16, fontWeight: unreadMessages > 0 - ? FontWeight.w600 - : FontWeight.w400, + ? FontWeight.w900 + : FontWeight.w500, ), ), if (subTitle != null) @@ -62,11 +62,11 @@ class ChatRow extends StatelessWidget { style: TextStyle( fontSize: 16, fontWeight: unreadMessages > 0 - ? FontWeight.w600 - : FontWeight.w400, + ? FontWeight.w500 + : FontWeight.w300, ), overflow: TextOverflow.ellipsis, - maxLines: 1, + maxLines: 2, ), ), ], @@ -77,29 +77,30 @@ class ChatRow extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.end, children: [ - Text( - lastUsed ?? '', - style: const TextStyle( - color: Color(0xFFBBBBBB), - fontSize: 14, - ), - ), - if (unreadMessages > 0) ...[ + if (lastUsed != null) // Check if lastUsed is not null Padding( - padding: const EdgeInsets.only(top: 4.0), - child: Container( - width: 20, - height: 20, - decoration: BoxDecoration( - color: Theme.of(context).colorScheme.primary, - shape: BoxShape.circle, + padding: const EdgeInsets.only(bottom: 4.0), + child: Text( + lastUsed!, + style: const TextStyle( + color: Color(0xFFBBBBBB), + fontSize: 14, ), - child: Center( - child: Text( - unreadMessages.toString(), - style: const TextStyle( - fontSize: 14, - ), + ), + ), + if (unreadMessages > 0) ...[ + Container( + width: 20, + height: 20, + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.primary, + shape: BoxShape.circle, + ), + child: Center( + child: Text( + unreadMessages.toString(), + style: const TextStyle( + fontSize: 14, ), ), ), diff --git a/packages/flutter_chat_view/lib/src/config/chat_options.dart b/packages/flutter_chat_view/lib/src/config/chat_options.dart index b8ff8d1..54fb1fb 100644 --- a/packages/flutter_chat_view/lib/src/config/chat_options.dart +++ b/packages/flutter_chat_view/lib/src/config/chat_options.dart @@ -18,6 +18,7 @@ class ChatOptions { this.userAvatarBuilder = _createUserAvatar, this.groupAvatarBuilder = _createGroupAvatar, this.noChatsPlaceholderBuilder = _createNoChatsPlaceholder, + this.noUsersPlaceholderBuilder = _createNoUsersPlaceholder, }); /// Builder function for the new chat button. @@ -43,6 +44,9 @@ class ChatOptions { /// Builder function for the placeholder shown when no chats are available. final NoChatsPlaceholderBuilder noChatsPlaceholderBuilder; + + /// Builder function for the placeholder shown when no users are available. + final NoUsersPlaceholderBuilder noUsersPlaceholderBuilder; } Widget _createNewChatButton( @@ -51,16 +55,23 @@ Widget _createNewChatButton( ChatTranslations translations, ) => Padding( - padding: const EdgeInsets.all(24.0), + padding: const EdgeInsets.fromLTRB(5, 24, 5, 24), child: ElevatedButton( style: ElevatedButton.styleFrom( - backgroundColor: Colors.black, - minimumSize: const Size.fromHeight(50), + backgroundColor: const Color.fromRGBO(113, 198, 209, 1), + fixedSize: const Size(254, 44), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(56), + ), ), onPressed: onPressed, child: Text( translations.newChatButton, - style: const TextStyle(color: Colors.white), + style: const TextStyle( + color: Colors.white, + fontWeight: FontWeight.w800, + fontSize: 18, + ), ), ), ); @@ -112,7 +123,7 @@ Widget _createChatRowContainer( ) => Padding( padding: const EdgeInsets.symmetric( - vertical: 15.0, + vertical: 12.0, horizontal: 10.0, ), child: chatRow, @@ -126,9 +137,17 @@ Widget _createImagePickerContainer( padding: const EdgeInsets.all(8.0), color: Colors.white, child: ImagePicker( + imagePickerTheme: ImagePickerTheme( + title: translations.imagePickerTitle, + titleTextSize: 16, + titleAlignment: TextAlign.center, + iconSize: 60.0, + makePhotoText: translations.takePicture, + selectImageText: translations.uploadFile, + ), customButton: ElevatedButton( style: ElevatedButton.styleFrom( - backgroundColor: Colors.black, + backgroundColor: const Color.fromRGBO(113, 198, 209, 1), ), onPressed: onClose, child: Text( @@ -172,6 +191,20 @@ Widget _createGroupAvatar( Widget _createNoChatsPlaceholder( ChatTranslations translations, +) => + Center( + child: Text( + translations.noChatsFound, + textAlign: TextAlign.center, + style: const TextStyle( + color: Colors.white, + fontSize: 18, + ), + ), + ); + +Widget _createNoUsersPlaceholder( + ChatTranslations translations, ) => Center( child: Text( @@ -224,3 +257,7 @@ typedef GroupAvatarBuilder = Widget Function( typedef NoChatsPlaceholderBuilder = Widget Function( ChatTranslations translations, ); + +typedef NoUsersPlaceholderBuilder = Widget Function( + ChatTranslations translations, +); diff --git a/packages/flutter_chat_view/lib/src/config/chat_translations.dart b/packages/flutter_chat_view/lib/src/config/chat_translations.dart index 3343857..3c52e19 100644 --- a/packages/flutter_chat_view/lib/src/config/chat_translations.dart +++ b/packages/flutter_chat_view/lib/src/config/chat_translations.dart @@ -6,13 +6,17 @@ class ChatTranslations { const ChatTranslations({ this.chatsTitle = 'Chats', this.chatsUnread = 'unread', - this.newChatButton = 'Start chat', + this.newChatButton = 'Start a chat', this.newGroupChatButton = 'Start group chat', this.newChatTitle = 'Start chat', this.image = 'Image', this.searchPlaceholder = 'Search...', + this.startTyping = 'Start typing to find a user to chat with.', this.cancelImagePickerBtn = 'Cancel', this.messagePlaceholder = 'Write your message here...', + this.writeMessageToStartChat = 'Write a message to start the chat.', + this.writeFirstMessageInGroupChat = + 'Write the first message in this group chat.', this.imageUploading = 'Image is uploading...', this.deleteChatButton = 'Delete', this.deleteChatModalTitle = 'Delete chat', @@ -20,10 +24,14 @@ class ChatTranslations { 'Are you sure you want to delete this chat?', this.deleteChatModalCancel = 'Cancel', this.deleteChatModalConfirm = 'Delete', - this.noUsersFound = 'No users found', + this.noUsersFound = 'No users were found to start a chat with.', + this.noChatsFound = 'Click on \'Start a chat\' to create a new chat.', this.anonymousUser = 'Anonymous user', this.chatCantBeDeleted = 'This chat can\'t be deleted', this.chatProfileUsers = 'Users:', + this.imagePickerTitle = 'Do you want to upload a file or take a picture?', + this.uploadFile = 'UPLOAD FILE', + this.takePicture = 'TAKE PICTURE', }); final String chatsTitle; @@ -34,16 +42,23 @@ class ChatTranslations { final String deleteChatButton; final String image; final String searchPlaceholder; + final String startTyping; final String cancelImagePickerBtn; final String messagePlaceholder; + final String writeMessageToStartChat; + final String writeFirstMessageInGroupChat; final String imageUploading; final String deleteChatModalTitle; final String deleteChatModalDescription; final String deleteChatModalCancel; final String deleteChatModalConfirm; final String noUsersFound; + final String noChatsFound; final String chatCantBeDeleted; final String chatProfileUsers; + final String imagePickerTitle; + final String uploadFile; + final String takePicture; /// Shown when the user has no name final String anonymousUser; diff --git a/packages/flutter_chat_view/lib/src/screens/chat_detail_screen.dart b/packages/flutter_chat_view/lib/src/screens/chat_detail_screen.dart index 5987a06..8dc866f 100644 --- a/packages/flutter_chat_view/lib/src/screens/chat_detail_screen.dart +++ b/packages/flutter_chat_view/lib/src/screens/chat_detail_screen.dart @@ -172,16 +172,14 @@ class _ChatDetailScreenState extends State { iconTheme: theme.appBarTheme.iconTheme ?? const IconThemeData(color: Colors.white), centerTitle: true, - leading: (chatModel is GroupChatModel) - ? GestureDetector( - onTap: () { - Navigator.popUntil(context, (route) => route.isFirst); - }, - child: const Icon( - Icons.arrow_back, - ), - ) - : null, + leading: GestureDetector( + onTap: () { + Navigator.popUntil(context, (route) => route.isFirst); + }, + child: const Icon( + Icons.arrow_back, + ), + ), title: GestureDetector( onTap: () => widget.onPressChatTitle.call(context, chatModel!), child: Row( @@ -195,40 +193,35 @@ class _ChatDetailScreenState extends State { chatModel.imageUrl, 36.0, ), - ] else if (chatModel is PersonalChatModel) ...[ - widget.options.userAvatarBuilder( - chatModel.user, - 36.0, - ), ] else ...[], - Expanded( - child: Padding( - padding: const EdgeInsets.only(left: 15.5), - child: widget.chatTitleBuilder != null - ? widget.chatTitleBuilder!.call( - (chatModel is GroupChatModel) - ? chatModel.title - : (chatModel is PersonalChatModel) - ? chatModel.user.fullName ?? - widget - .translations.anonymousUser - : '', - ) - : Text( - (chatModel is GroupChatModel) - ? chatModel.title - : (chatModel is PersonalChatModel) - ? chatModel.user.fullName ?? - widget - .translations.anonymousUser - : '', - style: theme.appBarTheme.titleTextStyle ?? - const TextStyle( - color: Colors.white, - ), - ), - ), + Padding( + padding: (chatModel is GroupChatModel) + ? const EdgeInsets.only(left: 15.5) + : EdgeInsets.zero, + child: widget.chatTitleBuilder != null + ? widget.chatTitleBuilder!.call( + (chatModel is GroupChatModel) + ? chatModel.title + : (chatModel is PersonalChatModel) + ? chatModel.user.firstName ?? + widget.translations.anonymousUser + : '', + ) + : Text( + (chatModel is GroupChatModel) + ? chatModel.title + : (chatModel is PersonalChatModel) + ? chatModel.user.firstName ?? + widget.translations.anonymousUser + : '', + style: theme.appBarTheme.titleTextStyle ?? + const TextStyle( + fontWeight: FontWeight.w800, + fontSize: 18.0, + color: Colors.white, + ), + ), ), ], ), @@ -269,6 +262,21 @@ class _ChatDetailScreenState extends State { reverse: true, padding: const EdgeInsets.only(top: 24.0), children: [ + if (detailRows.isEmpty) + Center( + child: Text( + (chatModel is GroupChatModel) + ? widget.translations + .writeFirstMessageInGroupChat + : widget + .translations.writeMessageToStartChat, + style: const TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w400, + color: Color.fromRGBO(33, 33, 33, 1), + ), + ), + ), ...detailRows, ], ), diff --git a/packages/flutter_chat_view/lib/src/screens/chat_screen.dart b/packages/flutter_chat_view/lib/src/screens/chat_screen.dart index 78aa547..ef1aed3 100644 --- a/packages/flutter_chat_view/lib/src/screens/chat_screen.dart +++ b/packages/flutter_chat_view/lib/src/screens/chat_screen.dart @@ -92,15 +92,18 @@ class _ChatScreenState extends State { widget.service.chatOverviewService.getUnreadChatsCountStream(), builder: (BuildContext context, snapshot) => Align( alignment: Alignment.centerRight, - child: Padding( - padding: const EdgeInsets.only(right: 22.0), - child: Text( - '${snapshot.data ?? 0} ${translations.chatsUnread}', - style: widget.unreadMessageTextStyle ?? - const TextStyle( - color: Colors.white, - fontSize: 14, - ), + child: Visibility( + visible: (snapshot.data ?? 0) > 0, + child: Padding( + padding: const EdgeInsets.only(right: 22.0), + child: Text( + '${snapshot.data ?? 0} ${translations.chatsUnread}', + style: widget.unreadMessageTextStyle ?? + const TextStyle( + color: Colors.white, + fontSize: 14, + ), + ), ), ), ), @@ -113,7 +116,7 @@ class _ChatScreenState extends State { child: ListView( controller: controller, physics: const AlwaysScrollableScrollPhysics(), - padding: const EdgeInsets.only(top: 15.0), + padding: const EdgeInsets.fromLTRB(28, 16, 28, 0), children: [ StreamBuilder>( stream: widget.service.chatOverviewService.getChatsStream(), @@ -127,6 +130,15 @@ class _ChatScreenState extends State { await widget.onNoChats!.call(); }); } + return Center( + child: Text( + translations.noChatsFound, + style: const TextStyle( + fontSize: 14, + fontWeight: FontWeight.w400, + ), + ), + ); } else { _hasCalledOnNoChats = false; // Reset the flag if there are chats @@ -151,6 +163,8 @@ class _ChatScreenState extends State { padding: const EdgeInsets.all(16.0), child: Column( mainAxisSize: MainAxisSize.min, + crossAxisAlignment: + CrossAxisAlignment.stretch, children: [ Text( chat.canBeDeleted @@ -158,50 +172,80 @@ class _ChatScreenState extends State { .deleteChatModalTitle : translations .chatCantBeDeleted, + textAlign: TextAlign.center, style: const TextStyle( - fontSize: 20, + fontSize: 24, fontWeight: FontWeight.bold, ), ), - const SizedBox(height: 16), + const SizedBox(height: 24), if (chat.canBeDeleted) - Text( - translations - .deleteChatModalDescription, - style: const TextStyle( - fontSize: 16, + Padding( + padding: const EdgeInsets + .symmetric( + horizontal: 16, + ), + child: Text( + translations + .deleteChatModalDescription, + textAlign: + TextAlign.center, + style: const TextStyle( + fontSize: 18, + ), ), ), - const SizedBox(height: 16), + const SizedBox( + height: 24, + ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - TextButton( - child: Text( - translations - .deleteChatModalCancel, - style: const TextStyle( - fontSize: 16, - ), - ), + ElevatedButton( onPressed: () => Navigator.of( context, ).pop(false), + child: Text( + translations + .deleteChatModalCancel, + style: const TextStyle( + color: Colors.black, + fontSize: 18, + ), + ), ), + if (chat.canBeDeleted) + const SizedBox( + width: 16, + ), if (chat.canBeDeleted) ElevatedButton( + style: ElevatedButton + .styleFrom( + backgroundColor: + const Color + .fromRGBO( + 113, + 198, + 209, + 1, + ), + ), onPressed: () => Navigator.of( context, - ).pop(true), + ).pop( + true, + ), child: Text( translations .deleteChatModalConfirm, style: const TextStyle( - fontSize: 16, + color: Colors.white, + fontSize: 18, ), ), ), @@ -283,53 +327,60 @@ class ChatListItem extends StatelessWidget { final DateFormatter _dateFormatter; @override - Widget build(BuildContext context) => GestureDetector( - onTap: () => widget.onPressChat(chat), - child: Container( - color: Colors.transparent, - child: widget.options.chatRowContainerBuilder( - (chat is PersonalChatModel) - ? ChatRow( - unreadMessages: chat.unreadMessages ?? 0, - avatar: widget.options.userAvatarBuilder( - (chat as PersonalChatModel).user, - 40.0, - ), - title: (chat as PersonalChatModel).user.fullName ?? - translations.anonymousUser, - subTitle: chat.lastMessage != null - ? chat.lastMessage is ChatTextMessageModel - ? (chat.lastMessage! as ChatTextMessageModel).text - : '📷 ' - '${translations.image}' - : '', - lastUsed: chat.lastUsed != null - ? _dateFormatter.format( - date: chat.lastUsed!, - ) - : null, - ) - : ChatRow( - title: (chat as GroupChatModel).title, - unreadMessages: chat.unreadMessages ?? 0, - subTitle: chat.lastMessage != null - ? chat.lastMessage is ChatTextMessageModel - ? (chat.lastMessage! as ChatTextMessageModel).text - : '📷 ' - '${translations.image}' - : '', - avatar: widget.options.groupAvatarBuilder( - (chat as GroupChatModel).title, - (chat as GroupChatModel).imageUrl, - 40.0, - ), - lastUsed: chat.lastUsed != null - ? _dateFormatter.format( - date: chat.lastUsed!, - ) - : null, - ), + Widget build(BuildContext context) => Column( + children: [ + GestureDetector( + onTap: () => widget.onPressChat(chat), + child: Container( + color: Colors.transparent, + child: widget.options.chatRowContainerBuilder( + (chat is PersonalChatModel) + ? ChatRow( + unreadMessages: chat.unreadMessages ?? 0, + avatar: widget.options.userAvatarBuilder( + (chat as PersonalChatModel).user, + 40.0, + ), + title: (chat as PersonalChatModel).user.fullName ?? + translations.anonymousUser, + subTitle: chat.lastMessage != null + ? chat.lastMessage is ChatTextMessageModel + ? (chat.lastMessage! as ChatTextMessageModel) + .text + : '📷 ' + '${translations.image}' + : '', + lastUsed: chat.lastUsed != null + ? _dateFormatter.format( + date: chat.lastUsed!, + ) + : null, + ) + : ChatRow( + title: (chat as GroupChatModel).title, + unreadMessages: chat.unreadMessages ?? 0, + subTitle: chat.lastMessage != null + ? chat.lastMessage is ChatTextMessageModel + ? (chat.lastMessage! as ChatTextMessageModel) + .text + : '📷 ' + '${translations.image}' + : '', + avatar: widget.options.groupAvatarBuilder( + (chat as GroupChatModel).title, + (chat as GroupChatModel).imageUrl, + 40.0, + ), + lastUsed: chat.lastUsed != null + ? _dateFormatter.format( + date: chat.lastUsed!, + ) + : null, + ), + ), + ), ), - ), + const Divider(), + ], ); } diff --git a/packages/flutter_chat_view/lib/src/screens/new_chat_screen.dart b/packages/flutter_chat_view/lib/src/screens/new_chat_screen.dart index fd5af63..f31e387 100644 --- a/packages/flutter_chat_view/lib/src/screens/new_chat_screen.dart +++ b/packages/flutter_chat_view/lib/src/screens/new_chat_screen.dart @@ -106,8 +106,7 @@ class _NewChatScreenState extends State { } else if (snapshot.hasData) { return _buildUserList(snapshot.data!); } else { - return widget.options - .noChatsPlaceholderBuilder(widget.translations); + return Text(widget.translations.noUsersFound); } }, ), @@ -152,7 +151,7 @@ class _NewChatScreenState extends State { ), ) : Text( - widget.translations.newChatButton, + widget.translations.newChatTitle, style: theme.appBarTheme.titleTextStyle ?? const TextStyle( color: Colors.white, @@ -192,24 +191,61 @@ class _NewChatScreenState extends State { ) .toList(); + if (_textFieldFocusNode.hasFocus && query.isEmpty) { + return Padding( + padding: const EdgeInsets.only(top: 20.0), + child: Center( + child: Text( + widget.translations.startTyping, + style: const TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.bold, + color: Colors.grey, + ), + ), + ), + ); + } + if (filteredUsers.isEmpty) { return widget.options.noChatsPlaceholderBuilder(widget.translations); } - return ListView.builder( + return ListView.separated( itemCount: filteredUsers.length, + separatorBuilder: (context, index) => const Padding( + padding: EdgeInsets.symmetric(horizontal: 28.0), + child: Divider(), + ), itemBuilder: (context, index) { var user = filteredUsers[index]; return GestureDetector( child: widget.options.chatRowContainerBuilder( Container( color: Colors.transparent, - child: ChatRow( - avatar: widget.options.userAvatarBuilder( - user, - 40.0, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20.0), + child: Row( + children: [ + Padding( + padding: const EdgeInsets.only(left: 12.0, right: 12), + child: widget.options.userAvatarBuilder(user, 40.0), + ), + Expanded( + child: Container( + height: 40.0, + alignment: Alignment.centerLeft, + child: Text( + user.fullName ?? widget.translations.anonymousUser, + style: const TextStyle( + fontSize: 18.0, + fontWeight: FontWeight.w800, + ), + ), + ), + ), + ], ), - title: user.fullName ?? widget.translations.anonymousUser, ), ), ), diff --git a/packages/flutter_chat_view/lib/src/screens/new_group_chat_screen.dart b/packages/flutter_chat_view/lib/src/screens/new_group_chat_screen.dart index 42f609c..31cfc66 100644 --- a/packages/flutter_chat_view/lib/src/screens/new_group_chat_screen.dart +++ b/packages/flutter_chat_view/lib/src/screens/new_group_chat_screen.dart @@ -146,8 +146,12 @@ class _NewGroupChatScreenState extends State { return widget.options.noChatsPlaceholderBuilder(widget.translations); } - return ListView.builder( + return ListView.separated( itemCount: filteredUsers.length, + separatorBuilder: (context, index) => const Padding( + padding: EdgeInsets.symmetric(horizontal: 28.0), + child: Divider(), + ), // Add Divider here itemBuilder: (context, index) { var user = filteredUsers[index]; var isSelected = @@ -166,26 +170,34 @@ class _NewGroupChatScreenState extends State { }, child: Container( color: isSelected ? Colors.amber.shade200 : Colors.white, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: widget.options.chatRowContainerBuilder( - ChatRow( - avatar: widget.options.userAvatarBuilder( - user, - 40.0, + child: Padding( + padding: + const EdgeInsets.symmetric(vertical: 12.0, horizontal: 30), + child: Row( + children: [ + Padding( + padding: const EdgeInsets.only(left: 12.0, right: 12), + child: widget.options.userAvatarBuilder(user, 40.0), + ), + Expanded( + child: Container( + height: 40.0, // Adjust the height as needed + alignment: Alignment.centerLeft, + child: Text( + user.fullName ?? widget.translations.anonymousUser, + style: const TextStyle( + fontWeight: FontWeight.w800, + ), ), - title: user.fullName ?? widget.translations.anonymousUser, ), ), - ), - if (isSelected) - const Padding( - padding: EdgeInsets.only(right: 16.0), - child: Icon(Icons.check_circle, color: Colors.green), - ), - ], + if (isSelected) + const Padding( + padding: EdgeInsets.only(right: 16.0), + child: Icon(Icons.check_circle, color: Colors.green), + ), + ], + ), ), ), ); diff --git a/packages/flutter_chat_view/pubspec.yaml b/packages/flutter_chat_view/pubspec.yaml index 2bca5e8..30dbc78 100644 --- a/packages/flutter_chat_view/pubspec.yaml +++ b/packages/flutter_chat_view/pubspec.yaml @@ -4,7 +4,7 @@ name: flutter_chat_view description: A standard flutter package. -version: 1.4.0 +version: 1.4.1 publish_to: none @@ -20,7 +20,7 @@ dependencies: git: url: https://github.com/Iconica-Development/flutter_chat path: packages/flutter_chat_interface - ref: 1.4.0 + ref: 1.4.1 cached_network_image: ^3.2.2 flutter_image_picker: git: