Banner & MREC Ads
The following sections show you how to load and then show and hide a banner or MREC ad.
Loading a Banner or MREC
The following code shows you how to load a banner or MREC by using your Ad Unit ID, desired position, and (for banners) desired background color. MAX will size the ad for you automatically:
final String _banner_ad_unit_ID = Platform.isAndroid ? "«Android-banner-ad-unit-ID»" : "«iOS-banner-ad-unit-ID»";
function initializeBannerAds(){ // MAX automatically sizes banners to 320×50 on phones and 728×90 on tablets AppLovinMAX.createBanner(_banner_ad_unit_ID, AdViewPosition.bottomCenter);}
final String _mrec_ad_unit_ID = Platform.isAndroid ? "«Android-MREC-ad-unit-ID»" : "«iOS-MREC-ad-unit-ID»";
public void initializeMRecAds(){ // MAX sizes MRECs to 300×250 on phones and tablets AppLovinMAX.createMRec(_mrec_ad_unit_ID, AdViewPosition.bottomCenter);}
Displaying a Banner
To show a banner, call showBanner()
:
AppLovinMAX.showBanner(_banner_ad_unit_ID);
To hide a banner, call hideBanner()
:
AppLovinMAX.hideBanner(_banner_ad_unit_ID);
Widget Method
You can also render a banner or MREC directly in your widget tree:
final String _ad_unit_ID = Platform.isAndroid ? "«Android-ad-unit-ID»" : "«iOS-ad-unit-ID»";MaxAdView( adUnitId: _ad_unit_ID, adFormat: AdFormat.banner, listener: AdViewAdListener(onAdLoadedCallback: (ad) { ⋮ }, onAdLoadFailedCallback: (adUnitId, error) { ⋮ }, onAdClickedCallback: (ad) { ⋮ }, onAdExpandedCallback: (ad) { ⋮ }, onAdCollapsedCallback: (ad) { ⋮ }))
final String _ad_unit_ID = Platform.isAndroid ? "«Android-ad-unit-ID»" : "«iOS-ad-unit-ID»";MaxAdView( adUnitId: _ad_unit_ID, adFormat: AdFormat.mrec, listener: AdViewAdListener(onAdLoadedCallback: (ad) { ⋮ }, onAdLoadFailedCallback: (adUnitId, error) { ⋮ }, onAdClickedCallback: (ad) { ⋮ }, onAdExpandedCallback: (ad) { ⋮ }, onAdCollapsedCallback: (ad) { ⋮ }))
Ad Preloading
As of Flutter plugin version 3.11.1, you can preload ads for platform widgets before you mount MaxAdView
.
When you mount MaxAdView
with the Ad Unit ID you preloaded, MaxAdView
is constructed with a preloaded platform widget.
This allows the ads to display quickly.
Flutter plugin version 4.1.0 updates this preloading feature to support multiple MaxAdView
instances.
The preloadWidgetAdView()
method returns an AdViewId
, which you can use to specify the preloaded ad when you mount a MaxAdView
.
AppLovinMAX.preloadWidgetAdView(«ad-unit-ID», AdFormat.banner) .then((adViewId) { print('Started preloading a banner ad $(adViewId) for ${«ad-unit-ID»}'); });
AppLovinMAX.preloadWidgetAdView(«ad-unit-ID», AdFormat.mrec) .then((adViewId) => { print('Started preloading a MREC ad $(adViewId) for ${«ad-unit-ID»}'); });
You can specify the AdViewId
when you mount a MaxAdView
:
MaxAdView( adUnitId: «ad-unit-ID», adFormat: AdFormat.banner, adViewId: «ad-view-ID», listener: AdViewAdListener(onAdLoadedCallback: (ad) { print('Banner widget ad (${ad.adViewId}) loaded from ${ad.networkName}'); }))
MaxAdView( adUnitId: «ad-unit-ID», adFormat: AdFormat.mrec, adViewId: «ad-view-ID», listener: AdViewAdListener(onAdLoadedCallback: (ad) { print('MREC widget ad (${ad.adViewId}) loaded from ${ad.networkName}'); }))
When you unmount the MaxAdView
, the preloaded platform widget is not destroyed.
Instead, it is cached and reused for the next mount.
To release its resources, you must manually destroy it when you no longer need it:
AppLovinMAX.destroyWidgetAdView(«ad-view-ID») .then((_) { print('Destroyed the preloaded banner ad'); });
AppLovinMAX.destroyWidgetAdView(«ad-view-ID») .then((_) { print('Destroyed the preloaded MREC ad'); });
If you omit an AdViewId
when you mount a MaxAdView
, the component dynamically loads an ad.
In such a case, when you unmount the MaxAdView
, it is automatically destroyed and cannot be reused.
See the example app at the AppLovin-MAX-Flutter GitHub project for a complete working example.
Adaptive Banners
Adaptive banners are responsive banners with heights that derive from the device type and the width of the banner.
Starting with Flutter plugin version 4.2.0, banners from ad networks that support adaptive banners are adaptive by default.
To disable adaptive banners, set the adaptive_banner
flag to false
, as in this example:
AppLovinMAX.setBannerExtraParameter(«ad-unit-ID», "adaptive_banner", "false");
MaxAdView( adUnitId: _bannerAdUnitId, adFormat: AdFormat.banner, extraParameters: const {'adaptive_banner': 'false'});
If you need to adjust your UI based on the adaptive banner size, you can retrieve the width and height of the loaded ad, in dp. The following code demonstrates how to do this:
AppLovinMAX.setBannerListener(AdViewAdListener(onAdLoadedCallback: (ad) { double? widthDp = ad.size?.width; double? heightDp = ad.size?.height;}));
MaxAdView( adUnitId: _bannerAdUnitId, adFormat: AdFormat.banner, listener: AdViewAdListener(onAdLoadedCallback: (ad) { double? widthDp = ad.size?.width; double? heightDp = ad.size?.height; }));
Stopping and Starting Auto-Refresh
You may want to stop auto-refresh for an ad. This may be the case when you hide an ad or when you want to manually refresh. Stop auto-refresh with the following code:
AppLovinMAX.showBanner(«ad-unit-ID»);AppLovinMAX.stopBannerAutoRefresh(«ad-unit-ID»);
MaxAdView( adUnitId: «ad-unit-ID», adFormat: AdFormat.banner, isAutoRefreshEnabled: false, ⋮
AppLovinMAX.showMRec(«ad-unit-ID»);AppLovinMAX.stopMRecAutoRefresh(«ad-unit-ID»);
MaxAdView( adUnitId: «ad-unit-ID», adFormat: AdFormat.mrec, isAutoRefreshEnabled: false, ⋮
Start auto-refresh for an ad with the following code:
AppLovinMAX.startBannerAutoRefresh(«ad-unit-ID»);
MaxAdView( adUnitId: «ad-unit-ID», adFormat: AdFormat.banner, isAutoRefreshEnabled: true, ⋮
AppLovinMAX.startMRecAutoRefresh(«ad-unit-ID»);
MaxAdView( adUnitId: «ad-unit-ID», adFormat: AdFormat.mrec, isAutoRefreshEnabled: true, ⋮