mirror of
https://github.com/Iconica-Development/flutter_chat.git
synced 2025-05-19 02:43:50 +02:00
refactor: polish new chat screen
This commit is contained in:
parent
32189ba397
commit
a59e149420
3 changed files with 100 additions and 84 deletions
|
@ -31,7 +31,7 @@ class ChatRow extends StatelessWidget {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) => Row(
|
Widget build(BuildContext context) => Row(
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.only(left: 10.0),
|
padding: const EdgeInsets.only(left: 10.0),
|
||||||
|
@ -39,7 +39,7 @@ class ChatRow extends StatelessWidget {
|
||||||
),
|
),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 22.0),
|
padding: const EdgeInsets.only(left: 16.0),
|
||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
|
@ -48,10 +48,10 @@ class ChatRow extends StatelessWidget {
|
||||||
maxLines: 1,
|
maxLines: 1,
|
||||||
overflow: TextOverflow.ellipsis,
|
overflow: TextOverflow.ellipsis,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 18,
|
fontSize: 16,
|
||||||
fontWeight: unreadMessages > 0
|
fontWeight: unreadMessages > 0
|
||||||
? FontWeight.w600
|
? FontWeight.w900
|
||||||
: FontWeight.w400,
|
: FontWeight.w500,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
if (subTitle != null)
|
if (subTitle != null)
|
||||||
|
@ -62,11 +62,11 @@ class ChatRow extends StatelessWidget {
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
fontWeight: unreadMessages > 0
|
fontWeight: unreadMessages > 0
|
||||||
? FontWeight.w600
|
? FontWeight.w500
|
||||||
: FontWeight.w400,
|
: FontWeight.w300,
|
||||||
),
|
),
|
||||||
overflow: TextOverflow.ellipsis,
|
overflow: TextOverflow.ellipsis,
|
||||||
maxLines: 1,
|
maxLines: 2,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
@ -77,29 +77,30 @@ class ChatRow extends StatelessWidget {
|
||||||
mainAxisAlignment: MainAxisAlignment.start,
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
crossAxisAlignment: CrossAxisAlignment.end,
|
crossAxisAlignment: CrossAxisAlignment.end,
|
||||||
children: [
|
children: [
|
||||||
Text(
|
if (lastUsed != null) // Check if lastUsed is not null
|
||||||
lastUsed ?? '',
|
|
||||||
style: const TextStyle(
|
|
||||||
color: Color(0xFFBBBBBB),
|
|
||||||
fontSize: 14,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
if (unreadMessages > 0) ...[
|
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.only(top: 4.0),
|
padding: const EdgeInsets.only(bottom: 4.0),
|
||||||
child: Container(
|
child: Text(
|
||||||
width: 20,
|
lastUsed!,
|
||||||
height: 20,
|
style: const TextStyle(
|
||||||
decoration: BoxDecoration(
|
color: Color(0xFFBBBBBB),
|
||||||
color: Theme.of(context).colorScheme.primary,
|
fontSize: 14,
|
||||||
shape: BoxShape.circle,
|
|
||||||
),
|
),
|
||||||
child: Center(
|
),
|
||||||
child: Text(
|
),
|
||||||
unreadMessages.toString(),
|
if (unreadMessages > 0) ...[
|
||||||
style: const TextStyle(
|
Container(
|
||||||
fontSize: 14,
|
width: 20,
|
||||||
),
|
height: 20,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Theme.of(context).colorScheme.primary,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
),
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
unreadMessages.toString(),
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
@ -51,16 +51,23 @@ Widget _createNewChatButton(
|
||||||
ChatTranslations translations,
|
ChatTranslations translations,
|
||||||
) =>
|
) =>
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.all(24.0),
|
padding: const EdgeInsets.fromLTRB(5, 24, 5, 24),
|
||||||
child: ElevatedButton(
|
child: ElevatedButton(
|
||||||
style: ElevatedButton.styleFrom(
|
style: ElevatedButton.styleFrom(
|
||||||
backgroundColor: Colors.black,
|
backgroundColor: const Color.fromRGBO(113, 198, 209, 1),
|
||||||
minimumSize: const Size.fromHeight(50),
|
fixedSize: const Size(254, 44),
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(56),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
onPressed: onPressed,
|
onPressed: onPressed,
|
||||||
child: Text(
|
child: Text(
|
||||||
translations.newChatButton,
|
translations.newChatButton,
|
||||||
style: const TextStyle(color: Colors.white),
|
style: const TextStyle(
|
||||||
|
color: Colors.white,
|
||||||
|
fontWeight: FontWeight.w800,
|
||||||
|
fontSize: 18,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
@ -112,7 +119,7 @@ Widget _createChatRowContainer(
|
||||||
) =>
|
) =>
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.symmetric(
|
padding: const EdgeInsets.symmetric(
|
||||||
vertical: 15.0,
|
vertical: 12.0,
|
||||||
horizontal: 10.0,
|
horizontal: 10.0,
|
||||||
),
|
),
|
||||||
child: chatRow,
|
child: chatRow,
|
||||||
|
|
|
@ -92,15 +92,18 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||||
widget.service.chatOverviewService.getUnreadChatsCountStream(),
|
widget.service.chatOverviewService.getUnreadChatsCountStream(),
|
||||||
builder: (BuildContext context, snapshot) => Align(
|
builder: (BuildContext context, snapshot) => Align(
|
||||||
alignment: Alignment.centerRight,
|
alignment: Alignment.centerRight,
|
||||||
child: Padding(
|
child: Visibility(
|
||||||
padding: const EdgeInsets.only(right: 22.0),
|
visible: (snapshot.data ?? 0) > 0,
|
||||||
child: Text(
|
child: Padding(
|
||||||
'${snapshot.data ?? 0} ${translations.chatsUnread}',
|
padding: const EdgeInsets.only(right: 22.0),
|
||||||
style: widget.unreadMessageTextStyle ??
|
child: Text(
|
||||||
const TextStyle(
|
'${snapshot.data ?? 0} ${translations.chatsUnread}',
|
||||||
color: Colors.white,
|
style: widget.unreadMessageTextStyle ??
|
||||||
fontSize: 14,
|
const TextStyle(
|
||||||
),
|
color: Colors.white,
|
||||||
|
fontSize: 14,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
@ -113,7 +116,7 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||||
child: ListView(
|
child: ListView(
|
||||||
controller: controller,
|
controller: controller,
|
||||||
physics: const AlwaysScrollableScrollPhysics(),
|
physics: const AlwaysScrollableScrollPhysics(),
|
||||||
padding: const EdgeInsets.only(top: 15.0),
|
padding: const EdgeInsets.fromLTRB(28, 16, 28, 0),
|
||||||
children: [
|
children: [
|
||||||
StreamBuilder<List<ChatModel>>(
|
StreamBuilder<List<ChatModel>>(
|
||||||
stream: widget.service.chatOverviewService.getChatsStream(),
|
stream: widget.service.chatOverviewService.getChatsStream(),
|
||||||
|
@ -283,53 +286,58 @@ class ChatListItem extends StatelessWidget {
|
||||||
final DateFormatter _dateFormatter;
|
final DateFormatter _dateFormatter;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) => GestureDetector(
|
Widget build(BuildContext context) => Column(
|
||||||
|
children: [
|
||||||
|
GestureDetector(
|
||||||
onTap: () => widget.onPressChat(chat),
|
onTap: () => widget.onPressChat(chat),
|
||||||
child: Container(
|
child: Container(
|
||||||
color: Colors.transparent,
|
color: Colors.transparent,
|
||||||
child: widget.options.chatRowContainerBuilder(
|
child: widget.options.chatRowContainerBuilder(
|
||||||
(chat is PersonalChatModel)
|
(chat is PersonalChatModel)
|
||||||
? ChatRow(
|
? ChatRow(
|
||||||
unreadMessages: chat.unreadMessages ?? 0,
|
unreadMessages: chat.unreadMessages ?? 0,
|
||||||
avatar: widget.options.userAvatarBuilder(
|
avatar: widget.options.userAvatarBuilder(
|
||||||
(chat as PersonalChatModel).user,
|
(chat as PersonalChatModel).user,
|
||||||
40.0,
|
40.0,
|
||||||
),
|
),
|
||||||
title: (chat as PersonalChatModel).user.fullName ??
|
title: (chat as PersonalChatModel).user.fullName ??
|
||||||
translations.anonymousUser,
|
translations.anonymousUser,
|
||||||
subTitle: chat.lastMessage != null
|
subTitle: chat.lastMessage != null
|
||||||
? chat.lastMessage is ChatTextMessageModel
|
? chat.lastMessage is ChatTextMessageModel
|
||||||
? (chat.lastMessage! as ChatTextMessageModel).text
|
? (chat.lastMessage! as ChatTextMessageModel).text
|
||||||
: '📷 '
|
: '📷 '
|
||||||
'${translations.image}'
|
'${translations.image}'
|
||||||
: '',
|
: '',
|
||||||
lastUsed: chat.lastUsed != null
|
lastUsed: chat.lastUsed != null
|
||||||
? _dateFormatter.format(
|
? _dateFormatter.format(
|
||||||
date: chat.lastUsed!,
|
date: chat.lastUsed!,
|
||||||
)
|
)
|
||||||
: null,
|
: null,
|
||||||
)
|
)
|
||||||
: ChatRow(
|
: ChatRow(
|
||||||
title: (chat as GroupChatModel).title,
|
title: (chat as GroupChatModel).title,
|
||||||
unreadMessages: chat.unreadMessages ?? 0,
|
unreadMessages: chat.unreadMessages ?? 0,
|
||||||
subTitle: chat.lastMessage != null
|
subTitle: chat.lastMessage != null
|
||||||
? chat.lastMessage is ChatTextMessageModel
|
? chat.lastMessage is ChatTextMessageModel
|
||||||
? (chat.lastMessage! as ChatTextMessageModel).text
|
? (chat.lastMessage! as ChatTextMessageModel).text
|
||||||
: '📷 '
|
: '📷 '
|
||||||
'${translations.image}'
|
'${translations.image}'
|
||||||
: '',
|
: '',
|
||||||
avatar: widget.options.groupAvatarBuilder(
|
avatar: widget.options.groupAvatarBuilder(
|
||||||
(chat as GroupChatModel).title,
|
(chat as GroupChatModel).title,
|
||||||
(chat as GroupChatModel).imageUrl,
|
(chat as GroupChatModel).imageUrl,
|
||||||
40.0,
|
40.0,
|
||||||
),
|
),
|
||||||
lastUsed: chat.lastUsed != null
|
lastUsed: chat.lastUsed != null
|
||||||
? _dateFormatter.format(
|
? _dateFormatter.format(
|
||||||
date: chat.lastUsed!,
|
date: chat.lastUsed!,
|
||||||
)
|
)
|
||||||
: null,
|
: null,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
),
|
||||||
|
const Divider(),
|
||||||
|
],
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue