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

♻️ Improved new notifcation style

Browse Source
This commit is contained in:
LittleSheep
2026-01-15 01:04:15 +08:00
parent d639df7623
commit 476da28b5e
11 changed files with 414 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
lib/widgets/alert.dart
View File

@@ -6,6 +6,8 @@ import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/main.dart';
import 'package:island/models/account.dart';
import 'package:island/pods/notification.dart';
import 'package:island/talker.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:styled_widget/styled_widget.dart';
@@ -163,7 +165,6 @@ String _parseRemoteError(DioException err) {
return message ?? err.toString();
}
// Track active overlay dialogs for dismissal
final List<void Function()> _activeOverlayDialogs = [];
Future<T?> showOverlayDialog<T>({
@@ -229,7 +230,6 @@ Future<T?> showOverlayDialog<T>({
return completer.future;
}
// Close the topmost overlay dialog if any exists
bool closeTopmostOverlayDialog() {
if (_activeOverlayDialogs.isNotEmpty) {
final closeFunc = _activeOverlayDialogs.last;
@@ -378,6 +378,34 @@ Future<bool> showConfirmAlert(
return result ?? false;
}
void showNotification({
required String title,
String content = '',
String subtitle = '',
Map<String, dynamic> meta = const {},
Duration? duration,
}) {
final context = globalOverlay.currentState!.context;
final ref = ProviderScope.containerOf(context);
final notification = SnNotification(
createdAt: DateTime.now(),
updatedAt: DateTime.now(),
deletedAt: null,
id: 'local_${DateTime.now().millisecondsSinceEpoch}',
topic: 'local',
title: title,
subtitle: subtitle,
content: content,
meta: meta,
priority: 0,
viewedAt: null,
accountId: 'local',
);
ref
.read(notificationStateProvider.notifier)
.add(notification, duration: duration);
}
Future<void> openExternalLink(Uri url, WidgetRef ref) async {
final whitelistDomains = ['solian.app', 'solsynth.dev'];
if (whitelistDomains.any(

3
lib/widgets/app_scaffold.dart
View File

@@ -17,6 +17,7 @@ import 'package:island/services/event_bus.dart';
import 'package:island/services/responsive.dart';
import 'package:island/widgets/alert.dart';
import 'package:island/widgets/cmp/pattle.dart';
import 'package:island/widgets/notification_overlay.dart';
import 'package:island/widgets/task_overlay.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:path_provider/path_provider.dart';
@@ -261,6 +262,7 @@ class WindowScaffold extends HookConsumerWidget {
),
_WebSocketIndicator(),
const TaskOverlay(),
const NotificationOverlay(),
if (showPalette.value)
CommandPattleWidget(onDismiss: () => showPalette.value = false),
],
@@ -274,6 +276,7 @@ class WindowScaffold extends HookConsumerWidget {
Positioned.fill(child: child),
_WebSocketIndicator(),
const TaskOverlay(),
const NotificationOverlay(),
if (showPalette.value)
CommandPattleWidget(onDismiss: () => showPalette.value = false),
],

153
lib/widgets/notification_item.dart Normal file
View File

@@ -0,0 +1,153 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/pods/notification.dart';
import 'package:island/route.dart';
import 'package:island/widgets/content/cloud_files.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:url_launcher/url_launcher_string.dart';
class NotificationItemWidget extends HookConsumerWidget {
final NotificationItem item;
final VoidCallback onDismiss;
final bool isDesktop;
const NotificationItemWidget({
super.key,
required this.item,
required this.onDismiss,
required this.isDesktop,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final animationController = useAnimationController(
duration: const Duration(milliseconds: 300),
reverseDuration: const Duration(milliseconds: 250),
);
final isDismissed = useState(false);
final slideTween = Tween<Offset>(
begin: Offset(isDesktop ? 1.0 : 0.0, -0.2),
end: Offset.zero,
).chain(CurveTween(curve: Curves.easeOutCubic));
final fadeTween = Tween<double>(
begin: 0.0,
end: 1.0,
).chain(CurveTween(curve: Curves.easeOut));
useEffect(() {
animationController.forward();
return null;
}, []);
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]);
return AnimatedBuilder(
animation: animationController,
builder: (context, child) {
return Transform.translate(
offset: slideTween.evaluate(animationController),
child: Opacity(
opacity: fadeTween.evaluate(animationController),
child: child,
),
);
},
child: GestureDetector(
onTap: () {
if (item.notification.meta['action_uri'] != null) {
var uri = item.notification.meta['action_uri'] as String;
if (uri.startsWith('solian://')) {
uri = uri.replaceFirst('solian://', '');
}
if (uri.startsWith('/')) {
rootNavigatorKey.currentContext?.push(
item.notification.meta['action_uri'],
);
} else {
launchUrlString(uri);
}
}
},
onHorizontalDragEnd: isDesktop
? (details) {
if (details.primaryVelocity! > 100 && !isDismissed.value) {
isDismissed.value = true;
animationController.reverse().then((_) => onDismiss());
}
}
: null,
child: Card(
elevation: 4,
margin: EdgeInsets.zero,
color: Theme.of(context).colorScheme.surfaceContainer,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
),
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: isDesktop ? 400 : double.infinity,
),
child: Padding(
padding: const EdgeInsets.all(12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
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),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
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,
),
],
),
),
],
),
),
),
),
),
);
}
}

75
lib/widgets/notification_overlay.dart Normal file
View File

@@ -0,0 +1,75 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/pods/notification.dart';
import 'package:island/services/responsive.dart';
import 'package:island/widgets/notification_item.dart';
class NotificationOverlay extends HookConsumerWidget {
const NotificationOverlay({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final notifications = ref.watch(notificationStateProvider);
final isDesktop = isWideScreen(context);
final safeTop = MediaQuery.of(context).padding.top;
if (notifications.isEmpty) {
return const SizedBox.shrink();
}
if (isDesktop) {
return Positioned(
top: safeTop + 16,
right: 16,
left: null,
bottom: null,
width: 420,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: notifications.reversed.toList().asMap().entries.map((
entry,
) {
final item = entry.value;
return Padding(
padding: const EdgeInsets.only(bottom: 12),
child: NotificationItemWidget(
item: item,
isDesktop: true,
onDismiss: () {
ref.read(notificationStateProvider.notifier).remove(item.id);
},
),
);
}).toList(),
),
);
} else {
return Positioned(
top: safeTop + 12,
left: 16,
right: 16,
bottom: null,
child: Stack(
children: notifications.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value;
return Positioned(
top: index * 12.0,
left: 0,
right: 0,
child: NotificationItemWidget(
item: item,
isDesktop: false,
onDismiss: () {
ref.read(notificationStateProvider.notifier).remove(item.id);
},
),
);
}).toList(),
),
);
}
}
}