refactor: polish new chat screen

This commit is contained in:
Vick Top 2024-04-16 11:26:53 +02:00
parent 32189ba397
commit a59e149420
3 changed files with 100 additions and 84 deletions

View file

@ -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,
), ),
), ),
), ),

View file

@ -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,

View file

@ -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(),
],
);
} }