Banner ads occupy a spot within an app's layout, either at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time.
This guide shows how to integrate banner ads from AdMob into a Flutter app. In addition to code snippets and instructions, it also includes information about sizing banners properly.
Always test with test ads
When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.
The easiest way to load test ads is to use our dedicated test ad unit ID for banners:
The test ad units are configured to return test ads for every request, and you're free to use them in your own apps while coding, testing, and debugging. Just make sure you replace them with your own ad unit IDs before publishing your app.
Instantiate ad
A BannerAd
requires an adUnitId
, an AdSize
, an AdRequest
, and a
BannerAdListener
. The following example instantiates a banner ad:
final BannerAd myBanner = BannerAd(
adUnitId: '<ad unit ID>',
size: AdSize.banner,
request: AdRequest(),
listener: BannerAdListener(),
);
Banner sizes
The table below lists the standard banner sizes.
Size in dp (WxH) | Description | AdSize Constant |
---|---|---|
320x50 | Standard Banner | banner
|
320x100 | Large Banner | largeBanner
|
320x250 | Medium Rectangle | mediumRectangle
|
468x60 | Full-Size Banner | fullBanner
|
728x90 | Leaderboard | leaderboard
|
Screen width x 32|50|90 | Smart Banner | Use getSmartBanner(Orientation)
|
To define a custom banner size, set your desired AdSize
:
final AdSize adSize = AdSize(300, 50);
Banner ad events
Through the use of BannerAdListener
, you can listen for lifecycle events, such
as when an ad is loaded. This example implements each method and logs a message
to the console:
final BannerAdListener listener = BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (Ad ad) => print('Ad loaded.'),
// Called when an ad request failed.
onAdFailedToLoad: (Ad ad, LoadAdError error) {
// Dispose the ad here to free resources.
ad.dispose();
print('Ad failed to load: $error');
},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (Ad ad) => print('Ad opened.'),
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (Ad ad) => print('Ad closed.'),
// Called when an impression occurs on the ad.
onAdImpression: (Ad ad) => print('Ad impression.'),
);
Load ad
After a BannerAd
is instantiated, load()
must be called before it can be
shown on the screen:
myBanner.load();
Display ad
To display a BannerAd
as a widget, you must instantiate an AdWidget
with a
supported ad after calling load()
. You can create the widget before calling
load()
, but load()
must be called before adding it to the widget tree.
final AdWidget adWidget = AdWidget(ad: myBanner);
AdWidget
inherits from Flutter's Widget class and can be used like any other
widget. On iOS, make sure you place the widget in a widget with a specified
width and height. Otherwise, your ad may not be displayed. A BannerAd
can be
placed in a container with a size that matches the ad:
final Container adContainer = Container(
alignment: Alignment.center,
child: adWidget,
width: myBanner.size.width.toDouble(),
height: myBanner.size.height.toDouble(),
);
Once an ad has called load()
, it must call dispose()
when access to it is no
longer needed. The best practice for when to call dispose()
is either after
the AdWidget
is removed from the widget tree or in the
AdListener.onAdFailedToLoad
callback.
That's it! Your app is now ready to display banner ads.
Scrolling limitation on Android 9 and below
We are aware that some older or less powerful devices running Android 9 or earlier may have suboptimal performance when displaying inline banner ads within scrolling views. We recommend only using these types of banners on Android 10 or later. Fixed position banners such as anchored banners are not affected and can be used with optimal performance on all Android API levels.