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

💄 Optimize notification item

Browse Source
This commit is contained in:
LittleSheep
2026-01-15 19:31:11 +08:00
parent 491252bba9
commit d5feea52fa
2 changed files with 72 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
lib/widgets/notification_item.dart
View File

@@ -12,12 +12,14 @@ class NotificationItemWidget extends HookConsumerWidget {
final NotificationItem item; final NotificationItem item;
final VoidCallback onDismiss; final VoidCallback onDismiss;
final bool isDesktop; final bool isDesktop;
final Animation<double> progress;
const NotificationItemWidget({ const NotificationItemWidget({
super.key, super.key,
required this.item, required this.item,
required this.onDismiss, required this.onDismiss,
required this.isDesktop, required this.isDesktop,
required this.progress,
}); });
@override @override
@@ -52,54 +54,66 @@ class NotificationItemWidget extends HookConsumerWidget {
shape: const RoundedRectangleBorder( shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)), borderRadius: BorderRadius.all(Radius.circular(8)),
), ),
child: ConstrainedBox( child: Column(
constraints: BoxConstraints( mainAxisSize: MainAxisSize.min,
maxWidth: isDesktop ? 400 : double.infinity, crossAxisAlignment: CrossAxisAlignment.stretch,
), children: [
child: Padding( Padding(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
if (item.notification.meta['pfp'] != null) if (item.notification.meta['pfp'] != null)
ProfilePictureWidget( ProfilePictureWidget(
fileId: item.notification.meta['pfp'], fileId: item.notification.meta['pfp'],
radius: 12, radius: 12,
).padding(right: 12, top: 2) ).padding(right: 12, top: 2)
else else
Icon( Icon(
Symbols.info, Symbols.info,
color: Theme.of(context).colorScheme.primary, color: Theme.of(context).colorScheme.primary,
size: 24, size: 24,
).padding(right: 12), ).padding(right: 12),
Flexible( Flexible(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Text(
item.notification.title,
style: Theme.of(context).textTheme.titleMedium
?.copyWith(fontWeight: FontWeight.bold),
),
if (item.notification.content.isNotEmpty)
Text( Text(
item.notification.content, item.notification.title,
style: Theme.of(context).textTheme.bodyMedium, style: Theme.of(context).textTheme.titleMedium
?.copyWith(fontWeight: FontWeight.bold),
), ),
if (item.notification.subtitle.isNotEmpty) if (item.notification.content.isNotEmpty)
Text( Text(
item.notification.subtitle, item.notification.content,
style: Theme.of(context).textTheme.bodySmall, style: Theme.of(context).textTheme.bodyMedium,
), ),
], if (item.notification.subtitle.isNotEmpty)
Text(
item.notification.subtitle,
style: Theme.of(context).textTheme.bodySmall,
),
],
),
), ),
), ],
], ),
), ),
), AnimatedBuilder(
), animation: progress,
builder: (context, child) => LinearProgressIndicator(
value: progress.value,
minHeight: 2,
backgroundColor: Colors.transparent,
valueColor: AlwaysStoppedAnimation<Color>(
Theme.of(context).colorScheme.primary.withOpacity(0.5),
),
),
),
],
).clipRRect(all: 8),
), ),
); );
} }

16
lib/widgets/notification_overlay.dart
View File

@@ -76,6 +76,9 @@ 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(
duration: item.duration,
);
final isDismissed = useState(false); final isDismissed = useState(false);
final slideTween = Tween<Offset>( final slideTween = Tween<Offset>(
@@ -83,8 +86,14 @@ class AnimatedNotificationItem extends HookConsumerWidget {
end: Offset.zero, end: Offset.zero,
).chain(CurveTween(curve: Curves.easeOutCubic)); ).chain(CurveTween(curve: Curves.easeOutCubic));
final progressAnimation = Tween<double>(
begin: 1.0,
end: 0.0,
).animate(progressController);
useEffect(() { useEffect(() {
animationController.forward(); animationController.forward();
progressController.forward();
return null; return null;
}, []); }, []);
@@ -100,6 +109,8 @@ 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( return SlideTransition(
position: slideTween.animate(animationController), position: slideTween.animate(animationController),
child: Padding( child: Padding(
@@ -110,8 +121,9 @@ class AnimatedNotificationItem extends HookConsumerWidget {
item: item, item: item,
isDesktop: isDesktop, isDesktop: isDesktop,
onDismiss: () {}, onDismiss: () {},
).width(isDesktop ? 420 : MediaQuery.sizeOf(context).width - 40), progress: progressAnimation,
).width(itemWidth),
), ),
); );
} }
} }