🐛 Banner Ad blurs widgets above backdrop filter

[bedardjo]

Bug report

Banner Ad in stack with blur backdrop filter causes entire stack to blur.

Steps to reproduce

1. Use a stack with a BackdropFilter (filter: ImageFilter.blur)
2. Place other widgets below and above filter. Widgets below will be blurred, widgets above will not be blurred.
3. Place a banner ad as the final item in this stack
4. Now everything is blurred except ad

return MaterialApp(
        home: Scaffold(
      body: Stack(
        children: [
          Center(child: Container(width: 30, height: 30, color: Colors.pink)),
          Align(alignment: Alignment(-.5, -.5), child: Text("Foo")),
          Positioned.fill(
              child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
            child: Container(color: Colors.transparent),
          )),
          Center(child: Text("Foo")),
          Align(alignment: Alignment.bottomCenter, child: BannerAdWidget())
        ],
      ),
    ));

Expected behavior

Stuff on top of backdrop filter shouldn't be blurred.

Additional context

class BannerAdWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _BannerAdWidgetState();
}

class _BannerAdWidgetState extends State<BannerAdWidget> {
  late PublisherBannerAd bannerAd;
  final Completer<PublisherBannerAd> bannerCompleter =
      Completer<PublisherBannerAd>();

  @override
  void initState() {
    super.initState();
    bannerAd = PublisherBannerAd(
        adUnitId: ANDROID_BANNER_AD_UNIT_ID,
        request: PublisherAdRequest(nonPersonalizedAds: true),
        sizes: [AdSize.smartBanner],
        listener: AdListener(
          onAdLoaded: (Ad ad) {
            bannerCompleter.complete(ad as PublisherBannerAd);
          },
          onAdFailedToLoad: (Ad ad, LoadAdError error) {
            print('PublisherBannerAd failedToLoad: $error');
            bannerCompleter.completeError(ad);
          },
          onAdOpened: (Ad ad) => print('$PublisherBannerAd onAdOpened.'),
          onAdClosed: (Ad ad) => print('$PublisherBannerAd onAdClosed.'),
          onApplicationExit: (Ad ad) =>
              print('PublisherBannerAd onApplicationExit.'),
        ));
    bannerAd.load();
  }

  @override
  void dispose() {
    super.dispose();
    bannerAd.dispose();
  }

  @override
  Widget build(BuildContext context) {
    MediaQueryData mediaQueryData = MediaQuery.of(context);
    return Container(
        height: getSmartBannerHeight(
            mediaQueryData.size, mediaQueryData.orientation),
        child: FutureBuilder<PublisherBannerAd>(
          future: bannerCompleter.future,
          builder: (BuildContext context,
              AsyncSnapshot<PublisherBannerAd> snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
              case ConnectionState.waiting:
              case ConnectionState.active:
                return Container();
              case ConnectionState.done:
                if (snapshot.hasData) {
                  return AdWidget(ad: bannerAd);
                } else {
                  // this will occur in the case of an error loading the ad.
                  return Container();
                }
            }
          },
        ));
  }
}

double getSmartBannerHeight(Size screenSize, Orientation orientation) {
  double dpHeight = orientation == Orientation.portrait
      ? screenSize.height
      : screenSize.width;
  if (dpHeight <= 400.0) {
    return 32.0;
  }
  if (dpHeight > 720.0) {
    return 90.0;
  }
  return 50.0;
}

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

``` Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 2.0.1, on Microsoft Windows [Version 10.0.19041.867], locale en-US) [√] Android toolchain - develop for Android devices (Android SDK version 29.0.2) [√] Chrome - develop for the web [√] Android Studio (version 3.5) [√] IntelliJ IDEA Community Edition (version 2018.3) [√] VS Code, 64-bit edition (version 1.54.1) [√] Connected device (3 available) • No issues found! ```

---

Flutter dependencies

Run flutter pub deps -- --style=compact and paste the output below:

Click To Expand

