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:

abstract class LevelPlayBannerListener {
 /// Invoked each time a banner was loaded. Either on refresh, or manual load.\
 /// - [adInfo] includes information about the loaded ad
 /// Native SDK Reference
 /// - Android: onAdLoaded
 /// -     iOS: didLoad
 void onAdLoaded(IronSourceAdInfo adInfo);
 /// Invoked when the banner loading process has failed.\
 /// This callback will be sent both for manual load and refreshed banner failures.
 /// Native SDK Reference
 /// - Android: onAdLoadFailed
 /// -     iOS: didFailToLoadWithError
 void onAdLoadFailed(IronSourceError error);
 /// Invoked when end user clicks on the banner ad.
 /// Native SDK Reference
 /// - Android: onAdClicked
 /// -     iOS: didClickWithAdInfo
 void onAdClicked(IronSourceAdInfo adInfo);
 /// Notifies the presentation of a full screen content following user click.
 /// Native SDK Reference
 /// - Android: onAdScreenPresented
 /// -     iOS: didPresentScreenWithAdInfo
 void onAdScreenPresented(IronSourceAdInfo adInfo);
 /// Notifies the presented screen has been dismissed.
 /// Native SDK Reference
 /// - Android: onAdScreenDismissed
 /// -     iOS: didDismissScreenWithAdInfo
 void onAdScreenDismissed(IronSourceAdInfo adInfo);
 /// Invoked when the user left the app.
 /// Native SDK Reference
 /// - Android: onAdLeftApplication
 /// -     iOS: didLeaveApplicationWithAdInfo
 void onAdLeftApplication(IronSourceAdInfo adInfo);

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):
                   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 Banner
    (Automatically renders ads to adjust size and orientation for mobile & tablets)
    If (iPhone) 320 x 50
    If (iPad) 728 x 90
    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):
      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:


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

    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:

      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)
      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:


    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 height , based on a predefined ad-width. 

    While using this feature, networks that support adaptive banners (Currently AdMob and Ad Manager only) will return ads with best-fit-height based on the container width you defined. All other networks will continue to deliver banners according to the specified default ad size.  

    In this implementation (Supported from ironSource SDK 7.9.0+, Flutter version 1.3.0+) the container defines the boundaries of the banner for all networks, whether they support adaptive banners or not. This ensures a consistent experience across each refresh during the same load session.

    1. Set the banner default size. 
    2. Set the adaptive flag to true. 
    3. Define adaptive banner parameters – 
      • Width: the banner width you would like to display. Use either fix size, or the device’s width 
      • Height: use getMaximalAdaptiveHeight API to get the recommended banner height for the width you defined in the previous step. 
    4. Create a container, using the parameter sizes defined in step #1 
    5. Load the banner
    IronSourceBannerSize bannerSize = IronSourceBannerSize.BANNER; // the banner size of choice will be the default value for non supporting banner adaptive networks
    bannerSize.isAdaptive = true;
    int width = 320; //set width to your desired size
    int adaptiveHeight = await IronSource.getMaximalAdaptiveHeight(width);
    bannerSize.isContainerParams = IronSourceContainerParams(width: width, height: adaptiveHeight);
    await IronSource.loadBanner(size: bannerSize, position: position);

    The getMaximalAdaptiveHeight method provides the maximum height for a given width in adaptive banner supported networks. If there are no networks that support adaptive banners, the returned value will be -1.


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