I want my bottom navigation bar to have blurry transluscent effect when scrolling, all items blur behind navigation bar but edges of banner ad doesn’t. Contents of banner it being blurred but edges aren’t.

I tried giving padding, wrap it inside a Card, but it still has sharp edges behind navigation bar.

Here is my bottom navigation bar:

Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: const Color.fromARGB(255, 246, 246, 246),
      appBar: AppBar(
        flexibleSpace: ClipRRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
            child: Container(
              color: Colors.transparent,
            ),
          ),
        ),
        elevation: 0,
        backgroundColor: const Color.fromARGB(0, 255, 255, 255),
        centerTitle: false,
        title: const Text("My app"),
      ),
      extendBody: true,
      bottomNavigationBar: ClipRRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
          child: NavigationBar(
            destinations: const [
              NavigationDestination(
                selectedIcon: Icon(Icons.home),
                icon: Icon(Icons.home_outlined),
                label: 'Home',
              ),
              NavigationDestination(
                selectedIcon: Icon(Icons.work_history_rounded),
                icon: Icon(Icons.work_history_outlined),
                label: 'My suitcase',
              ),
              NavigationDestination(
                icon: Icon(Icons.account_circle_outlined),
                selectedIcon: Icon(Icons.account_circle),
                label: 'Profile',
              ),
            ],
            onDestinationSelected: (int index) {
              setState(() {
                _onItemTapped(index);
              });
            },
            backgroundColor: const Color.fromARGB(0, 255, 255, 255),
            elevation: 0,
            indicatorColor: const Color.fromARGB(255, 132, 170, 198),
            selectedIndex: _selectedIndex,
          ),
        ),
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          RefreshIndicator(
            onRefresh: _handleRefresh,
            child: homeList(),
          ),
          RefreshIndicator(
            onRefresh: _handleRefreshMySuitcases,
            child: mySuitcaseList
          ),
          Profilepage(context.read<SharedData>().User),
        ],
      ),
    );

here is my list view in homeList:

ListView.builder(
  controller: scrollController,
  itemCount: homeItems.length +
      (homeItems.length ~/ 5),
  itemBuilder: (context, index) {
    int actualIndex = index - (index ~/ 6);
    if ((index + 1) % 6 == 0) {
      return const BannerAdWidget();
    } else {
      return HomeItem();
    }
  },
),

Here is BannerAdWidget:

class BannerAdWidget extends StatefulWidget {
  const BannerAdWidget({super.key});

  @override
  State<BannerAdWidget> createState() => _BannerAdWidgetState();
}

class _BannerAdWidgetState extends State<BannerAdWidget> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  final adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/6300978111'
      : 'ca-app-pub-3940256099942544/2934735716';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.largeBanner,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          if (mounted) {
            setState(() {
              _isLoaded = true;
            });
          }
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          setState(() {
            _isLoaded = false;
          });
          debugPrint('BannerAd failed to load: $err');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }

  @override
  void initState() {
    super.initState();
    loadAd();
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoaded) {
      return Padding(
        padding: const EdgeInsets.all(10.0),
        child: SizedBox(
          width: _bannerAd!.size.width.toDouble(),
          height: _bannerAd!.size.height.toDouble(),
          child: AdWidget(ad: _bannerAd!),
        ),
      );
    } else {
      return const Center(child: CircularProgressIndicator());
    }
  }
}