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

💄 Optimize the notification overlays

Browse Source
This commit is contained in:
LittleSheep
2026-01-16 00:21:07 +08:00
parent 8ad31dad58
commit 321ea4458b
4 changed files with 143 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
lib/widgets/notification_item.dart
View File

@@ -44,80 +44,103 @@ class NotificationItemWidget extends HookConsumerWidget {
}
}
},
onHorizontalDragEnd: isDesktop
onHorizontalDragEnd: (details) {
if (details.primaryVelocity! > 100) {
onDismiss();
}
},
onVerticalDragEnd: !isDesktop
? (details) {
if (details.primaryVelocity! > 100) {
if (details.primaryVelocity! < -100) {
onDismiss();
}
}
: null,
child: Card(
elevation: (index == 0 && !isDesktop && totalNotifications > 1) ? 8 : 4,
margin: EdgeInsets.zero,
color: Theme.of(context).colorScheme.surfaceContainerHigh,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.all(12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (item.notification.meta['pfp'] != null)
ProfilePictureWidget(
fileId: item.notification.meta['pfp'],
radius: 12,
).padding(right: 12, top: 2)
else
Icon(
Symbols.info,
color: Theme.of(context).colorScheme.primary,
size: 24,
).padding(right: 12),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
item.notification.title,
style: Theme.of(context).textTheme.titleMedium
?.copyWith(fontWeight: FontWeight.bold),
child: Stack(
children: [
Card(
elevation: (index == 0 && !isDesktop && totalNotifications > 1) ? 8 : 4,
margin: EdgeInsets.zero,
color: Theme.of(context).colorScheme.surfaceContainerHigh,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.all(12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (item.notification.meta['pfp'] != null)
ProfilePictureWidget(
fileId: item.notification.meta['pfp'],
radius: 12,
).padding(right: 12, top: 2)
else
Icon(
Symbols.info,
color: Theme.of(context).colorScheme.primary,
size: 24,
).padding(right: 12),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
item.notification.title,
style: Theme.of(context).textTheme.titleMedium
?.copyWith(fontWeight: FontWeight.bold),
),
if (item.notification.content.isNotEmpty)
Text(
item.notification.content,
style: Theme.of(context).textTheme.bodyMedium,
),
if (item.notification.subtitle.isNotEmpty)
Text(
item.notification.subtitle,
style: Theme.of(context).textTheme.bodySmall,
),
],
),
if (item.notification.content.isNotEmpty)
Text(
item.notification.content,
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),
),
),
],
),
),
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),
),
Positioned(
top: 4,
right: 4,
child: IconButton(
icon: Icon(
Symbols.close,
size: 20,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
onPressed: onDismiss,
padding: const EdgeInsets.all(4),
constraints: const BoxConstraints(),
),
],
).clipRRect(all: 8),
),
],
),
);
}

27
lib/widgets/notification_overlay.dart
View File

@@ -1,4 +1,3 @@
import 'dart:async';
import 'dart:io';
import 'package:flutter/foundation.dart';
@@ -52,7 +51,7 @@ class NotificationOverlay extends HookConsumerWidget {
index: index,
totalNotifications: notifications.length,
onDismiss: () {
ref.read(notificationStateProvider.notifier).remove(item.id);
ref.read(notificationStateProvider.notifier).dismiss(item.id);
},
);
}).toList(),
@@ -92,7 +91,7 @@ class NotificationOverlay extends HookConsumerWidget {
onDismiss: () {
ref
.read(notificationStateProvider.notifier)
.remove(item.id);
.dismiss(item.id);
},
).clipRRect(all: 8),
);
@@ -128,7 +127,6 @@ class AnimatedNotificationItem extends HookConsumerWidget {
reverseDuration: const Duration(milliseconds: 250),
);
final progressController = useAnimationController(duration: item.duration);
final isDismissed = useState(false);
final curvedAnimation = CurvedAnimation(
parent: animationController,
@@ -152,16 +150,13 @@ class AnimatedNotificationItem extends HookConsumerWidget {
}, []);
useEffect(() {
if (isDismissed.value) return null;
final timer = Timer(item.duration, () async {
if (!isDismissed.value) {
isDismissed.value = true;
await animationController.reverse();
onDismiss();
}
});
return () => timer.cancel();
}, [item.duration, isDismissed.value]);
if (item.dismissed) {
animationController.reverse().then((_) {
ref.read(notificationStateProvider.notifier).remove(item.id);
});
}
return null;
}, [item.dismissed]);
return SlideTransition(
position: slideTween.animate(curvedAnimation),
@@ -173,10 +168,10 @@ class AnimatedNotificationItem extends HookConsumerWidget {
isDesktop: isDesktop,
index: index,
totalNotifications: totalNotifications,
onDismiss: () {},
onDismiss: onDismiss,
progress: progressAnimation,
),
),
);
}
}
}