Banner integration for Flutter

Implement banner ads in your Flutter application with the ironSource SDK, supporting various ad sizes and mediation networks.

Read time 4 minutes

Last updated 4 hours ago

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.

Note

This documentation is relevant for SDK 8.4.0+.

Prerequisites

Ensure that you have correctly integrated the ironSource Flutter Plugin into your app. Integration is outlined here.
Ensure that you initialize the SDK using LevelPlay Initialization API.
Find the AdUnitID in LevelPlay dashboard.

Create Banner Ad Object and Set Size

The creation of the banner ad object should be done after receiving onInitSuccess callback.


final GlobalKey<LevelPlayBannerAdViewState> _bannerKey = GlobalKey<LevelPlayBannerAdViewState>();
@override
Widget build(BuildContext context) { 
    return SizedBox(
          width: _adSize.width.toDouble(),
          height: _adSize.height.toDouble(),
          child: LevelPlayBannerAdView(
            key: _bannerKey,
            adUnitId: [YOUR_AD_UNIT_ID],
            adSize: [YOUR_AD_SIZE],
            listener: [YOUR_LISTENER],
            placementName: [YOUR_PLACEMENT], // optional
            onPlatformViewCreated:[YOUR_LOAD_BANNER_METHOD] // optional
          ),
        );
}

Banner Sizes

LevelPlayAdSize	Description	Dimensions in dp (Width X Height)
BANNER	Standard banner	320 x 50
LARGE	Large banner	320 x 90
MEDIUM_RECTANGLE	Medium Rectangular (MREC)	300 x 250
Adaptive	Automatically renders ads to adjust size and orientation for mobile & tablets	Device width X recommended height

To create the ad size follow one of these options: Adaptive ad size that adjusts to the screen width (recommended): This option replaces the “SMART” integration, as it will return BANNER or LEADERBOARD according to the device type. Networks that support adaptive features (Google, Yandex) will return a height based on their optimization logic.


LevelPlayAdSize adSize = await LevelPlayAdSize.createAdaptiveAdSize();

Adaptive ad size using fixed width ad size: This option allows you to set a specific width. Networks that support adaptive- banner feature (Google, Yandex) will return a height based on their optimization logic based on the provided width. All other networks will return the fallback size (either BANNER or LEADERBOARD) according to the width provided.


LevelPlayAdSize adSize = await LevelPlayAdSize.createAdaptiveAdSize(width: 400);

Specific banner size: This option allows you to set specifically a banner size: banner, large, medium.


LevelPlayAdSize adSize = LevelPlayAdSize.MEDIUM_RECTANGLE;

Placements

We support placements in banners for reporting only. Placements should be set before the loadAd, to affect all reloaded ads.

Set Banner Listener

Implement the LevelPlayBannerAdViewListener in your code to get informed of ad delivery.

It is recommended to set the listener before loading the banner ad.
Each banner ad should have its own listener implementation.
Callbacks run on the main thread.


/**
 Called after a banner has been loaded.
 @param adInfo The info of the ad.
 */ 
@override
void onAdLoaded(LevelPlayAdInfo adInfo) {}
/**
 Called after a banner has failed to load.
 @param error The information about the error.
 */ 
@override
void onAdLoadFailed(LevelPlayAdError error) {}
/**
 Notifies the screen is displayed.
 @param adInfo The info of the ad.
 */ 
@override
void onAdDisplayed(LevelPlayAdInfo adInfo) {}
/**
 Notifies the screen failed to display.
 @param adInfo The info of the ad.
 @param error The information about the error. 
 */ 
@override
void onAdDisplayFailed(LevelPlayAdInfo adInfo, LevelPlayAdError error) {}
/**
 Invokes when the user clicks on the banner ad.
 @param adInfo The info of the ad.
 */ 
@override
void onAdClicked(LevelPlayAdInfo adInfo) {}
/**
 Ad is opened on full screen.
 @param adInfo The info of the ad.
 */ 
