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,17 +77,19 @@ 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 ?? '', Padding(
padding: const EdgeInsets.only(bottom: 4.0),
child: Text(
lastUsed!,
style: const TextStyle( style: const TextStyle(
color: Color(0xFFBBBBBB), color: Color(0xFFBBBBBB),
fontSize: 14, fontSize: 14,
), ),
), ),
),
if (unreadMessages > 0) ...[ if (unreadMessages > 0) ...[
Padding( Container(
padding: const EdgeInsets.only(top: 4.0),
child: Container(
width: 20, width: 20,
height: 20, height: 20,
decoration: BoxDecoration( decoration: BoxDecoration(
@ -103,7 +105,6 @@ class ChatRow extends StatelessWidget {
), ),
), ),
), ),
),
], ],
], ],
), ),

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,6 +92,8 @@ 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: Visibility(
visible: (snapshot.data ?? 0) > 0,
child: Padding( child: Padding(
padding: const EdgeInsets.only(right: 22.0), padding: const EdgeInsets.only(right: 22.0),
child: Text( child: Text(
@ -105,6 +107,7 @@ class _ChatScreenState extends State<ChatScreen> {
), ),
), ),
), ),
),
], ],
), ),
Column( Column(
@ -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,7 +286,9 @@ 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,
@ -331,5 +336,8 @@ class ChatListItem extends StatelessWidget {
), ),
), ),
), ),
),
const Divider(),
],
); );
} }