Skip to content

Commit

Permalink
chore: Nicer empty chat list placeholder
Browse files Browse the repository at this point in the history
  • Loading branch information
@krille-chan
krille-chan committed Aug 11, 2024
1 parent 1c6d8a0 commit 664548d
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 58 deletions.
1 change: 1 addition & 0 deletions assets/l10n/intl_en.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@
}
},
"noMoreChatsFound": "No more chats found...",
"noChatsFoundHere": "No chats found here yet. Start a new chat with someone by using the button below. ⤵️",
"joinedChats": "Joined chats",
"unread": "Unread",
"space": "Space",
Expand Down
99 changes: 41 additions & 58 deletions lib/pages/chat_list/chat_list_body.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import 'package:matrix/matrix.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/pages/chat_list/chat_list.dart';
import 'package:fluffychat/pages/chat_list/chat_list_item.dart';
import 'package:fluffychat/pages/chat_list/dummy_chat_list_item.dart';
import 'package:fluffychat/pages/chat_list/search_title.dart';
import 'package:fluffychat/pages/chat_list/space_view.dart';
import 'package:fluffychat/pages/chat_list/status_msg_list.dart';
Expand Down Expand Up @@ -61,8 +62,6 @@ class ChatListViewBody extends StatelessWidget {
.toList();
final userSearchResult = controller.userSearchResult;
const dummyChatCount = 4;
final titleColor = theme.textTheme.bodyLarge!.color!.withAlpha(100);
final subtitleColor = theme.textTheme.bodyLarge!.color!.withAlpha(50);
final filter = controller.searchController.text.toLowerCase();
return StreamBuilder(
key: ValueKey(
Expand Down Expand Up @@ -238,13 +237,44 @@ class ChatListViewBody extends StatelessWidget {
if (client.prevBatch != null &&
rooms.isEmpty &&
!controller.isSearchMode) ...[
Padding(
padding: const EdgeInsets.all(32.0),
child: Icon(
CupertinoIcons.chat_bubble_2,
size: 128,
color: theme.colorScheme.secondary,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
alignment: Alignment.center,
children: [
const Column(
mainAxisSize: MainAxisSize.min,
children: [
DummyChatListItem(
opacity: 0.5,
animate: false,
),
DummyChatListItem(
opacity: 0.3,
animate: false,
),
],
),
Icon(
CupertinoIcons.chat_bubble_text_fill,
size: 128,
color: theme.colorScheme.secondary,
),
],
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
L10n.of(context)!.noChatsFoundHere,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: theme.colorScheme.secondary,
),
),
),
],
),
],
],
Expand All @@ -253,56 +283,9 @@ class ChatListViewBody extends StatelessWidget {
if (client.prevBatch == null)
SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) => Opacity(
(context, i) => DummyChatListItem(
opacity: (dummyChatCount - i) / dummyChatCount,
child: ListTile(
leading: CircleAvatar(
backgroundColor: titleColor,
child: CircularProgressIndicator(
strokeWidth: 1,
color: theme.textTheme.bodyLarge!.color,
),
),
title: Row(
children: [
Expanded(
child: Container(
height: 14,
decoration: BoxDecoration(
color: titleColor,
borderRadius: BorderRadius.circular(3),
),
),
),
const SizedBox(width: 36),
Container(
height: 14,
width: 14,
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(14),
),
),
const SizedBox(width: 12),
Container(
height: 14,
width: 14,
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(14),
),
),
],
),
subtitle: Container(
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(3),
),
height: 12,
margin: const EdgeInsets.only(right: 22),
),
),
animate: true,
),
childCount: dummyChatCount,
),
Expand Down
72 changes: 72 additions & 0 deletions lib/pages/chat_list/dummy_chat_list_item.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import 'package:flutter/material.dart';

class DummyChatListItem extends StatelessWidget {
final double opacity;
final bool animate;

const DummyChatListItem({
required this.opacity,
required this.animate,
super.key,
});

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final titleColor = theme.textTheme.bodyLarge!.color!.withAlpha(100);
final subtitleColor = theme.textTheme.bodyLarge!.color!.withAlpha(50);
return Opacity(
opacity: opacity,
child: ListTile(
leading: CircleAvatar(
backgroundColor: titleColor,
child: animate
? CircularProgressIndicator(
strokeWidth: 1,
color: theme.textTheme.bodyLarge!.color,
)
: const SizedBox.shrink(),
),
title: Row(
children: [
Expanded(
child: Container(
height: 14,
decoration: BoxDecoration(
color: titleColor,
borderRadius: BorderRadius.circular(3),
),
),
),
const SizedBox(width: 36),
Container(
height: 14,
width: 14,
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(14),
),
),
const SizedBox(width: 12),
Container(
height: 14,
width: 14,
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(14),
),
),
],
),
subtitle: Container(
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(3),
),
height: 12,
margin: const EdgeInsets.only(right: 22),
),
),
);
}
}

0 comments on commit 664548d

Please sign in to comment.