132 lines
3.8 KiB
Dart
132 lines
3.8 KiB
Dart
import 'dart:async';
|
|
import 'dart:io';
|
|
|
|
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.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';
|
|
import 'package:styled_widget/styled_widget.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 devicePadding = MediaQuery.paddingOf(context);
|
|
final topOffset =
|
|
devicePadding.top +
|
|
((!kIsWeb &&
|
|
(Platform.isMacOS || Platform.isLinux || Platform.isWindows))
|
|
? 40
|
|
: 16);
|
|
|
|
if (notifications.isEmpty) {
|
|
return const SizedBox.shrink();
|
|
}
|
|
|
|
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(),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class AnimatedNotificationItem extends HookConsumerWidget {
|
|
final NotificationItem item;
|
|
final VoidCallback onDismiss;
|
|
final bool isDesktop;
|
|
|
|
const AnimatedNotificationItem({
|
|
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),
|
|
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: 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: () {},
|
|
).width(isDesktop ? 340 : MediaQuery.sizeOf(context).width - 40),
|
|
),
|
|
);
|
|
}
|
|
}
|