``` Dart SDK 2.12.0 Flutter SDK 2.0.1 color_game 1.0.0+1 dependencies: - audioplayers 0.17.4 [uuid path_provider flutter flutter_web_plugins] - cupertino_icons 1.0.2 - firebase_analytics 5.0.15 [meta flutter firebase_analytics_platform_interface] - firebase_core 0.7.0 [firebase_core_platform_interface flutter quiver meta firebase_core_web] - flutter 0.0.0 [characters collection meta typed_data vector_math sky_engine] - google_fonts 2.0.0 [flutter http path_provider crypto] - google_mobile_ads 0.11.0+3 [meta flutter] - path_provider 2.0.1 [flutter path_provider_platform_interface path_provider_macos path_provider_linux path_provider_windows] - shared_preferences 2.0.3 [meta flutter shared_preferences_platform_interface shared_preferences_linux shared_preferences_macos shared_preferences_web shared_preferences_windows] - video_player 2.0.1 [meta video_player_platform_interface video_player_web flutter flutter_test] dev dependencies: - flutter_launcher_icons 0.8.1 [image args yaml path] - flutter_test 0.0.0 [flutter test_api path fake_async clock stack_trace vector_math async boolean_selector characters charcode collection matcher meta source_span stream_channel string_scanner term_glyph typed_data] dependency overrides: - crypto 3.0.0 [collection typed_data] - path_provider 2.0.1 [flutter path_provider_platform_interface path_provider_macos path_provider_linux path_provider_windows] transitive dependencies: - archive 2.0.13 [crypto args path] - args 1.6.0 - async 2.5.0 [collection] - boolean_selector 2.1.0 [source_span string_scanner] - characters 1.1.0 - charcode 1.2.0 - clock 1.1.0 - collection 1.15.0 - convert 2.1.1 [charcode typed_data] - fake_async 1.2.0 [clock collection] - ffi 1.0.0 - file 6.1.0 [meta path] - firebase_analytics_platform_interface 1.1.0 [flutter meta] - firebase_core_platform_interface 3.0.1 [flutter meta plugin_platform_interface quiver] - firebase_core_web 0.2.1+3 [firebase_core_platform_interface flutter flutter_web_plugins meta js] - flutter_web_plugins 0.0.0 [flutter js characters collection meta typed_data vector_math] - http 0.13.0 [http_parser meta path pedantic] - http_parser 4.0.0 [charcode collection source_span string_scanner typed_data] - image 2.1.19 [archive xml meta] - js 0.6.3 - matcher 0.12.10 [stack_trace] - meta 1.3.0 - path 1.8.0 - path_provider_linux 2.0.0 [path xdg_directories path_provider_platform_interface flutter] - path_provider_macos 2.0.0 [flutter] - path_provider_platform_interface 2.0.0 [flutter meta platform plugin_platform_interface] - path_provider_windows 2.0.0 [path_provider_platform_interface meta path flutter ffi win32] - pedantic 1.11.0 - petitparser 3.1.0 [meta] - platform 3.0.0 - plugin_platform_interface 1.0.3 [meta] - process 4.1.0 [file path platform] - quiver 2.1.5 [matcher meta] - shared_preferences_linux 2.0.0 [flutter file meta path path_provider_linux shared_preferences_platform_interface] - shared_preferences_macos 2.0.0 [shared_preferences_platform_interface flutter] - shared_preferences_platform_interface 2.0.0 [flutter] - shared_preferences_web 2.0.0 [shared_preferences_platform_interface flutter flutter_web_plugins meta] - shared_preferences_windows 2.0.0 [shared_preferences_platform_interface flutter file meta path path_provider_platform_interface path_provider_windows] - sky_engine 0.0.99 - source_span 1.8.0 [charcode collection path term_glyph] - stack_trace 1.10.0 [path] - stream_channel 2.1.0 [async] - string_scanner 1.1.0 [charcode source_span] - term_glyph 1.2.0 - test_api 0.2.19 [async boolean_selector collection meta path source_span stack_trace stream_channel string_scanner term_glyph matcher] - typed_data 1.3.0 [collection] - uuid 2.2.2 [crypto convert] - vector_math 2.1.0 - video_player_platform_interface 4.0.0 [flutter meta flutter_test] - video_player_web 2.0.0 [flutter flutter_web_plugins meta video_player_platform_interface] - win32 2.0.0 [ffi] - xdg_directories 0.2.0 [meta path process] - xml 4.5.1 [collection convert meta petitparser] - yaml 2.2.1 [charcode collection string_scanner source_span] ```

---

[peaklev]

I am seeing something similar with a regular/non-native banner ad anchored to the bottom of a screen with this code:

showCupertinoModalPopup(
        context: context,
        builder: (BuildContext context) => CupertinoActionSheet(
          title: title,
          actions: sheetActions,
          cancelButton: CupertinoActionSheetAction(
            child: Text(cancel),
            isDefaultAction: true,
            onPressed: () {
              Navigator.of(context, rootNavigator: true).pop();
            },
          ),
        ),
      );

