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:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
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.
Load an ad
The following example instantiates a banner ad:
class BannerExampleState extends State<BannerExample> {
BannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
/// Loads a banner ad.
void loadAd() {
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('BannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
),
)..load();
}
}
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
|
| Provided width x Adaptive height | Adaptive banner | N/A |
To define a custom banner size, set your preferred 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:
class BannerExampleState extends State<BannerExample> {
BannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
/// Loads a banner ad.
void loadAd() {
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('BannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (Ad ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (Ad ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (Ad ad) {},
),
)..load();
}
}
Display a banner 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.
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:
...
if (_bannerAd != null) {
Align(
alignment: Alignment.bottomCenter,
child: SafeArea(
child: SizedBox(
width: _bannerAd!.size.width.toDouble(),
height: _bannerAd!.size.height.toDouble(),
child: AdWidget(ad: _bannerAd!),
),
),
)
}
...
An ad must be disposed 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 BannerAdListener.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.