Banner integration for Flutter

Banners are a rectangular, system-initiated ads that can be either static or animated, and are served in a designated area around your live app content. 

Before you start Make sure you’ve integrated the ironSource Flutter Plugin into your app. You can access integration guidance is outlined here

Step 1. Implement the Listener

Implement IronSourceBannerListener in your code. The ironSource Flutter Plugin fires several callbacks to inform you of Banner activity. Make sure to set the listeners before SDK initialization, as this will ensure the SDK sends all relevant information.

The SDK will notify your Listener of all possible events listed below:

class YourDartClass with IronSourceBannerListener {
  // Invoked once the banner has successfully loaded.
  void onBannerAdLoaded();
  // Invoked when the banner loading process has failed.
  // - You can learn about the reason by examining [error]
  void onBannerAdLoadFailed(IronSourceError error);
  // Invoked when a user clicks on the banner ad.
  void onBannerAdClicked();
  // Notifies the presentation of a full screen content following a user-click.
  void onBannerAdScreenPresented();
  // Invoked when the presented screen has been dismissed.
  void onBannerAdScreenDismissed();
  // Invoked when a user is leaving the app.
  void onBannerAdLeftApplication();
}

Step 2. Load Banner Ad

To load a Banner ad, call the following function:

  • Load the Banner view by calling this method (in this example it’s the BANNER banner size):
    IronSource.loadBanner(
                   size: IronSourceBannerSize.BANNER,
                   position: IronSourceBannerPosition.Bottom);

    See table below for details about our supported standard banner sizes:
    IronSourceBannerSize Description Dimensions (WxH) (points in iOS, dp in Android)
    BANNER Standard Banner 320 x 50
    LARGE Large Banner 320 x 90
    RECTANGLE Medium Rectangular (MREC) 300 x 250
    SMART
    Smart Banner
    (Adjusted for both mobile and tablet)
    iOS:
    If (iPhone) 320 x 50
    If (iPad) 728 x 90
    Android:
    If (screen width ≤ 720) 320 x 50
    If (screen width > 720) 728 x 90

    See table below for details about our supported standard banner positions:

    IronSourceBannerPosition Description
    TOP Banner will be positioned at the top center of the screen
    BOTTOM Banner will be positioned at the bottom center of the screen
  • Another option is initiating the banner with Custom size, using this signature (WxH) (points in iOS, dp in Android):
    IronSource.loadBanner(
      size: IronSourceBannerSize.custom(width: 320, height: 50),
      position: IronSourceBannerPosition.Bottom);

You will receive the onBannerAdLoadedEvent and the banner will show on your app.

Hide & Display Banner – Optional

In order to provide maximum flexibility in the ad experience, you now have the ability to hide and present banners on your app.

Using hideBanner and displayBanner APIs, you can control whether banners can be loaded and destroyed while in the background.

Once you’ve loaded and served a banner, you can choose to hide this banner and re-show it at a later point in your app.

To hide the banner, call this function:

IronSource.hideBanner();

To then show this same banner again, call this function:

IronSource.displayBanner();
    Note: The banner visibility setting will be reset to ‘visible’ every time destroyBanner is called.

    Step 3. Additional Load Settings

    Ad Placements

    We support placements, as well as capping and pacing for Banners on the ironSource dashboard. , as well as capping and pacing for Banners on the ironSource dashboard. You can learn how to set up placements, capping, and pacing for Banners to optimize your app’s user experience here.

    If you’ve set up placements for your Banner, call the following method to serve a Banner ad in a specific location:

    IronSource.loadBanner(
      size: IronSourceBannerSize.BANNER,
      position: IronSourceBannerPosition.Bottom,
      placementName: 'YOUR_PLACEMENT_NAME');

    Note: The plugin allows to show only one banner at a time.

    Vertical Offset – Optional

    You can set a vertical offset (iOS: point, Android: dp) to adjust your banner position more granularly.

    • Negative value: Upward offset relative to the default position
    • Positive value: Downward offset relative to the default position

    Make sure that a banner will be visible with the configured offset, following these limitations:

    • Offset in the same direction of the position will be ignored. e.g. IronSourceBannerPosition.Bottom & offset 50
    • The offsets in the opposite direction or both directions from the Center position can go beyond the screen boundaries. (e.g. IronSourceBannerPosition.Bottom & offset -10000)
    IronSource.loadBanner(
      size: IronSourceBannerSize.BANNER,
      position: IronSourceBannerPosition.Bottom,
      verticalOffset: -50, // adding 50dp/50point margin bottom
      placementName: 'YOUR_PLACEMENT_NAME');

    Step 4. Destroy the Banner Ad

    To destroy a banner, call the following method:

    IronSource.destroyBanner();

    A destroyed banner can no longer be loaded. If you want to serve it again, you must initiate it again.

    Step 5.  Integrate a Banner Provider

    Next, integrate the ad network adapters to serve Banners through ironSource Mediation.

    You can find the supported networks below, and bannerSize behaviour for each network, as defined for relevant platform: 

    iOS Banner Support 

    Android Banner Support 

    Step 6.  Adaptive banners

    The adaptive banner feature will allow you to receive the optimal banner size, based on the ad width and the screen size.
    While using this feature, networks that support adaptive banners (currently AdMob and GoogleAdManager) will return ads with best-fit height based on your banner size.
    All other networks will continue to deliver banners according to the specified ad size. Define your banner size set the “isAdaptive” flag as below:

    IronSourceBannerSize size = IronSourceBannerSize.BANNER;
    size.isAdaptive = true;
     

    Done!

    You are now all set up to serve Banners in your application. Verify your integration with our Integration Helper.