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. 

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

  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 (Automatically renders ads to adjust size and orientation for mobile & tablets)	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();

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');

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

Done!

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