mirror of
https://github.com/Iconica-Development/flutter_chat.git
synced 2025-05-18 18:33:49 +02:00
refactor: polish new chat screens
This commit is contained in:
parent
a59e149420
commit
6e2d0feac9
3 changed files with 78 additions and 49 deletions
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
}}
|
Loading…
Reference in a new issue