Style ad layouts with native templates

  • Native templates provide prebuilt Android and iOS layouts for native ads in Flutter, allowing for fast implementation and easy style modification using a Dart API.

  • Prerequisites for using native templates include Flutter 2.4.0 or higher, completing the Get started guide, and familiarizing yourself with native ad options.

  • Always test your native ad implementation with dedicated test ad unit IDs for Android and iOS before publishing.

  • You can load a native ad using the NativeAd class, specifying the ad unit ID and a NativeTemplateStyle for styling.

  • Implement a NativeAdListener to receive callbacks for native ad events such as ad loading, failure to load, clicks, and impressions.
Select platform: iOS Flutter Android (Legacy)

Native templates are code-complete views for your native ads, designed for fast implementation and easy modification. With native templates, the plugin provides prebuilt Android and iOS layouts for you, and you can customize the style of the native assets using a Dart API.

This guide demonstrates how to use the Dart API to stylize the underlying platform views and to render the ad.

Prerequisites

Before you continue, do the following:

  • Flutter 2.4.0 or higher.

Always test with test ads

When building and testing your apps, make sure you use test ads rather than live, production ads. The easiest way to load test ads is to use our dedicated test ad unit ID for native ads:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

The test ad units are configured to return test ads for every request, so you can 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.

Load ad

The following example loads a native ad using the medium sized native template:

class NativeExampleState extends State<NativeExample> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

See NativeTemplateStyle and NativeTemplateTextStyle for available styling options.

Customize ad

When customizing a native ad using native templates, your ad's UI configuration will live in the NativeTemplateStyle class, enabling you to style an entire native ad in Dart code.

Template sizes

Flutter native ad templates come in two types: TemplateType.small and TemplateType.medium. The small template is ideal for a TableView or GridView, for in-feed ads or anywhere you need a thin rectangular ad view. The medium template is meant to be a half to three-quarters page view, which is ideal for landing or splash pages.

Small

Android
iOS
Medium

Android
iOS

Native ad events