From 066cbe952ee7e52693c8426b150d5d2b283b47ae Mon Sep 17 00:00:00 2001 From: HammadAsiif Date: Tue, 6 Aug 2024 09:57:16 +0200 Subject: [PATCH 1/2] chore(flutter_chat): various fixes and improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - style: use consistent font in buttons - fix: update profile picture icon for adding a group chat to match design - fix: align "Write your message here" placeholder text and buttons properly in the input box - fix: ensure 'next' button is not visible when no one is selected for group chat - fix: allow scroll to go further so the last person in the list is not hidden by the ‘next’ button - fix: make entire name clickable when adding members to a group chat - fix: change text from “create a groupchat” to “start a groupchat” - fix: make 'create group chat' button inactive until a name is entered - style: adjust image picker icon sizes, and cancel button font --- .../lib/src/components/chat_bottom.dart | 1 + .../lib/src/config/chat_options.dart | 7 +- .../lib/src/config/chat_translations.dart | 2 +- .../lib/src/screens/new_chat_screen.dart | 6 +- .../new_group_chat_overview_screen.dart | 66 +++++++---- .../src/screens/new_group_chat_screen.dart | 108 ++++++++++-------- 6 files changed, 112 insertions(+), 78 deletions(-) diff --git a/packages/flutter_chat_view/lib/src/components/chat_bottom.dart b/packages/flutter_chat_view/lib/src/components/chat_bottom.dart index e57ebb3..c6d1f19 100644 --- a/packages/flutter_chat_view/lib/src/components/chat_bottom.dart +++ b/packages/flutter_chat_view/lib/src/components/chat_bottom.dart @@ -68,6 +68,7 @@ class _ChatBottomState extends State { child: widget.messageInputBuilder( _textEditingController, Row( + crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ IconButton( 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 4eeba87..8333d79 100644 --- a/packages/flutter_chat_view/lib/src/config/chat_options.dart +++ b/packages/flutter_chat_view/lib/src/config/chat_options.dart @@ -116,6 +116,8 @@ Widget _createMessageInput( ) { var theme = Theme.of(context); return TextField( + textAlign: TextAlign.start, + textAlignVertical: TextAlignVertical.center, style: theme.textTheme.bodySmall, textCapitalization: TextCapitalization.sentences, controller: textEditingController, @@ -189,12 +191,12 @@ Widget _createImagePickerContainer( title: translations.imagePickerTitle, titleTextSize: 16, titleAlignment: TextAlign.center, - iconSize: 60.0, + iconSize: 40.0, makePhotoText: translations.takePicture, selectImageText: translations.uploadFile, selectImageIcon: const Icon( Icons.insert_drive_file_rounded, - size: 60, + size: 40, ), ), customButton: TextButton( @@ -202,6 +204,7 @@ Widget _createImagePickerContainer( child: Text( translations.cancelImagePickerBtn, style: theme.textTheme.bodyMedium!.copyWith( + fontSize: 18, decoration: TextDecoration.underline, ), ), 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 6c3ee2d..20fe94e 100644 --- a/packages/flutter_chat_view/lib/src/config/chat_translations.dart +++ b/packages/flutter_chat_view/lib/src/config/chat_translations.dart @@ -53,7 +53,7 @@ class ChatTranslations { this.chatsTitle = "Chats", this.chatsUnread = "unread", this.newChatButton = "Start chat", - this.newGroupChatButton = "Create a groupchat", + this.newGroupChatButton = "Start a groupchat", this.newChatTitle = "Start a chat", this.image = "Image", this.searchPlaceholder = "Search...", 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 0e7903e..c663b2a 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 @@ -70,12 +70,13 @@ class _NewChatScreenState extends State { }, child: Row( mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, children: [ const Icon( - Icons.groups, + Icons.groups_2, ), const SizedBox( - width: 4, + width: 8, ), Text( widget.translations.newGroupChatButton, @@ -122,6 +123,7 @@ class _NewChatScreenState extends State { }); }, decoration: InputDecoration( + contentPadding: const EdgeInsets.only(bottom: 8), hintText: widget.translations.searchPlaceholder, hintStyle: theme.textTheme.bodyMedium!.copyWith(color: Colors.white), diff --git a/packages/flutter_chat_view/lib/src/screens/new_group_chat_overview_screen.dart b/packages/flutter_chat_view/lib/src/screens/new_group_chat_overview_screen.dart index 168ce86..8238fee 100644 --- a/packages/flutter_chat_view/lib/src/screens/new_group_chat_overview_screen.dart +++ b/packages/flutter_chat_view/lib/src/screens/new_group_chat_overview_screen.dart @@ -36,8 +36,25 @@ class _NewGroupChatOverviewScreenState extends State { final TextEditingController _chatNameController = TextEditingController(); final TextEditingController _bioController = TextEditingController(); + final ValueNotifier isButtonEnabled = ValueNotifier(false); Uint8List? image; + @override + void initState() { + super.initState(); + _chatNameController.addListener(() { + isButtonEnabled.value = _chatNameController.text.isNotEmpty; + }); + } + + @override + void dispose() { + _chatNameController.dispose(); + _bioController.dispose(); + isButtonEnabled.dispose(); + super.dispose(); + } + @override Widget build(BuildContext context) { var theme = Theme.of(context); @@ -254,31 +271,34 @@ class _NewGroupChatOverviewScreenState vertical: 24, horizontal: 80, ), - child: FilledButton( - onPressed: users.isNotEmpty - ? () async { - if (!isPressed) { - isPressed = true; - if (formKey.currentState!.validate()) { - await widget.onPressCompleteGroupChatCreation( - users, - _chatNameController.text, - _bioController.text, - image, - ); + child: ValueListenableBuilder( + valueListenable: isButtonEnabled, + builder: (context, isEnabled, child) => FilledButton( + onPressed: users.isNotEmpty && isEnabled + ? () async { + if (!isPressed) { + isPressed = true; + if (formKey.currentState!.validate()) { + await widget.onPressCompleteGroupChatCreation( + users, + _chatNameController.text, + _bioController.text, + image, + ); + } + isPressed = false; } - isPressed = false; } - } - : null, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - widget.translations.createGroupChatButton, - style: theme.textTheme.displayLarge, - ), - ], + : null, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + widget.translations.createGroupChatButton, + style: theme.textTheme.displayLarge, + ), + ], + ), ), ), ), 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 b8b7be2..f270723 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 @@ -187,23 +187,24 @@ class _NextButtonState extends State { vertical: 24, horizontal: 80, ), - child: FilledButton( - onPressed: widget - .service.chatOverviewService.currentlySelectedUsers.isNotEmpty - ? () async { - await widget.onPressGroupChatOverview( - widget.service.chatOverviewService.currentlySelectedUsers, - ); - } - : null, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - "Next", - style: theme.textTheme.displayLarge, - ), - ], + child: Visibility( + visible: widget + .service.chatOverviewService.currentlySelectedUsers.isNotEmpty, + child: FilledButton( + onPressed: () async { + await widget.onPressGroupChatOverview( + widget.service.chatOverviewService.currentlySelectedUsers, + ); + }, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "Next", + style: theme.textTheme.displayLarge, + ), + ], + ), ), ), ), @@ -246,10 +247,26 @@ class _UserListState extends State { setState(() {}); } + void _toggleUserSelection(user) { + setState(() { + if (widget.service.chatOverviewService.currentlySelectedUsers + .contains(user)) { + widget.service.chatOverviewService.removeCurrentlySelectedUser(user); + } else { + widget.service.chatOverviewService.addCurrentlySelectedUser(user); + } + }); + } + @override Widget build(BuildContext context) => Padding( padding: widget.options.paddingAroundChatList ?? - const EdgeInsets.symmetric(vertical: 8, horizontal: 12), + const EdgeInsets.only( + top: 8, + left: 12, + right: 12, + bottom: 80, + ), child: ListView.builder( itemCount: widget.filteredUsers.length, itemBuilder: (context, index) { @@ -259,38 +276,29 @@ class _UserListState extends State { .any((selectedUser) => selectedUser == user); var theme = Theme.of(context); return widget.options.chatRowContainerBuilder( - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Row( - children: [ - widget.options.userAvatarBuilder(user, 44), - const SizedBox( - width: 12, - ), - Text( - user.fullName ?? widget.translations.anonymousUser, - style: theme.textTheme.titleMedium, - ), - ], - ), - Checkbox( - value: isSelected, - onChanged: (value) { - setState(() { - if (widget - .service.chatOverviewService.currentlySelectedUsers - .contains(user)) { - widget.service.chatOverviewService - .removeCurrentlySelectedUser(user); - } else { - widget.service.chatOverviewService - .addCurrentlySelectedUser(user); - } - }); - }, - ), - ], + InkWell( + onTap: () => _toggleUserSelection(user), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + widget.options.userAvatarBuilder(user, 44), + const SizedBox( + width: 12, + ), + Text( + user.fullName ?? widget.translations.anonymousUser, + style: theme.textTheme.titleMedium, + ), + ], + ), + Checkbox( + value: isSelected, + onChanged: (value) => _toggleUserSelection(user), + ), + ], + ), ), context, ); From 451f03ac5c76c329a40f829dc6fb640ce1465bde Mon Sep 17 00:00:00 2001 From: mike doornenbal Date: Wed, 7 Aug 2024 13:50:39 +0200 Subject: [PATCH 2/2] fix: upgrade image_picker to 4.0.0 --- .../lib/src/config/chat_options.dart | 27 +++++++++---------- packages/flutter_chat_view/pubspec.yaml | 5 ++-- 2 files changed, 15 insertions(+), 17 deletions(-) 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 8333d79..27273b6 100644 --- a/packages/flutter_chat_view/lib/src/config/chat_options.dart +++ b/packages/flutter_chat_view/lib/src/config/chat_options.dart @@ -184,13 +184,22 @@ Widget _createImagePickerContainer( ) { var theme = Theme.of(context); return Container( - padding: const EdgeInsets.all(8.0), + padding: const EdgeInsets.all(20), color: Colors.white, child: ImagePicker( - imagePickerTheme: ImagePickerTheme( + theme: ImagePickerTheme( + closeButtonBuilder: (ontap) => TextButton( + onPressed: onClose, + child: Text( + translations.cancelImagePickerBtn, + style: theme.textTheme.bodyMedium!.copyWith( + fontSize: 18, + decoration: TextDecoration.underline, + ), + ), + ), title: translations.imagePickerTitle, - titleTextSize: 16, - titleAlignment: TextAlign.center, + titleStyle: theme.textTheme.titleMedium, iconSize: 40.0, makePhotoText: translations.takePicture, selectImageText: translations.uploadFile, @@ -199,16 +208,6 @@ Widget _createImagePickerContainer( size: 40, ), ), - customButton: TextButton( - onPressed: onClose, - child: Text( - translations.cancelImagePickerBtn, - style: theme.textTheme.bodyMedium!.copyWith( - fontSize: 18, - decoration: TextDecoration.underline, - ), - ), - ), ), ); } diff --git a/packages/flutter_chat_view/pubspec.yaml b/packages/flutter_chat_view/pubspec.yaml index 43e0f69..cc728a0 100644 --- a/packages/flutter_chat_view/pubspec.yaml +++ b/packages/flutter_chat_view/pubspec.yaml @@ -23,9 +23,8 @@ dependencies: ref: 3.1.0 cached_network_image: ^3.2.2 flutter_image_picker: - git: - url: https://github.com/Iconica-Development/flutter_image_picker - ref: 1.0.5 + hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub + version: ^4.0.0 flutter_profile: git: ref: 1.5.0