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 gets you started with [anchored adaptive banner ads](https://support.google.com/admob/answer/9993556). Anchored adaptive banners optimizes the ad size for each device using an ad width you specify. Anchored adaptive banner ads are fixed aspect ratio ads rather than [fixed size](https://developers.google.com/admob/flutter/banner/fixed-size.md.txt) ads. The aspect ratio is similar to 320x50. Once you specify the full width available, Google Mobile Ads Flutter Plugin returns an ad with optimal height for that width. The optimal height for the ad remains constant across different ad requests, and the content surrounding the ad stays in place when the ad refreshes. ## 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/9214589741 ### iOS ca-app-pub-3940256099942544/2435281174 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. ## Get the ad size Large adaptive banners provide a larger format designed for non-scrolling layouts. Compared to standard anchored adaptive banners, these banners allow for a taller maximum height (up to 20% of screen height, between 50 and 150 dp). This increased space is optimized for video content. To request a banner ad with the correct ad size, follow these steps: 1. Get the width of the device's screen in density-independent pixels (dp) using `MediaQuery.of(context)`. If you don't want to use the full screen width, you can set your own width. 2. Use the appropriate static method on the `AdSize` class to get an `AdSize` object. For example, use `AdSize.getLargeAnchoredAdaptiveBannerAdSize(int width)` to get the ad size for the current orientation. ```dart // Get an AnchoredAdaptiveBannerAdSize before loading the ad. final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize( MediaQuery.sizeOf(context).width.truncate(), ); ``` ## Load an ad The following example loads a banner ad: ```dart void _loadAd() async { // Get an AnchoredAdaptiveBannerAdSize before loading the ad. final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize( MediaQuery.sizeOf(context).width.truncate(), ); if (size == null) { // Unable to get width of anchored banner. return; } unawaited( BannerAd( adUnitId: "_adUnitId", request: const AdRequest(), size: size, listener: BannerAdListener( onAdLoaded: (ad) { // Called when an ad is successfully received. debugPrint('Ad was loaded.'); setState(() { _bannerAd = ad as BannerAd; }); }, onAdFailedToLoad: (ad, err) { // Called when an ad request failed. debugPrint('Ad failed to load with error: $err'); ad.dispose(); }, ), ).load(), ); } ``` Replace _adUnitId with your own ad unit ID. ### 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: ```dart onAdOpened: (Ad ad) { // Called when an ad opens an overlay that covers the screen. debugPrint('Ad was opened.'); }, onAdClosed: (Ad ad) { // Called when an ad removes an overlay that covers the screen. debugPrint('Ad was closed.'); }, onAdImpression: (Ad ad) { // Called when an impression occurs on the ad. debugPrint('Ad recorded an impression.'); }, onAdClicked: (Ad ad) { // Called when a click event occurs on the ad. debugPrint('Ad was clicked.'); }, onAdWillDismissScreen: (Ad ad) { // iOS only. Called before dismissing a full screen view. debugPrint('Ad will be dismissed.'); }, ``` ## Refresh an ad If you configured your ad unit to refresh, you don't need to request another ad when the ad fails to load. Google Mobile Ads Flutter Plugin respects any refresh rate you specified in the AdMob UI. If you haven't enabled refresh, issue a new request. For more details on ad unit refresh, such as setting a refresh rate, see [Use automatic refresh for Banner ads](https://support.google.com/admob/answer/3245199). > [!NOTE] > **Note:** When setting a refresh rate in the AdMob UI, the automatic refresh occurs only if the banner is visible on screen. ## 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: ```dart 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](https://github.com/flutter/flutter/wiki/Hybrid-Composition#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. ## Complete example on GitHub To view the full example, see [API demo](https://github.com/googleads/googleads-mobile-flutter/tree/main/samples/admob/api_demo). ## Learn about other banner types Familiarize yourself with other types of banners defined in this section for your Flutter application. ### Inline adaptive banners Inline adaptive banners have variable height and are larger, taller banners compared to anchored adaptive banners. Inline adaptive banners are recommended over anchored adaptive banner ads for apps that place banner ads in scrollable content. For more details, see [inline adaptive banners](https://developers.google.com/admob/flutter/banner/inline-adaptive.md.txt). ### Collapsible banners Collapsible banner ads are banner ads that are initially presented as a larger overlay, with a button to collapse the ad to a smaller size. Consider using this banner to further optimize your performance. For more details, see [collapsible banner ads](https://developers.google.com/admob/flutter/banner/collapsible.md.txt).