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 90See 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:
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.
- Set the banner default size.
- Set the adaptive flag to true.
- 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.
- Create a container, using the parameter sizes defined in step #1
- 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.
Done!
You are now all set up to serve Banners in your application. Verify your integration with our Integration Helper.