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

💄 Optimize the notification overlay styling

Browse Source
This commit is contained in:
LittleSheep
2026-01-16 00:56:57 +08:00
parent bcd6753ed2
commit d1ee2e5160
2 changed files with 118 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
lib/widgets/notification_item.dart
View File

@@ -8,12 +8,12 @@ import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:styled_widget/styled_widget.dart'; import 'package:styled_widget/styled_widget.dart';
import 'package:url_launcher/url_launcher_string.dart'; import 'package:url_launcher/url_launcher_string.dart';
const double kNotificationBorderRadius = 8;
class NotificationItemWidget extends HookConsumerWidget { class NotificationItemWidget extends HookConsumerWidget {
final NotificationItem item; final NotificationItem item;
final VoidCallback onDismiss; final VoidCallback onDismiss;
final bool isDesktop; final bool isDesktop;
final int index;
final int totalNotifications;
final Animation<double> progress; final Animation<double> progress;
const NotificationItemWidget({ const NotificationItemWidget({
@@ -21,8 +21,6 @@ class NotificationItemWidget extends HookConsumerWidget {
required this.item, required this.item,
required this.onDismiss, required this.onDismiss,
required this.isDesktop, required this.isDesktop,
required this.index,
required this.totalNotifications,
required this.progress, required this.progress,
}); });
@@ -56,92 +54,97 @@ class NotificationItemWidget extends HookConsumerWidget {
} }
} }
: null, : null,
child: Stack( child: ConstrainedBox(
children: [ constraints: const BoxConstraints(maxWidth: double.infinity),
Card( child: Stack(
elevation: (index == 0 && !isDesktop && totalNotifications > 1) ? 8 : 4, children: [
margin: EdgeInsets.zero, Card(
color: Theme.of(context).colorScheme.surfaceContainerHigh, elevation: 4,
shape: const RoundedRectangleBorder( margin: EdgeInsets.zero,
borderRadius: BorderRadius.all(Radius.circular(8)), color: Theme.of(context).colorScheme.surfaceContainerHigh,
), shape: RoundedRectangleBorder(
child: Column( borderRadius: const BorderRadius.all(
mainAxisSize: MainAxisSize.min, Radius.circular(kNotificationBorderRadius),
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,
),
],
),
),
],
),
), ),
AnimatedBuilder( ),
animation: progress, child: Column(
builder: (context, child) => LinearProgressIndicator( mainAxisSize: MainAxisSize.min,
value: progress.value, crossAxisAlignment: CrossAxisAlignment.stretch,
minHeight: 2, children: [
backgroundColor: Colors.transparent, Padding(
valueColor: AlwaysStoppedAnimation<Color>( padding: const EdgeInsets.all(12),
Theme.of(context).colorScheme.primary.withOpacity(0.5), 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,
),
],
),
),
],
), ),
), ),
), AnimatedBuilder(
], animation: progress,
).clipRRect(all: 8), builder: (context, child) => LinearProgressIndicator(
), value: progress.value,
Positioned( minHeight: 2,
top: 4, backgroundColor: Colors.transparent,
right: 4, valueColor: AlwaysStoppedAnimation<Color>(
child: IconButton( Theme.of(context).colorScheme.primary.withOpacity(0.5),
icon: Icon( ),
Symbols.close, ),
size: 20, ),
color: Theme.of(context).colorScheme.onSurfaceVariant, ],
), ),
onPressed: onDismiss,
padding: const EdgeInsets.all(4),
constraints: const BoxConstraints(),
), ),
), 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: kNotificationBorderRadius),
), ),
); );
} }
} }

60
lib/widgets/notification_overlay.dart
View File

@@ -38,18 +38,17 @@ class NotificationOverlay extends HookConsumerWidget {
child: Material( child: Material(
color: Colors.transparent, color: Colors.transparent,
child: Column( child: Column(
spacing: 8,
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: notifications.asMap().entries.map((entry) { children: notifications.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value; final item = entry.value;
return AnimatedNotificationItem( return AnimatedNotificationItem(
key: Key(item.id), key: Key(item.id),
item: item, item: item,
isDesktop: true, isDesktop: true,
index: index, margin: EdgeInsets.symmetric(horizontal: 16),
totalNotifications: notifications.length,
onDismiss: () { onDismiss: () {
ref.read(notificationStateProvider.notifier).dismiss(item.id); ref.read(notificationStateProvider.notifier).dismiss(item.id);
}, },
@@ -60,10 +59,7 @@ class NotificationOverlay extends HookConsumerWidget {
); );
} else { } else {
// Non-desktop: use Stack with overlapping // Non-desktop: use Stack with overlapping
const double notificationHeight = 80.0;
const double overlap = 20.0; const double overlap = 20.0;
final stackHeight =
notificationHeight + (notifications.length - 1) * overlap;
return Positioned( return Positioned(
top: topOffset, top: topOffset,
@@ -72,7 +68,7 @@ class NotificationOverlay extends HookConsumerWidget {
child: Material( child: Material(
color: Colors.transparent, color: Colors.transparent,
child: SizedBox( child: SizedBox(
height: stackHeight, height: MediaQuery.sizeOf(context).height,
child: Stack( child: Stack(
alignment: Alignment.topCenter, alignment: Alignment.topCenter,
children: notifications.asMap().entries.map((entry) { children: notifications.asMap().entries.map((entry) {
@@ -82,18 +78,23 @@ class NotificationOverlay extends HookConsumerWidget {
top: index * overlap, top: index * overlap,
left: 16, left: 16,
right: 16, right: 16,
child: AnimatedNotificationItem( child: Container(
key: Key(item.id), decoration: BoxDecoration(
item: item, boxShadow: [
isDesktop: false, BoxShadow(color: Colors.black54, blurRadius: 4.0 + index * 2.0),
index: index, ],
totalNotifications: notifications.length, ),
onDismiss: () { child: AnimatedNotificationItem(
ref key: Key(item.id),
.read(notificationStateProvider.notifier) item: item,
.dismiss(item.id); isDesktop: false,
}, onDismiss: () {
).clipRRect(all: 8), ref
.read(notificationStateProvider.notifier)
.dismiss(item.id);
},
),
),
); );
}).toList(), }).toList(),
), ),
@@ -108,16 +109,14 @@ class AnimatedNotificationItem extends HookConsumerWidget {
final NotificationItem item; final NotificationItem item;
final VoidCallback onDismiss; final VoidCallback onDismiss;
final bool isDesktop; final bool isDesktop;
final int index; final EdgeInsets? margin;
final int totalNotifications;
const AnimatedNotificationItem({ const AnimatedNotificationItem({
super.key, super.key,
required this.item, required this.item,
required this.onDismiss, required this.onDismiss,
required this.isDesktop, required this.isDesktop,
required this.index, this.margin,
required this.totalNotifications,
}); });
@override @override
@@ -163,13 +162,14 @@ class AnimatedNotificationItem extends HookConsumerWidget {
child: SizeTransition( child: SizeTransition(
sizeFactor: curvedAnimation, sizeFactor: curvedAnimation,
axis: Axis.vertical, axis: Axis.vertical,
child: NotificationItemWidget( child: Padding(
item: item, padding: margin ?? EdgeInsets.zero,
isDesktop: isDesktop, child: NotificationItemWidget(
index: index, item: item,
totalNotifications: totalNotifications, isDesktop: isDesktop,
onDismiss: onDismiss, onDismiss: onDismiss,
progress: progressAnimation, progress: progressAnimation,
),
), ),
), ),
); );