firebase_admob plugin displays smart banner at top instead of bottom

[westy92]

firebase_admob's show() method by default sets the anchorType to AnchorType.bottom. However, this setting isn't being honored on iOS 8, 9, and 10. iOS 11 and 12 appear to work fine.

About 10% of the time, it works as expected. 🤔

Steps to Reproduce

1. Run the below sample code on iOS 8-10.
2. The banner should be at the bottom.
3. Instead, the banner is at the top.

import 'package:firebase_admob/firebase_admob.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  MainPageState createState() => MainPageState();
}

class MainPageState extends State<MainPage> {
  BannerAd _bannerAd;

  @override
  void initState() {
    super.initState();
    FirebaseAdMob.instance.initialize(appId: FirebaseAdMob.testAppId);
  }

  @override
  Widget build(BuildContext context) {
    _bannerAd ??= createBannerAd();
    _bannerAd..load()..show();
    return Container();
  }

  BannerAd createBannerAd() {
    return BannerAd(
      adUnitId: BannerAd.testAdUnitId,
      size: AdSize.smartBanner,
      listener: (MobileAdEvent event) {
        print('BannerAd event $event');
      },
    );
  }
}

Logs

[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.2 18C54, locale en-US)
    • Flutter version 1.0.0 at /Users/westy92/Source/flutter
    • Framework revision 5391447fae (8 weeks ago), 2018-11-29 19:41:26 -0800
    • Engine revision 7375a0f414
    • Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)
 
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at /Users/westy92/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.
 
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    • ios-deploy 1.9.4
    • CocoaPods version 1.6.0.beta.2
 
[✓] Android Studio (version 3.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 31.3.3
    • Dart plugin version 182.5124
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
 
[✓] VS Code (version 1.30.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 2.21.1
 
[✓] Connected device (1 available)
    • Seth's iPod touch • <redacted> • ios • iOS 9.3.5
 
• No issues found!

Below are simulators, in order: iOS 8.4, 9.3, 10.3.1, 11.4, 12.1.

[fhuonder]

We see this behavior as well.
Would be great when it could be fixed soon.

Regards,
Florian

[zoechi]

@sdolsky Using "add reaction" on the initial comment would increase priority.

[Toubap]

Also encountering this issue with last dev versions

[gzimbron]

i have this problem too!

[Phorez]

Same here!

[itielMaimon]

Any news?

[skyberk]

Finally I found the solution. The main reason of the problem translatesAutoresizingMaskIntoConstraints property is setting to NO on pre ios 11. And location calculations will not be apply in this layout.

Move the following code line _banner.translatesAutoresizingMaskIntoConstraints = NO; to inside of the if (@available(ios 11.0, *)) statement in FLTMobileAd.m file.

_banner.translatesAutoresizingMaskIntoConstraints = NO;
UIView *screen = [FLTMobileAd rootViewController].view;
[screen addSubview:_banner];

#if defined(__IPHONE_11_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_11_0)
if (@available(ios 11.0, *)) {
UILayoutGuide *guide = screen.safeAreaLayoutGuide;
[NSLayoutConstraint activateConstraints:@[
[_banner.centerXAnchor constraintEqualToAnchor:guide.centerXAnchor],
[_banner.bottomAnchor
constraintEqualToAnchor:_anchorType == 0 ? guide.bottomAnchor : guide.topAnchor
constant:_anchorOffset]
]];
} else {
[self placeBannerPreIos11];
}

To

UIView *screen = [FLTMobileAd rootViewController].view;
[screen addSubview:_banner];

#if defined(__IPHONE_11_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_11_0)
if (@available(ios 11.0, *)) {
_banner.translatesAutoresizingMaskIntoConstraints = NO;
UILayoutGuide *guide = screen.safeAreaLayoutGuide;
[NSLayoutConstraint activateConstraints:@[
[_banner.centerXAnchor constraintEqualToAnchor:guide.centerXAnchor],
[_banner.bottomAnchor
constraintEqualToAnchor:_anchorType == 0 ? guide.bottomAnchor : guide.topAnchor
constant:_anchorOffset]
]];
} else {
[self placeBannerPreIos11];
}

For more information about this property you can visit the link below.
https://developer.apple.com/documentation/uikit/uiview/1622572-translatesautoresizingmaskintoco

And the result

[westy92]

Great find! 🎉

[westy92]

The open PR looks promising! Hoping it gets some attention. 🤞

[douglascaurismo]

I had the same problem (on ios 10), the banner that should be placed at the centered at the bottom is appearing in top left corner. After a while when the ad changes to the next, it gets its position fixed.

I was wondering why this project does not offer a way to place ads inside the widget tree.
That would be a huge improvement.

[kroikie]

@westy92

This issue has been moved to firebase/flutterfire#467. Any further collaboration will be done there.

[kroikie]

Since firebase_admob issues require work on the Flutter side as well as the plugin side these issues will remain open here as well until resolved.

[iapicca]

Hi @westy92
I see there's an open issue addressing the case you described.
Please follow up on that issue,
I'm closing the current one as duplicate.
If you disagree please write in the comments
and I will reopen it.
Thank you

[izinin]

@westy92

This issue has been moved to FirebaseExtended/flutterfire#467. Any further collaboration will be done there.

please do not make cyclic reference because [firebase/flutterfire#467] refers to this bug report https://github.com/FirebaseExtended/flutterfire/issues/467#issuecomment-541444232 . noise .. :(

[inuyashaaa]

i have this problem too!

[izinin]

@inuyashaaa : i integrated fix, suggested somewhere here in forked repo https://github.com/izinin/flutterfire.git ,try this in pubspec.yaml (below) I hope in new version admob_firebase the issue will be fixed officially:

diff:

      -  firebase_admob: ^0.9.0+10
      +  
      +  # workaround for
      +  # https://github.com/FirebaseExtended/flutterfire/pull/45/files
      +  # adjusting adBanner https://github.com/flutter/flutter/issues/14222
      +  firebase_admob: #^0.9.0+10
      +    git: 
      +      url: https://github.com/izinin/flutterfire.git
      +      path: packages/firebase_admob
      +      ref: admob_fix_missplaced_banner
      +

[iapicca]

Could everyone who still has this problem please file a new issue
in the dedicated github
with the exact descriptions what happens, logs and the output of 'flutter doctor -v' please.
All system setups can be slightly different so it's always better to open new issues and reference related issues.

[dayron9110]

Any updates?

[iapicca]

@dayron9110
this issue is a duplicate, please follow up here

[dayron9110]

How Can I fix this issue? @iapicca

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.