💄 Optimize notification item

lib/widgets/notification_item.dart

@@ -12,12 +12,14 @@ class NotificationItemWidget extends HookConsumerWidget {
   final NotificationItem item;
   final VoidCallback onDismiss;
   final bool isDesktop;
+  final Animation<double> progress;
 
   const NotificationItemWidget({
     super.key,
     required this.item,
     required this.onDismiss,
     required this.isDesktop,
+    required this.progress,
   });
 
   @override
@@ -52,11 +54,11 @@ class NotificationItemWidget extends HookConsumerWidget {
         shape: const RoundedRectangleBorder(
           borderRadius: BorderRadius.all(Radius.circular(8)),
         ),
-        child: ConstrainedBox(
+        child: Column(
-          constraints: BoxConstraints(
+          mainAxisSize: MainAxisSize.min,
-            maxWidth: isDesktop ? 400 : double.infinity,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
-          ),
+          children: [
-          child: Padding(
+            Padding(
               padding: const EdgeInsets.all(12),
               child: Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
@@ -99,8 +101,20 @@ class NotificationItemWidget extends HookConsumerWidget {
                 ],
               ),
             ),
+            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),
+      ),
     );
   }
 }

lib/widgets/notification_overlay.dart

@@ -76,6 +76,9 @@ class AnimatedNotificationItem extends HookConsumerWidget {
       duration: const Duration(milliseconds: 300),
       reverseDuration: const Duration(milliseconds: 250),
     );
+    final progressController = useAnimationController(
+      duration: item.duration,
+    );
     final isDismissed = useState(false);
 
     final slideTween = Tween<Offset>(
@@ -83,8 +86,14 @@ class AnimatedNotificationItem extends HookConsumerWidget {
       end: Offset.zero,
     ).chain(CurveTween(curve: Curves.easeOutCubic));
 
+    final progressAnimation = Tween<double>(
+      begin: 1.0,
+      end: 0.0,
+    ).animate(progressController);
+
     useEffect(() {
       animationController.forward();
+      progressController.forward();
       return null;
     }, []);
 
@@ -100,6 +109,8 @@ class AnimatedNotificationItem extends HookConsumerWidget {
       return () => timer.cancel();
     }, [item.duration, isDismissed.value]);
 
+    final itemWidth = isDesktop ? 420.0 : MediaQuery.sizeOf(context).width - 40;
+
     return SlideTransition(
       position: slideTween.animate(animationController),
       child: Padding(
@@ -110,7 +121,8 @@ class AnimatedNotificationItem extends HookConsumerWidget {
           item: item,
           isDesktop: isDesktop,
           onDismiss: () {},
-        ).width(isDesktop ? 420 : MediaQuery.sizeOf(context).width - 40),
+          progress: progressAnimation,
+        ).width(itemWidth),
       ),
     );
   }