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