SolarNetwork/App
3
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💫 Better notification overlay animation

Browse Source
This commit is contained in:
LittleSheep
2026-01-15 23:02:21 +08:00
parent e24b1fc135
commit a9abd777e1
2 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/widgets/content/attachment_preview.dart
View File

@@ -468,7 +468,7 @@ class AttachmentPreview extends HookConsumerWidget {
child: innerContentWidget, child: innerContentWidget,
).center() ).center()
else else
IntrinsicHeight(child: innerContentWidget), IntrinsicHeight(child: innerContentWidget).center(),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [

68
lib/widgets/notification_overlay.dart
View File

@@ -29,31 +29,38 @@ class NotificationOverlay extends HookConsumerWidget {
return const SizedBox.shrink(); return const SizedBox.shrink();
} }
final itemWidth = isDesktop ? 420.0 : MediaQuery.sizeOf(context).width - 40;
return Positioned( return Positioned(
top: topOffset, top: topOffset,
left: 0, left: 0,
right: 0, right: 0,
child: Material( child:
color: Colors.transparent, Material(
child: Column( color: Colors.transparent,
mainAxisAlignment: MainAxisAlignment.start, child: Column(
crossAxisAlignment: isDesktop mainAxisAlignment: MainAxisAlignment.start,
? CrossAxisAlignment.end crossAxisAlignment: isDesktop
: CrossAxisAlignment.center, ? CrossAxisAlignment.end
mainAxisSize: MainAxisSize.min, : CrossAxisAlignment.center,
children: notifications.asMap().entries.map((entry) { mainAxisSize: MainAxisSize.min,
final item = entry.value; children: notifications.asMap().entries.map((entry) {
return AnimatedNotificationItem( final item = entry.value;
key: Key(item.id), return AnimatedNotificationItem(
item: item, key: Key(item.id),
isDesktop: isDesktop, item: item,
onDismiss: () { isDesktop: isDesktop,
ref.read(notificationStateProvider.notifier).remove(item.id); onDismiss: () {
}, ref
); .read(notificationStateProvider.notifier)
}).toList(), .remove(item.id);
), },
), );
}).toList(),
),
)
.width(itemWidth)
.alignment(isDesktop ? Alignment.topRight : Alignment.topCenter),
); );
} }
} }
@@ -76,9 +83,7 @@ class AnimatedNotificationItem extends HookConsumerWidget {
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 300),
reverseDuration: const Duration(milliseconds: 250), reverseDuration: const Duration(milliseconds: 250),
); );
final progressController = useAnimationController( final progressController = useAnimationController(duration: item.duration);
duration: item.duration,
);
final isDismissed = useState(false); final isDismissed = useState(false);
final curvedAnimation = CurvedAnimation( final curvedAnimation = CurvedAnimation(
@@ -114,14 +119,11 @@ class AnimatedNotificationItem extends HookConsumerWidget {
return () => timer.cancel(); return () => timer.cancel();
}, [item.duration, isDismissed.value]); }, [item.duration, isDismissed.value]);
final itemWidth = isDesktop ? 420.0 : MediaQuery.sizeOf(context).width - 40; return SlideTransition(
position: slideTween.animate(curvedAnimation),
return SizeTransition( child: SizeTransition(
sizeFactor: curvedAnimation, sizeFactor: curvedAnimation,
axis: Axis.vertical, axis: Axis.vertical,
axisAlignment: -1.0,
child: SlideTransition(
position: slideTween.animate(curvedAnimation),
child: Padding( child: Padding(
padding: isDesktop padding: isDesktop
? const EdgeInsets.only(bottom: 12, right: 16) ? const EdgeInsets.only(bottom: 12, right: 16)
@@ -131,7 +133,7 @@ class AnimatedNotificationItem extends HookConsumerWidget {
isDesktop: isDesktop, isDesktop: isDesktop,
onDismiss: () {}, onDismiss: () {},
progress: progressAnimation, progress: progressAnimation,
).width(itemWidth), ),
), ),
), ),
); );