Banner

Banner ads are rectangular image or text ads that occupy a space inside the application layout. They stay on screen while the users interact with the app and can automatically refresh after a certain period of time. If you are new in mobile advertising, they are an excellent choice to start.

Integration

Banners are integrated by adding the BannerAd widget to the app's layout. Below, you can find a simple integration example:

import 'package:wortise/ad_size.dart';
import 'package:wortise/banner_ad.dart';

/* ... */

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Wortise Flutter Example'),
      ),
      body: ListView(
        padding: EdgeInsets.all(20),
        children: [
          /* Banner must be inside a container */
          Container(
            height: 50,
            child: BannerAd(
              adSize: AdSize.HEIGHT_50,
              adUnitId: 'Wortise Ad Unit ID',
            ),
          )
        ]
      ),
    ),
  );
}

The widget has support for the following parameters:

Parameter	Type	Required	Description
adUnitId	String	Yes	The ad unit ID to assign to the banner
adSize	AdSize	No	Maximum size (height) for the banner. The possible values for this parameter are declared in the AdSize class
autoRefreshTime	Integer	No	Value in seconds that represents the time that must elapse to load a new banner ad
keepAlive	Boolean	No	Indicates if the banner instance should be keep "alive" at any moment
listener	Function	No	Listener to receive the banner events (BannerAdEvent)

Adaptive banners

Adaptive banners are a new banner format where the size of the ads is adapted according to the device and the app user-interface, in order to maximize performance.

Currently there is support for two kind of adaptive banners:

Anchored

This kind of banner is designed to replace the traditional 320x50 banners and be positioned at the top or bottom of the screen.

To make use of this format, an AdSize generated in the following way must be passed to the BannerAd widget:

// It is needed to specify the banner width
AdSize.getAnchoredAdaptiveBannerAdSize(width);

Inline

This other kind of banner, in comparison to the anchored, is designed to have a variable height and be positioned inside a scrolling content.

In this case, an AdSize must be generated this way:

// It is needed to specify the banner width. The maximum height is an
// optional parameter (by passing 0 or a negative value)
AdSize.getInlineAdaptiveBannerAdSize(width, maxHeight);

Listener setup

A listener can be set to any BannerAd instance to receive the events that happen during its lifecycle. For this, it is needed to assign a function to the listener parameter of the widget, just as shown below:

BannerAd(
  adSize: AdSize.HEIGHT_50,
  adUnitId: 'Wortise Ad Unit ID',
  listener: (event, args) {
    switch (event) {
      case BannerAdEvent.CLICKED: {
        // The ad has been clicked
      }
      break;
      
      case BannerAdEvent.FAILED_TO_LOAD: {
        // The ad could not be loaded
      }
      break;

      case BannerAdEvent.IMPRESSION: {
        // The ad has generated an impression
      }
      break;
      
      case BannerAdEvent.LOADED: {
        // The ad has been loaded
      }
      break;
      
      case BannerAdEvent.REVENUE_PAID: {
        // The ad has generated revenue
      }
      break;
    }
  },
)