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({ const ChatTranslations({
this.chatsTitle = 'Chats', this.chatsTitle = 'Chats',
this.chatsUnread = 'unread', this.chatsUnread = 'unread',
this.newChatButton = 'Start chat', this.newChatButton = 'Start a chat',
this.newGroupChatButton = 'Start group chat', this.newGroupChatButton = 'Start group chat',
this.newChatTitle = 'Start chat', this.newChatTitle = 'Start chat',
this.image = 'Image', this.image = 'Image',

View file

@ -152,7 +152,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
), ),
) )
: Text( : Text(
widget.translations.newChatButton, widget.translations.newChatTitle,
style: theme.appBarTheme.titleTextStyle ?? style: theme.appBarTheme.titleTextStyle ??
const TextStyle( const TextStyle(
color: Colors.white, color: Colors.white,
@ -196,20 +196,40 @@ class _NewChatScreenState extends State<NewChatScreen> {
return widget.options.noChatsPlaceholderBuilder(widget.translations); return widget.options.noChatsPlaceholderBuilder(widget.translations);
} }
return ListView.builder( return ListView.separated(
itemCount: filteredUsers.length, itemCount: filteredUsers.length,
separatorBuilder: (context, index) => const Padding(
padding: EdgeInsets.symmetric(horizontal: 28.0),
child: Divider(),
), // Add Divider here
itemBuilder: (context, index) { itemBuilder: (context, index) {
var user = filteredUsers[index]; var user = filteredUsers[index];
return GestureDetector( return GestureDetector(
child: widget.options.chatRowContainerBuilder( child: widget.options.chatRowContainerBuilder(
Container( Container(
color: Colors.transparent, color: Colors.transparent,
child: ChatRow( child: Padding(
avatar: widget.options.userAvatarBuilder( padding: const EdgeInsets.symmetric(horizontal: 20.0),
user, child: Row(
40.0, 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 widget.options.noChatsPlaceholderBuilder(widget.translations);
} }
return ListView.builder( return ListView.separated(
itemCount: filteredUsers.length, itemCount: filteredUsers.length,
itemBuilder: (context, index) { separatorBuilder: (context, index) => const Padding(
var user = filteredUsers[index]; padding: EdgeInsets.symmetric(horizontal: 28.0),
var isSelected = child: Divider(),
selectedUserList.any((selectedUser) => selectedUser == user); ), // Add Divider here
itemBuilder: (context, index) {
var user = filteredUsers[index];
var isSelected = selectedUserList.any((selectedUser) => selectedUser == user);
return InkWell( return InkWell(
onTap: () { onTap: () {
setState(() { setState(() {
if (selectedUserList.contains(user)) { if (selectedUserList.contains(user)) {
selectedUserList.remove(user); selectedUserList.remove(user);
} else { } else {
selectedUserList.add(user); selectedUserList.add(user);
} }
debugPrint('The list of selected users is $selectedUserList'); debugPrint('The list of selected users is $selectedUserList');
}); });
}, },
child: Container( child: Container(
color: isSelected ? Colors.amber.shade200 : Colors.white, color: isSelected ? Colors.amber.shade200 : Colors.white,
child: Row( child: Padding(
mainAxisAlignment: MainAxisAlignment.spaceBetween, padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 30),
children: [ child: Row(
Expanded( children: [
child: widget.options.chatRowContainerBuilder( Padding(
ChatRow( padding: const EdgeInsets.only(left: 12.0, right: 12),
avatar: widget.options.userAvatarBuilder( child: widget.options.userAvatarBuilder(user, 40.0),
user, ),
40.0, Expanded(
), child: Container(
title: user.fullName ?? widget.translations.anonymousUser, 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( if (isSelected)
padding: EdgeInsets.only(right: 16.0), const Padding(
child: Icon(Icons.check_circle, color: Colors.green), padding: EdgeInsets.only(right: 16.0),
), child: Icon(Icons.check_circle, color: Colors.green),
], ),
), ],
), ),
); ),
}, ),
); );
} },
} );
}}