The ad bleeds through the Cupertino popup.

[proczak1]

Is that on release or debug only?

[peaklev]

This happens in both debug and release mode for me.

[maheshj01]

Hi @bedardjo, Thanks for filing the issue, I am able to replicate the issue on the latest stable and the master channel using the latest plugin google_mobile_ads: ^0.13.3 when a banner ad is added to the widget tree everything is blurred.

flutter doctor -v

```dart import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:google_mobile_ads/google_mobile_ads.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); MobileAds.instance.initialize(); runApp(BannerApp()); } class BannerApp extends StatelessWidget { const BannerApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp(home: BannerSample1()); } } class BannerSample1 extends StatefulWidget { const BannerSample1({Key? key}) : super(key: key); @override _BannerSample1State createState() => _BannerSample1State(); } class _BannerSample1State extends State { late BannerAd _bannerAd; bool isAdloaded = false; @override void initState() { super.initState(); _bannerAd = BannerAd( adUnitId: BannerAd.testAdUnitId, size: AdSize.banner, request: AdRequest(), listener: BannerAdListener( onAdLoaded: (Ad ad) { print('$BannerAd loaded.'); setState(() { isAdloaded = true; }); }, ), ); _bannerAd.load(); } @override void dispose() { // TODO: implement dispose _bannerAd.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Banner Ad')), body: Stack( children: [ Center(child: Container(width: 30, height: 30, color: Colors.pink)), Align(alignment: Alignment(-.5, -.5), child: Text("Foo")), Positioned.fill( child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3), child: Container(color: Colors.transparent), )), Center(child: Text("Foo")), Align( alignment: Alignment.bottomCenter, child: SizedBox( width: _bannerAd.size.width.toDouble(), height: _bannerAd.size.height.toDouble(), child: AdWidget(ad: _bannerAd), )) ], ), ); } } ```

Output

Without Banner Ad | With Banner Ad :-------------------------:|:-------------------------:  | 

flutter doctor -v

```console [✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.2 20G95 darwin-arm, locale en-GB) • Flutter version 2.2.3 at /Users/mahesh/Documents/flutter • Framework revision f4abaa0735 (6 weeks ago), 2021-07-01 12:46:11 -0700 • Engine revision 241c87ad80 • Dart version 2.13.4 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/mahesh/Library/Android/sdk • Platform android-31, build-tools 31.0.0 • ANDROID_HOME = /Users/mahesh/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.5.1, Build version 12E507 • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264) [✓] VS Code (version 1.58.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.25.0 [✓] Connected device (4 available) • iPhone 12 Pro Max (mobile) • 5430F628-A903-402C-A635-D55D7E6EEFCA • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 11.5.2 20G95 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.131 • No issues found! ``` ``` [✓] Flutter (Channel master, 2.5.0-7.0.pre.187, on macOS 11.5.2 20G95 darwin-arm, locale en-GB) • Flutter version 2.5.0-7.0.pre.187 at /Users/mahesh/Documents/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 05bfbbfbec (7 hours ago), 2021-08-22 21:37:03 -0400 • Engine revision 710af46d53 • Dart version 2.15.0 (build 2.15.0-42.0.dev) mahesh@Maheshs-Air-M1 counter_app % flutterm doctor -v [✓] Flutter (Channel master, 2.5.0-7.0.pre.187, on macOS 11.5.2 20G95 darwin-arm, locale en-GB) • Flutter version 2.5.0-7.0.pre.187 at /Users/mahesh/Documents/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 05bfbbfbec (7 hours ago), 2021-08-22 21:37:03 -0400 • Engine revision 710af46d53 • Dart version 2.15.0 (build 2.15.0-42.0.dev) [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/mahesh/Library/Android/sdk • Platform android-31, build-tools 31.0.0 • ANDROID_HOME = /Users/mahesh/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 12.5.1) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264) [✓] VS Code (version 1.58.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.25.0 [✓] Connected device (3 available) • iPhone 11 (mobile) • FC644E6C-7F02-40E5-9998-1F0CD162FBD8 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 11.5.2 20G95 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.159 • No issues found! ```

[loregr]

I have the same problem. Is there any update on this?

[huycozy]

We’re closing this issue due to inactivity. If you’re still impacted, please create a new issue via the Developer Forum.

[huycozy]

Re-opening the issue since there is a similar report recently.