Enabling banner ads

Warning.

This is an archived version of the documentation. Actual documentation for all platforms can be found here.

A banner is a configurable ad that covers part of the screen and reacts to clicks.

Enabling a banner

Add the import:

import 'package:yandex_mobileads/mobile_ads.dart';
Copied to clipboard

Create an object of the BannerAd class in the Builder or the initState of the widget where you want to place the banner:

final banner = BannerAd(
  adUnitId: 'R-M-XXXXXX-Y',
  // Flex-size
  adSize: AdSize.flexible(width: screenWidth, height: bannerHeight),
  // Sticky-size
  adSize: AdSize.sticky(width: screenWidth),
  adRequest: AdRequest(),
  onAdLoaded: () { 
     /* Do something */
 },
 onAdFailedToLoad: (error) { 
     /* Do something */
 },
);
Copied to clipboard

In the build method of your widget, specify the AdWidget that will accept the new BannerAd object:
```
AdWidget(bannerAd: banner)
Copied to clipboard
```
The ad will load automatically. If necessary, you can call the load method of the banner object after you call build for the first time.

Example of working with banner ads

The code demonstrates how to create and configure BannerAd objects:

import 'package:yandex_mobileads/mobile_ads.dart';

// ...

class BannerAdPage extends StatelessWidget {
  final banner = BannerAd(
    adUnitId: 'demo-banner-yandex',
    adSize: AdSize.sticky(width: screenWidth),
    adRequest: AdRequest(),
    onAdLoaded: () {
        /* Do something */ 
    },
    onAdFailedToLoad: (error) { 
        /* Do something */
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.bottomCenter,
        child: AdWidget(bannerAd: banner),
      ),
    );
  }
}
Copied to clipboard

If an ad is integrated this way, the banner appears after the app starts:

To see how the banner ad will be displayed in the app, use a demo AdUnitId:

demo-banner-yandex