CODEWITHSUNDEEP
flutteradmoboverlapbanner-ads
Sam
Sam

Reputation: 3064

Flutter AdMob Banner Ad overlaps screen

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.

enter image description here

Upvotes: 8

Views: 6770

Answers (3)

Mohammad Ashraful Kabir
Mohammad Ashraful Kabir

Reputation: 265

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

Upvotes: 1

oliverbytes
oliverbytes

Reputation: 644

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

Upvotes: 6

Sonu Kumar
Sonu Kumar

Reputation: 969

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

Upvotes: 8

Related Questions