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

✨ Notification stacks on the mobile

Browse Source
This commit is contained in:
LittleSheep
2026-01-16 00:08:56 +08:00
parent 269c17d068
commit 8ad31dad58
2 changed files with 89 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/widgets/notification_item.dart
View File

@@ -12,6 +12,8 @@ class NotificationItemWidget extends HookConsumerWidget {
final NotificationItem item;
final VoidCallback onDismiss;
final bool isDesktop;
final int index;
final int totalNotifications;
final Animation<double> progress;
const NotificationItemWidget({
@@ -19,6 +21,8 @@ class NotificationItemWidget extends HookConsumerWidget {
required this.item,
required this.onDismiss,
required this.isDesktop,
required this.index,
required this.totalNotifications,
required this.progress,
});
@@ -48,7 +52,7 @@ class NotificationItemWidget extends HookConsumerWidget {
}
: null,
child: Card(
elevation: 4,
elevation: (index == 0 && !isDesktop && totalNotifications > 1) ? 8 : 4,
margin: EdgeInsets.zero,
color: Theme.of(context).colorScheme.surfaceContainerHigh,
shape: const RoundedRectangleBorder(
@@ -117,4 +121,4 @@ class NotificationItemWidget extends HookConsumerWidget {
),
);
}
}
}

125
lib/widgets/notification_overlay.dart
View File

@@ -29,39 +29,79 @@ class NotificationOverlay extends HookConsumerWidget {
return const SizedBox.shrink();
}
final itemWidth = isDesktop ? 420.0 : MediaQuery.sizeOf(context).width - 40;
final itemWidth = isDesktop ? 420.0 : MediaQuery.sizeOf(context).width;
return Positioned(
top: topOffset,
left: 0,
right: 0,
child:
Material(
color: Colors.transparent,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: isDesktop
? CrossAxisAlignment.end
: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: notifications.asMap().entries.map((entry) {
final item = entry.value;
return AnimatedNotificationItem(
key: Key(item.id),
item: item,
isDesktop: isDesktop,
onDismiss: () {
ref
.read(notificationStateProvider.notifier)
.remove(item.id);
},
);
}).toList(),
),
)
.width(itemWidth)
.alignment(isDesktop ? Alignment.topRight : Alignment.topCenter),
);
if (isDesktop) {
return Positioned(
top: topOffset,
left: 0,
right: 0,
child: Material(
color: Colors.transparent,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: notifications.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value;
return AnimatedNotificationItem(
key: Key(item.id),
item: item,
isDesktop: true,
index: index,
totalNotifications: notifications.length,
onDismiss: () {
ref.read(notificationStateProvider.notifier).remove(item.id);
},
);
}).toList(),
),
).width(itemWidth).alignment(Alignment.topRight),
);
} else {
// Non-desktop: use Stack with overlapping
const double notificationHeight = 80.0;
const double overlap = 20.0;
final stackHeight =
notificationHeight + (notifications.length - 1) * overlap;
return Positioned(
top: topOffset,
left: 0,
right: 0,
child: Material(
color: Colors.transparent,
child: SizedBox(
height: stackHeight,
child: Stack(
alignment: Alignment.topCenter,
children: notifications.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value;
return Positioned(
top: index * overlap,
left: 16,
right: 16,
child: AnimatedNotificationItem(
key: Key(item.id),
item: item,
isDesktop: false,
index: index,
totalNotifications: notifications.length,
onDismiss: () {
ref
.read(notificationStateProvider.notifier)
.remove(item.id);
},
).clipRRect(all: 8),
);
}).toList(),
),
),
).width(itemWidth).alignment(Alignment.topCenter),
);
}
}
}
@@ -69,12 +109,16 @@ class AnimatedNotificationItem extends HookConsumerWidget {
final NotificationItem item;
final VoidCallback onDismiss;
final bool isDesktop;
final int index;
final int totalNotifications;
const AnimatedNotificationItem({
super.key,
required this.item,
required this.onDismiss,
required this.isDesktop,
required this.index,
required this.totalNotifications,
});
@override
@@ -124,16 +168,13 @@ class AnimatedNotificationItem extends HookConsumerWidget {
child: SizeTransition(
sizeFactor: curvedAnimation,
axis: Axis.vertical,
child: Padding(
padding: isDesktop
? const EdgeInsets.only(bottom: 12, right: 16)
: const EdgeInsets.only(bottom: 12, left: 16, right: 16),
child: NotificationItemWidget(
item: item,
isDesktop: isDesktop,
onDismiss: () {},
progress: progressAnimation,
),
child: NotificationItemWidget(
item: item,
isDesktop: isDesktop,
index: index,
totalNotifications: totalNotifications,
onDismiss: () {},
progress: progressAnimation,
),
),
);