💫 Optimize the chat room animation

This commit is contained in:
2026-01-10 16:10:55 +08:00
parent 3847581f1f
commit e36d694397
4 changed files with 209 additions and 180 deletions

View File

@@ -143,7 +143,6 @@ class ChatRoomScreen extends HookConsumerWidget {
final inputKey = useMemoized(() => GlobalKey(), []);
final inputHeight = useState<double>(80.0);
final inputManager = useRoomInputManager(ref, id);
final roomOpenTime = useMemoized(() => DateTime.now());
final previousInputHeightRef = useRef<double?>(null);
@@ -372,7 +371,6 @@ class ChatRoomScreen extends HookConsumerWidget {
roomAsync: chatRoom,
chatIdentity: chatIdentity,
scrollController: scrollManager.scrollController,
listController: scrollManager.listController,
isSelectionMode: isSelectionMode.value,
selectedMessages: selectedMessages.value,
toggleSelectionMode: toggleSelectionMode,
@@ -381,10 +379,10 @@ class ChatRoomScreen extends HookConsumerWidget {
onJump: onJump,
attachmentProgress:
inputManager.attachmentProgress,
disableAnimation: settings.disableAnimation,
roomOpenTime: roomOpenTime,
inputHeight: inputHeight.value,
previousInputHeight: previousInputHeightRef.value,
roomOpenTime: roomOpenTime,
disableAnimation: settings.disableAnimation,
),
loading: () => const Center(
key: ValueKey('loading-messages'),

View File

@@ -5,23 +5,6 @@ import 'package:island/database/message.dart';
import 'package:island/models/chat.dart';
import 'package:island/widgets/chat/message_item.dart';
// Provider to track animated messages to prevent replay
final animatedMessagesProvider =
NotifierProvider<AnimatedMessagesNotifier, Set<String>>(
AnimatedMessagesNotifier.new,
);
class AnimatedMessagesNotifier extends Notifier<Set<String>> {
@override
Set<String> build() {
return {};
}
void addMessage(String messageId) {
state = {...state, messageId};
}
}
class MessageItemWrapper extends ConsumerWidget {
final LocalChatMessage message;
final int index;
@@ -34,8 +17,8 @@ class MessageItemWrapper extends ConsumerWidget {
final Function(String, LocalChatMessage) onMessageAction;
final Function(String) onJump;
final Map<String, Map<int, double?>> attachmentProgress;
final bool disableAnimation;
final DateTime roomOpenTime;
final bool disableAnimation;
const MessageItemWrapper({
super.key,
@@ -50,53 +33,18 @@ class MessageItemWrapper extends ConsumerWidget {
required this.onMessageAction,
required this.onJump,
required this.attachmentProgress,
required this.disableAnimation,
required this.roomOpenTime,
required this.disableAnimation,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
// Animation logic
final animatedMessages = ref.watch(animatedMessagesProvider);
final isNewMessage = message.createdAt.isAfter(roomOpenTime);
final hasAnimated = animatedMessages.contains(message.id);
// Only animate if:
// 1. Animation is enabled
// 2. Message is new (created after room open)
// 3. Has not animated yet
final shouldAnimate = !disableAnimation && isNewMessage && !hasAnimated;
final child = chatIdentity.when(
return chatIdentity.when(
skipError: true,
data: (identity) => _buildContent(context, identity),
loading: () => _buildLoading(),
error: (_, _) => const SizedBox.shrink(),
);
if (!shouldAnimate) {
return child;
}
return TweenAnimationBuilder<double>(
key: ValueKey('anim-${message.id}'), // Ensure unique key for animation
tween: Tween<double>(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 400 + (index % 5) * 50),
curve: Curves.easeOutCubic,
builder: (context, value, child) {
return Transform.translate(
offset: Offset(0, 20 * (1 - value)),
child: Opacity(opacity: value, child: child),
);
},
onEnd: () {
// Mark as animated
WidgetsBinding.instance.addPostFrameCallback((_) {
ref.read(animatedMessagesProvider.notifier).addMessage(message.id);
});
},
child: child,
);
}
Widget _buildContent(BuildContext context, SnChatMember? identity) {
@@ -116,12 +64,9 @@ class MessageItemWrapper extends ConsumerWidget {
}
},
child: Container(
color:
isSelected
? Theme.of(
context,
).colorScheme.primaryContainer.withOpacity(0.3)
: null,
color: isSelected
? Theme.of(context).colorScheme.primaryContainer.withOpacity(0.3)
: null,
child: Stack(
children: [
MessageItem(
@@ -130,10 +75,9 @@ class MessageItemWrapper extends ConsumerWidget {
key: ValueKey('item-${message.id}'),
message: message,
isCurrentUser: isCurrentUser,
onAction:
isSelectionMode
? null
: (action) => onMessageAction(action, message),
onAction: isSelectionMode
? null
: (action) => onMessageAction(action, message),
onJump: onJump,
progress: attachmentProgress[message.id],
showAvatar: isLastInGroup,