Banner

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(),
);

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);

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.