Implement Stacked Expandable Notifications

[AntonioAEMartins]

Overview

• Feature: Implements stacked expandable notifications that expand on hover and allow users to interact with underlying notifications.
• Goal: Enhance the user experience by displaying notifications in a stack, saving screen space, and providing interactive capabilities.

Changes Made

1. Replaced AnimatedList with Stack:

   • Removed the usage of _listGlobalKey and AnimatedListState.
   • Implemented a Stack to overlay notifications, enabling them to overlap and expand when necessary.

2. Used AnimatedPositioned and AnimatedOpacity:

   • Applied AnimatedPositioned to animate the position of each notification within the stack.
   • Used AnimatedOpacity to adjust the transparency of notifications based on their position and hover state.

3. Introduced ValueNotifier<List<ToastificationItem>>:

   • Replaced the existing list with a ValueNotifier to reactively manage the list of notifications.
   • Ensured the UI updates automatically when the list changes.

4. Added Hover Functionality with MouseRegion:

   • Wrapped the notification stack with a MouseRegion to detect hover events.
   • When hovered, notifications expand, and their auto-close timers are paused.
   • Upon exit, notifications collapse back, and timers resume.

5. Adjusted Animation Durations and Delays:

   • Modified _createAnimationDuration to accommodate the new animations.
   • Tweaked _createOverlayDelay and _removeOverlayDelay for smoother transitions.

Implementation Details

• Stacked Notifications Behavior:

  • Notifications are displayed in a stack, with the most recent at the top.
  • Underlying notifications are partially visible and become fully visible on hover.
  • A maximum of 5 notifications are displayed to prevent overflow.

• Opacity and Position Adjustments:

  • Notifications further down the stack have reduced opacity.
  • The opacity and top position are calculated based on the notification's index and hover state.

• Timer Management:

  • On hover, all notification timers pause to prevent them from auto-dismissing.
  • Timers resume when the cursor exits the notification area.

• Responsive Updates:

  • Used AnimatedBuilder and ValueNotifier to ensure the stack updates when notifications are added or removed.
  • Ensured animations play correctly during list updates.

Related Issue

close #88

Testing

• Hover Interactions:

  • Confirmed that hovering over the notification area expands the notifications.
  • Verified that timers pause on hover and resume on exit.

• Adding/Removing Notifications:

  • Tested adding multiple notifications to ensure they stack correctly.
  • Ensured that removing notifications triggers the appropriate animations.

• Edge Cases:

  • Checked behavior when the maximum number of notifications is exceeded.
  • Verified that the overlay is removed when all notifications are dismissed.

[daiki1003]

I'm so looking forward to being merged :)