[Android] Ads flickering when navigating or scroll

See original GitHub issue

Plugin Version

1.0.1

Details

Target Platform: Android Target OS version: Android 11 Devices: Galaxy S21

I’m displaying BannerAd in my app in home screen and in “product details screen” both placed inside ‘Scaffold’ -> ‘bottomNavigationBar’. When pushing the “product details screen” screen the animation goes as should be, but when navigating back to home screen there is a flickering in the navigation.

My custom class for displaying the BannerAd widget in the above screens.

custom_banner.dart

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:net_reven/app/config.dart';

class CustomBannerAd extends StatefulWidget {
  const CustomBannerAd({Key key}) : super(key: key);

  @override
  _CustomBannerAdState createState() => _CustomBannerAdState();
}

class _CustomBannerAdState extends State<CustomBannerAd> {
  BannerAd _anchoredAdaptiveAd;
  var _isLoaded = false;
  Orientation _currentOrientation;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    _currentOrientation = MediaQuery.of(context).orientation;
    _loadAd();
  }

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

    _anchoredAdaptiveAd?.dispose();
  }

  Future<void> _loadAd() async {
    await _anchoredAdaptiveAd?.dispose();

    if (mounted) {
      setState(() {
        _anchoredAdaptiveAd = null;
        _isLoaded = false;
      });
    }

    final AnchoredAdaptiveBannerAdSize size =
        await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
            MediaQuery.of(context).size.width.truncate());

    if (size == null) {
      debugPrint('Unable to get height of anchored banner.');
      return;
    }

    _anchoredAdaptiveAd = BannerAd(
      adUnitId: Config.adUnitId,
      size: size,
      request: const AdRequest(
        nonPersonalizedAds: false,
      ),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          debugPrint("Ad loaded");
          if (mounted) {
            setState(() {
              _anchoredAdaptiveAd = ad as BannerAd;
              _isLoaded = true;
            });
          }
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          debugPrint('$BannerAd failedToLoad: $error');
          ad.dispose();
        },
        onAdOpened: (Ad ad) => debugPrint('$BannerAd onAdOpened.'),
        onAdClosed: (Ad ad) => debugPrint('$BannerAd onAdClosed.'),
      ),
    );

    return _anchoredAdaptiveAd.load();
  }

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(builder: (context, orientation) {
      if (_currentOrientation == orientation &&
          _anchoredAdaptiveAd != null &&
          _isLoaded) {
        return Container(
          color: Colors.transparent,
          width: _anchoredAdaptiveAd.size.width.toDouble(),
          height: _anchoredAdaptiveAd.size.height.toDouble(),
          child: AdWidget(ad: _anchoredAdaptiveAd),
        );
      }

      // Reload the ad if the orientation changes.
      if (_currentOrientation != orientation) {
        _currentOrientation = orientation;
        _loadAd();
      }
      return const SizedBox.shrink();
    });
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 2.5.3, on macOS 12.0.1 21A559 darwin-x64, locale
    en-IL)
    • Flutter version 2.5.3 at /Users/eitanaflalo/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (8 weeks ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/eitanaflalo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.1, Build version 13A1030d
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • 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.10+0-b96-7281165)

[✓] VS Code (version 1.62.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available)
    • SM J710F (mobile) • 52036ac7f0d6a359 • android-arm    • Android 8.1.0 (API
      27)
    • macOS (desktop)   • macos            • darwin-x64     • macOS 12.0.1
      21A559 darwin-x64
    • Chrome (web)      • chrome           • web-javascript • Google Chrome
      96.0.4664.93

• No issues found!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:4
  • Comments:25

github_iconTop GitHub Comments

7reactions
marcellocamaracommented, Feb 13, 2022

Any update for this issue?

Still happening with flutter 2.10.1, dart 2.16.1 and google_mobile_ads 1.1.0

2reactions
dipak2726commented, Jan 25, 2022

Try using this , it worked for me

google_mobile_ads: git: url: https://github.com/SuaMusica/googleads-mobile-flutter.git path: packages/google_mobile_ads ref: feature/suamusica

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Fix Screen Flickering on Android - Lifewire
Stop your Android screen from flickering or acting glitchy. Try these steps to diagnose, troubleshoot, and repair a flickering display.
Read more >
Phone Screen Display Glitching, Flickering & Flashing - Updato
How to fix Android screen flickering issue · Method 1: Boot the device in Safe Mode · Method 2: Modifying the Developer options...
Read more >
Flickering in google not anywhere else - Samsung Community
If you go to Play Store and search for "Android System Webview", and uninstall it, you will notice the flickering has gone.
Read more >
android - Severe glitch when navigating to a screen with ...
1 causes flickering when navigating between screens in apps that contain ads. In particular, the flickering happens when navigating to a new ...
Read more >
Screen flickering or not responding in android devices
screen flickering or not responding s8/s9/note 8/ note 9This video also answers some of the queries below:How do I fix my Android screen...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found