chore(flutter_chat): various fixes and improvements

- 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
This commit is contained in:
HammadAsiif 2024-08-06 09:57:16 +02:00 committed by Freek van de Ven
parent 61de7ae44a
commit f8bffceb4b
7 changed files with 62 additions and 41 deletions

View file

@ -15,6 +15,7 @@ class MessageModel {
required this.timestamp,
required this.senderId,
});
/// The chat id
final String chatId;

View file

@ -56,7 +56,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...",

View file

@ -396,6 +396,7 @@ class _ChatBottomState extends State<_ChatBottom> {
context,
_textEditingController,
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
@ -435,6 +436,8 @@ class _ChatBottomState extends State<_ChatBottom> {
widget.options.translations,
) ??
TextField(
textAlign: TextAlign.start,
textAlignVertical: TextAlignVertical.center,
style: theme.textTheme.bodySmall,
textCapitalization: TextCapitalization.sentences,
controller: _textEditingController,

View file

@ -198,12 +198,13 @@ class _Body extends StatelessWidget {
onPressed: onPressCreateGroupChat,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(
Icons.groups,
Icons.groups_2,
),
const SizedBox(
width: 4,
width: 8,
),
Text(
translations.newGroupChatButton,

View file

@ -110,6 +110,7 @@ class _Body extends StatefulWidget {
class _BodyState extends State<_Body> {
final TextEditingController _chatNameController = TextEditingController();
final TextEditingController _bioController = TextEditingController();
final ValueNotifier<bool> isButtonEnabled = ValueNotifier<bool>(false);
Uint8List? image;
GlobalKey<FormState> formKey = GlobalKey<FormState>();
@ -121,6 +122,17 @@ class _BodyState extends State<_Body> {
void initState() {
users = widget.users;
super.initState();
_chatNameController.addListener(() {
isButtonEnabled.value = _chatNameController.text.isNotEmpty;
});
}
@override
void dispose() {
_chatNameController.dispose();
_bioController.dispose();
isButtonEnabled.dispose();
super.dispose();
}
@override
@ -325,31 +337,34 @@ class _BodyState extends State<_Body> {
vertical: 24,
horizontal: 80,
),
child: FilledButton(
onPressed: users.isNotEmpty
? () async {
if (!isPressed) {
isPressed = true;
if (formKey.currentState!.validate()) {
await widget.onComplete(
users,
_chatNameController.text,
_bioController.text,
image,
);
child: ValueListenableBuilder(
valueListenable: isButtonEnabled,
builder: (context, isEnabled, child) => FilledButton(
onPressed: users.isNotEmpty
? () async {
if (!isPressed) {
isPressed = true;
if (formKey.currentState!.validate()) {
await widget.onComplete(
users,
_chatNameController.text,
_bioController.text,
image,
);
}
isPressed = false;
}
isPressed = false;
}
}
: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
translations.createGroupChatButton,
style: theme.textTheme.displayLarge,
),
],
: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
translations.createGroupChatButton,
style: theme.textTheme.displayLarge,
),
],
),
),
),
),

View file

@ -274,20 +274,21 @@ class _NextButton extends StatelessWidget {
vertical: 24,
horizontal: 80,
),
child: FilledButton(
onPressed: selectedUsers.isNotEmpty
? () {
onPressGroupChatOverview(selectedUsers);
}
: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
chatOptions.translations.next,
style: theme.textTheme.displayLarge,
),
],
child: Visibility(
visible: selectedUsers.isNotEmpty,
child: FilledButton(
onPressed: () async {
await onPressGroupChatOverview(selectedUsers);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
chatOptions.translations.next,
style: theme.textTheme.displayLarge,
),
],
),
),
),
),

View file

@ -72,7 +72,7 @@ class _UserListState extends State<UserList> {
)
.toList();
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
padding: const EdgeInsets.only(top: 8, left: 12, right: 12, bottom: 80),
child: ListView.builder(
itemCount: filteredUsers.length,
itemBuilder: (context, index) {