Blur effect causes bottom navigation bar to rebuild without corner radius & notch

[shafir-k]

Description:
When blurEffect: true, the bottom navigation bar rebuilds unexpectedly without preserving the corner radius and notch. This leads to inconsistent and unpredictable behavior in the UI.

Steps to Reproduce:

1. Enable blurEffect: true in AnimatedBottomNavigationBar.
2. Run the app on a physical device (tested on Redmi Note 8 Pro).
3. Navigate between pages or trigger rebuilds.
4. Observe that the bottom navigation bar loses its corner radius and notch shape intermittently.

Expected Behavior:
The bottom navigation bar should maintain its corner radius and notch consistently, even when blurEffect is enabled.

Actual Behavior:

• The bar rebuilds unpredictably.
• Corner radius and notch are sometimes lost.

Device:

• Model: Redmi Note 8 Pro
• OS: Android 11

Flutter Doctor Output:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.32.8, on Ubuntu 24.04.3 LTS 6.14.0-28-generic, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2025.1.1)
[✓] VS Code (version unknown)
    ✗ Unable to determine VS Code version.
[✓] Connected device (2 available)
[✓] Network resources

Additional Notes:

• Issue only happens when blurEffect is enabled.
• Works fine with blurEffect: false.
• Background color set to white to testing purpose on the video.

---

Screencast.from.2025-08-25.11-52-52.webm