Creating a banner ad

Banner Ads

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. If you're new to mobile advertising, they're a great place to start.

Creating an ad

To create an ad, use the widget BannerAd:

BannerAd(size: BannerSize.BANNER)

The default size is SMART_BANNER

Smart Banners

Smart Banners are ad units that render screen-width banner ads on any screen size across different devices in either orientation. Smart Banners detect the width of the device in its current orientation and create the ad view that size.
Three ad heights are implemented in smart banners:

Ad height	Screen height
32 dp	≤ 400 dp
50 dp	> 400 dp and ≤ 720 dp
90 dp	> 720 dp

Typically, Smart Banners on phones have a height of 50 dp in portrait and 32 dp in landscape. On tablets, height is normally 90 dp in both orientations.

When an image ad isn't large enough to take up the entire allotted space, the image will be centered, and the space on either side will be filled in.

Usage

BannerAd(
  ...
  size: BannerSize.SMART_BANNER,
  ...
)

Deprecated

As of SDK v20, Smart Banner ads are deprecated in favor of adaptive banner ads. Adaptive banners provide superior performance and more flexibility in setting ad width.

Note: Adaptive Banners are not supported by this plugin yet

Other sizes

Name	WidthxHeight	Availability
BANNER	320x50	Phones and Tablets
LARGE_BANNER	320x100	Phones and Tablets
MEDIUM_RECTANGLE	320x250	Phones and Tablets
FULL_BANNER	468x60	Tablets
LEADERBOARD	728x90	Tablets

Usage

BannerAd(
  ...
  size: BannerSize.`Name` /* (`BANNER`, `FULL_BANNER`, etc) */,
  ...
)

Custom size

To define a custom banner size, set your desired BannerSize, as shown here:

BannerAd(
  ...
                     // width, height
  size: BannerSize.fromWH(300, 50),
  size: BannerSize(Size(300, 50)),
  ...
)

Builder and Placeholders

AdBuilder

The builder of the ad. The ad won't be reloaded if the builder changes

DO:

BannerAd(
  builder: (context, child) {
    return Container(
      // Applies a blue color to the background.
      // You can use anything here to build the ad.
      // The ad won't be reloaded
      color: Colors.blue,
      child: child,
    );
  }
)

DON'T:

Container(
  color: Colors.blue,
  child: NativeAd(),
)

If you change the Container to something else (to a DecoratedBox, for example), the ad will be reloaded. You can use the builder for such things.

Note: The controller can NOT save the ad state. The NativeAd NEEDS to be rendered on the screen

Loading and Error placeholders

Loading and Error placeholders will be shown when the ad is loading or has a load error, respectively.

Usage

NativeAd(
  error: Text('error'),
  loading: Text('loading'),
),

You can use the controller to have better control on Ad Events.

---

Next: Using the controller and listening to events