refactor: polish new chat screens

This commit is contained in:
Vick Top 2024-04-16 13:31:40 +02:00
parent a59e149420
commit 6e2d0feac9
3 changed files with 78 additions and 49 deletions

View file

@ -6,7 +6,7 @@ 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',

View file

@ -152,7 +152,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
),
)
: Text(
widget.translations.newChatButton,
widget.translations.newChatTitle,
style: theme.appBarTheme.titleTextStyle ??
const TextStyle(
color: Colors.white,
@ -196,20 +196,40 @@ class _NewChatScreenState extends State<NewChatScreen> {
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];
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, // 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,
),
),
),

View file

@ -146,50 +146,59 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
return widget.options.noChatsPlaceholderBuilder(widget.translations);
}
return ListView.builder(
itemCount: filteredUsers.length,
itemBuilder: (context, index) {
var user = filteredUsers[index];
var isSelected =
selectedUserList.any((selectedUser) => selectedUser == user);
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 = selectedUserList.any((selectedUser) => selectedUser == user);
return InkWell(
onTap: () {
setState(() {
if (selectedUserList.contains(user)) {
selectedUserList.remove(user);
} else {
selectedUserList.add(user);
}
debugPrint('The list of selected users is $selectedUserList');
});
},
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,
),
title: user.fullName ?? widget.translations.anonymousUser,
return InkWell(
onTap: () {
setState(() {
if (selectedUserList.contains(user)) {
selectedUserList.remove(user);
} else {
selectedUserList.add(user);
}
debugPrint('The list of selected users is $selectedUserList');
});
},
child: Container(
color: isSelected ? Colors.amber.shade200 : Colors.white,
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,
),
),
),
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),
),
],
),
);
},
),
),
);
}
}
},
);
}}