Flutter AdMob Banner Ad overlaps screen

Question

I am working on a Flutter Application where I need to show an AdMob's Banner Ad. I have noticed that the banner overlaps my list view. I tried to search for the solution but I did not find anything much useful.

One solution I found is to provide fix margin of 50px at the bottom. I feel a little uncomfortable with this solution as I read somewhere that the screen size may affect this solution.

Also when I put a fake bottom bar then it also overlaps my bottom tab bar and bottom sheets.

Please see the below image for more details.

Thank you for your time.

Veil

Answer 1

I found one solution for you my cast Banner bottom Flutter Application little bit padding. Fix it with below code.

var paddingBottom = 48.0;

new MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Name',
            home: new MyHomePage(
              title: "NMame",
            ),
            builder: (context, widget) {
              final mediaQuery = MediaQuery.of(context);
              return new Padding(
                child: widget,
                padding: new EdgeInsets.only(bottom: paddingBottom),
              );
            },
            routes: <String, WidgetBuilder>{
                '/HomeScreen': (BuildContext context) =>
                    new MyHomePage(title: 'UPSC Question Papers')
              })

handle when the app is not getting loaded Ads

      if(event == MobileAdEvent.failedToLoad){
      setState(() {
        paddingBottom = 0.0;
      });
    }

Thank you

Audley

Hi, I see it is working fine but how would you handle when the app is not getting loaded? It shows a black space there – Veil

update answere check event == Mobile.failedToload { – Audley

I will try and update the post asap. Thanks for your time – Veil

Hi @SonuKumar You set var paddingBottom = 48.0; but actualy we dont know how much padding needed for various mobile screen device. any idea ? – Superfluid

Answer 2

If you're using a Scaffold Widget, try using the persistentFooterButtons: parameter. Tutorial here: http://cogitas.net/show-firebase-admob-banner-ad-in-flutter/

Stolen

Thanks @nemoryoliver. The problem with this approach is I need to go to the each class and put the logic in the Scaffold – Veil

Answer 3

Set following params in the banner ad show() function:

bannerAd = Utils().myBanner
    ..load()
    ..show(
        anchorType: AnchorType.bottom,
        anchorOffset: 55.0);

And also need to set margin: const EdgeInsets.only(bottom: 55) on the container

Imago