How to get banner size of smart banner?

Question

I'm trying to integrate admob via firebase_admob into my flutter app.

By default, it seems to just overlay/stack the banner on top of the current view ... without respecting the actual widget tree and it's constraints.

I have really no idea why somebody would design a library like that .. but ok. Maybe for anti-fraud reasons?!

To avoid covering actual content with the banner, I would like to add a padding (padding height = banner-height) to my content.

Since I'm using 'smart-banners', the library dynamically tries to find the best banner size for the given screen size at run-time.

How to find out what banner size it came up with??

Solution 1

This is a code I'm using to get the height of a smartbanner, according to Google Specs.

  /// The initial size of the banner is calculated on the height of the
  /// viewport. Due to ADMob banner refresh policies, in order to have
  /// a consistent behaviour, we should keep track of the current AD size
  /// and maintain it when the user rotates the screen, and update that
  /// value at every banner successful.
  /// For now, we will avoid this complexity and set the banner height to
  /// the maximum height that a banner could get on this device, forcing
  /// the use of the longest side as the base.
  /// see https://developers.google.com/admob/android/banner#smart_banners
  double _getSmartBannerHeight(BuildContext context) {
    MediaQueryData mediaScreen = MediaQuery.of(context);
    double dpHeight = mediaScreen.orientation == Orientation.portrait
        ? mediaScreen.size.height
        : mediaScreen.size.width;
    log.fine("Device height: $dpHeight");
    if (dpHeight <= 400.0) {
      return 32.0;
    }
    if (dpHeight > 720.0) {
      return 90.0;
    }
    return 50.0;
  }

As you can see, instead of calculate the banner's height in relation to the actual device's height (in other words according to device orientation) I'm using always the longest side of the device.

This is done because when the user rotates the device, the official flutter_admob plugin does not reload an appropriate banner. Consider this scenario: - device in portrait, banner loads at 50 - user rotate the device: according to docs, the height should be 32, but the banner will not be reloaded, leaving it at height 50 - a new banner load occurs, according to your campaign settings, providing a banner with height of 32 - user rotates again the device and so on

As I stated in the comment, an effective resolution would be to track down the last banner size, and react to the banner load events in order to provide a seamless experience for the user.

Solution 2

You can use my method called getMargin,it caculates the padding value you will need to show the banner without overlaping you content, no matter what height the phone has, it will automatically set the right padding value.

The SmartBanner has three heights: 32|50|90 My method calculates the height of phone and set right value + 5.

   double getMargin(double height){

        double margin;

        if(height <= 400){

          margin = 37;

        } else if(height >= 400 && height < 720){

          margin = 55;

        } else if(height >= 720){

          margin = 95;

        }

        return margin;

      }

Example:

 double screenHeight = MediaQuery.of(context).size.height;

Container(
  height: EdgeInsets.fromLTRB(bottom: getMargin(height))
)

Plus you can add it on a separated class like I do, and make the method static to call from there.

class Ads {

    static double getMargin(double height){

        double margin;

        if(height <= 400){

          margin = 37;

        } else if(height >= 400 && height < 720){

      margin = 55;

    } else if(height >= 720){

      margin = 95;

    }

    return margin;

  }

Example:

 double screenHeight = MediaQuery.of(context).size.height;

Container(
  height: EdgeInsets.fromLTRB(bottom: Ads.getMargin(height))
)

Comments

[Mattia Galati]

The code should work on iOS, but at this time I don't remember if I tested it, sorry.

[Gyuri Majercsik]

unfortunately is not working, the actual banner ad's height is much smaller than it should be...

[poqueque]

These options has fixed height and width (320 or 468). Which means that the banner not always cover the whole width of the screen. Smart banner adapts.

[jasxir]

Ok. If that's the concern, what I've seen many apps do, also what I've done, is to keep the add centered in a container. So it appears like a notch. Or keep that background of that container different if that suits the look.

[AlexPad]

Unfortunately, it is currently the only solution, thanks

[Dominic Orga]

For anyone who needs the smart banner size documentation. developers.google.com/admob/android/banner/smart

[Dominic Orga]

Also, I think you should still use the screen height as the dpHeight when the orientation is in landscape (not screen width), since the screen height automatically adjusts when changing orientation.