@override
void onAdExpanded(LevelPlayAdInfo adInfo) {}
/**
 Ad is restored to its original size.
 @param adInfo The info of the ad.
 */ 
@override
void onAdCollapsed(LevelPlayAdInfo adInfo) {}
/**
 User pressed on the ad and was navigated out of the app.
 @param adInfo The info of the ad.
 */ 
@override
void onAdLeftApplication(LevelPlayAdInfo adInfo) {}

Load Banner Ad

To load a banner ad use loadAd.


// Load the banner ad 
_bannerKey.currentState?.loadAd();

You can either call loadAd when onPlatformViewCreated is called - which is when the banner view container is fully created, or in other timing that you choose.

Pause and Resume Banner Refresh

You can pause banner refresh in your code if the refresh value was defined in the platform. Use the following methods to stop the automatic refresh of the banner ad, or re-enable it after pausing.

Note

When the banner is displayed again, it will complete the time until refresh from the time it was paused.

pauseAutoRefresh – pauses auto-refresh of the banner ad.
resumeAutoRefresh – resumes auto-refresh of the banner ad after it has been paused.


// Pause refresh 
_bannerKey.currentState?.pauseAutoRefresh(); 
// Resume refresh 
_bannerKey.currentState?.resumeAutoRefresh();

Destroy Banner Ad

To destroy a banner, call the destroy method. A destroyed banner can no longer be shown again. To display more ads, create a new LevelPlayBannerAdView object.


_bannerKey.currentState?.destroy();

Full Implementation Example of Banner Ads

Here is an example for creating and loading a banner ad using standard banner size.


  // Start of the widget...
 final _bannerKey = GlobalKey<LevelPlayBannerAdViewState>();
 final adSize = LevelPlayAdSize.BANNER;
 @override
 Widget build(BuildContext context) {
   return SizedBox(
     width: adSize.width.toDouble(), // Get actual banner layout width size
     height: adSize.height.toDouble(), // Get actual banner layout height size
     child: LevelPlayBannerAdView(
       key: _bannerKey,
       adUnitId: 'YOUR_AD_UNIT_ID',
       adSize: adSize,
       listener: this,
       placementName: 'YOUR_PLACEMENT',
       onPlatformViewCreated: () {
// In this implementation we call loadAd on the key,
           // it is also possible to store the LevelPlayBannerAdView widget
           // in a variable and call loadAd on it as described above in the docs.
         _bannerKey.currentState?.loadAd(); 
       },
     ),
   );
 }
 @override
 void onAdClicked(LevelPlayAdInfo adInfo) {
   // Implement your logic here...
 }
 @override
 void onAdCollapsed(LevelPlayAdInfo adInfo) {
   // Implement your logic here...
 }
 @override
 void onAdDisplayFailed(LevelPlayAdInfo adInfo, LevelPlayAdError error) {
   // Implement your logic here...
 }
 @override
 void onAdDisplayed(LevelPlayAdInfo adInfo) {
   // Implement your logic here...
 }
 @override
 void onAdExpanded(LevelPlayAdInfo adInfo) {
   // Implement your logic here...
 }
 @override
 void onAdLeftApplication(LevelPlayAdInfo adInfo) {
   // Implement your logic here...
 }
 @override
 void onAdLoadFailed(LevelPlayAdError error) {
   // Implement your logic here...
 }
 @override
 void onAdLoaded(LevelPlayAdInfo adInfo) {
   // Implement your logic here...
 }
 // End of widget...

LevelPlay Mediation Demo App

The Integration Demo application demonstrates how to integrate banner Ad Unit APIs in your app. Download Flutter Demo Application Verify your integration with our Integration Test Suite.

Next steps

Follow our integration guides to integrate additional Interstitial Ad networks or configure additional ad formats:

Documentation

Engine

Services

Grow

Industry

Support

Unity LevelPlay

Get started with LevelPlay

SDK integration

LevelPlay platform