🐛 AdMob inline banner is shown on iOS on top of the screen too (why?)

MooDone commented 3 years ago

Bug report

Describe the bug I inserted a AdMob inline banner in a listview like described in the official codelab. The test-mode-banner is shown right in the listview on android and iOS. But on iOS-device the banner is shown too on the top of my screen and overlays my listview.

Steps to reproduce

This the code of my banner-widget:

import '../widgets/progress.dart';
import 'package:flutter/material.dart';
import '../google_mobile_ads/ad_helper.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import '../pages/home_page.dart';

class AdGrid03GoogleBanner extends StatefulWidget {
  int bannerWidth;
  int bannerHeight;

  AdGrid03GoogleBanner({this.bannerHeight, this.bannerWidth});

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

class _AdGrid03GoogleBannerState extends State<AdGrid03GoogleBanner> {
  BannerAd _ad;
  bool _isAdLoaded = false;
  int bannerWidth;
  int bannerHeight;

  @override
  void initState() {
    super.initState();
    bannerWidth = widget.bannerWidth;
    bannerHeight = widget.bannerHeight;
    AdSize adSize = AdSize(width: bannerWidth, height: bannerHeight);

    _ad = BannerAd(
      adUnitId: AdHelper.bannerAdUnitId,
      //size: AdSize.banner,
      size: adSize,
      request: AdRequest(),
      listener: AdListener(
        onAdLoaded: (_) {
          setState(() {
            _isAdLoaded = true;
          });
        },
        onAdFailedToLoad: (_, error) {
          print('Ad load failed (code=${error.code} message=${error.message})');
        },
      ),
    );

    // TODO: Load an ad
    _ad.load();
  }

  @override
  void dispose() {
    // TODO: Dispose a BannerAd object
    _ad?.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _isAdLoaded ? AdWidget(ad: _ad) : circularProgress(),
      width: _ad.size.width.toDouble(),
      height: double.parse((bannerHeight * 1.5).toString()),
      alignment: Alignment.center,
    );
  }
}

Expected behavior

I don't expected that the banner is shown on the top of my screen too.

Additional context

Add any other context about the problem here.

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

``` flutter doctor -v [✓] Flutter (Channel stable, 2.0.2, on macOS 11.2.3 20D91 darwin-x64, locale de-DE) • Flutter version 2.0.2 at /Users/michael/Documents/Developer/flutter • Framework revision 8962f6dc68 (9 days ago), 2021-03-11 13:22:20 -0800 • Engine revision 5d8bf811b3 • Dart version 2.12.1 [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) • Android SDK at /Users/michael/Library/Android/sdk • Platform android-30, build-tools 30.0.2 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e • CocoaPods version 1.10.1 [✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome) ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. [✓] Android Studio (version 4.0) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 49.0.2 • Dart plugin version 193.7547 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) [✓] Connected device (1 available) • iPhone 12 Pro Max (mobile) • F2E4F560-8466-43F3-A33B-41039F6F4F8E • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator) ```

Flutter dependencies

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

Click To Expand

Rodrig0v commented 3 years ago

This also happens randomly with Native ads on both iOS and android in nestedscrollviews, singlescrollviews and listviews. The ad will briefly flash on top of the list and then correct itself. Sometimes it might even stay at the top until the user decides to scroll.

MooDone commented 3 years ago

the problem still exists as described below. Do you need more informations?

eliabieri commented 3 years ago

I have the same problem.

ItsCalebJones commented 3 years ago

Here's my reproduction of this issue: https://i.imgur.com/jmJ3oSM.png

I have the widget down past the bottom of the visible view - it loads and pops in at the top of the parent which is a SingleChildScrollView.

Source: https://github.com/ItsCalebJones/SpaceLaunchNow-Flutter/blob/feature/ads_update/lib/views/launchdetails/launch_detail_body.dart

MooDone commented 3 years ago

the problem still exists as described below. Do you need more informations?

bdlukaa commented 3 years ago

This is an issue with hybrid composition, not with the library. Tho in Virtual Display could be used instead of hybrid composition

royibernthal commented 3 years ago

Joining the issue

sooxt98 commented 3 years ago

My ListView is flooded with ads when scrolling

bdlukaa commented 3 years ago

https://github.com/flutter/flutter/issues/76097

maheshj01 commented 3 years ago

Hi @MooDone, thanks for filing the issue, Anyone who is facing this issue could you please share a complete code sample, I verified this issue with the latest google_mobile_Ads: 0.13.3 and it seems to work fine for me.

code sample

```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: ListView.builder( itemCount: 20, itemBuilder: (context, index) { if (isAdloaded && index == 10) { return Container( child: AdWidget(ad: _bannerAd), width: _bannerAd.size.width.toDouble(), height: 72.0, alignment: Alignment.center, ); } else { return ListTile( title: Text('Item $index'), ); } }, )); } } ```

flutter doctor -v

``` [✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-arm, locale en-GB) • Flutter version 2.2.3 at /Users/mahesh/Documents/flutter • Framework revision f4abaa0735 (4 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 30.0.3) • Android SDK at /Users/mahesh/Library/Android/sdk • Platform android-30, build-tools 30.0.3 • 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.4, Build version 12D4e • 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) [✓] IntelliJ IDEA Community Edition (version 2021.1.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 57.0.5 • Dart plugin version 211.7233 [✓] VS Code (version 1.58.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.24.0 [✓] Connected device (4 available) • Redmi K20 Pro (mobile) • android-arm64 • Android 11 (API 30) • iPhone 12 Pro Max (mobile) • 6A434744-B348-4FB3-AB10-131292174456 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 11.4 20F71 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.107 • No issues found! ```

Thanks

timothyhoang-google commented 3 years ago

Hi everyone,

For anyone still facing this issue, if upgrading to google_mobile_ads: 0.13.3+ does not resolve the problem, could you share a complete code sample?

If there are no reproducible samples using google_mobile_ads: 0.13.3+, we'll close this issue at the end of next week 09/17/21.

maheshj01 commented 3 years ago

Labeling this issue as fixed, as no longer reproducible.

googleads / googleads-mobile-flutter