Modelos nativos no Dart

Os modelos nativos são visualizações com código completo para seus anúncios nativos, projetados para implementação rápida e modificação fácil. Com modelos nativos, o plug-in fornece layouts pré-criados de Android e iOS para você, e é possível personalizar o estilo dos recursos nativos usando uma API Dart.

Este guia demonstra como usar a API Dart para estilizar os elementos visualizações da plataforma e renderizar o anúncio.

Pré-requisitos

  • Flutter 2.4.0 ou mais recente.

Sempre faça testes com anúncios de teste

Ao criar e testar seus apps, use anúncios de teste em vez de anúncios de produção ativos. A maneira mais fácil de carregar anúncios de teste é usar nossa plataforma testar ID do bloco de anúncios para anúncios nativos:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

Os blocos de anúncios de teste são configurados para retornar anúncios de teste para cada solicitação. Portanto, você pode usá-las em seus próprios aplicativos enquanto codifica, testa e depuração, basta substituí-los pelos seus próprios IDs de bloco de anúncios antes para publicar seu app.

Carregar anúncio

O exemplo a seguir carrega um anúncio nativo usando o tamanho de medium nativo. modelo:

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();
  }
}

Consulte NativeTemplateStyle e NativeTemplateTextStyle para conferir as opções de estilo disponíveis.

Personalizar anúncio

Ao personalizar um anúncio nativo usando modelos nativos, a configuração da interface do anúncio fica na classe NativeTemplateStyle, permitindo que você defina o estilo de um anúncio nativo completo no código Dart.

Tamanhos dos modelos

Há dois tipos de modelos de anúncios nativos do Flutter: TemplateType.small e TemplateType.medium. O modelo pequeno é ideal para TableView ou GridView, para anúncios in-feed ou em qualquer lugar em que você precise de uma visualização de anúncio retangular fina. O modelo médio é destinado a uma visualização de página de metade a três quartos, o que é ideal para páginas de destino ou de abertura.

Pequeno

Android
iOS
Médio

Android
iOS

Eventos de anúncios nativos

Para receber notificações sobre eventos relacionados às interações com anúncios nativos, use o listener do anúncio. Em seguida, implemente NativeAdListener para receber retornos de chamada de evento de anúncio.

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) {
            print('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            print('$NativeAd failedToLoad: $error');
            ad.dispose();
          },
          // Called when a click is recorded for a NativeAd.
          onAdClicked: (ad) {},
          // Called when an impression occurs on the ad.
          onAdImpression: (ad) {},
          // Called when an ad removes an overlay that covers the screen.
          onAdClosed: (ad) {},
          // Called when an ad opens an overlay that covers the screen.
          onAdOpened: (ad) {},
          // For iOS only. Called before dismissing a full screen view
          onAdWillDismissScreen: (ad) {},
          // Called when an ad receives revenue value.
          onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
        ),
        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();
  }
}

Anúncio de display

Para mostrar um NativeAd como widget, é necessário instanciar um AdWidget com um anúncio compatível após chamar load(). É possível criar o widget antes chamando load(), mas load() precisa ser chamado antes de ser adicionado ao widget. árvore.

A AdWidget herda da classe Widget do Flutter e pode ser usada como qualquer outra widget. No iOS, coloque o widget em um contêiner com um largura e altura. Caso contrário, seu anúncio não será exibido.

// Small template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 90, // minimum recommended height
    maxWidth: 400,
    maxHeight: 200,
  ),
  child: AdWidget(ad: _nativeAd!),
);

// Medium template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 320, // minimum recommended height
    maxWidth: 400,
    maxHeight: 400,
  ),
  child: AdWidget(ad: _nativeAd!),
);

Excluir anúncio

Uma NativeAd precisa ser descartada quando o acesso a ela não for mais necessário. A prática recomendada para quando chamar dispose() está depois da AdWidget associada ao anúncio nativo é removido da árvore de widgets e no AdListener.onAdFailedToLoad() o retorno de chamada.

Próximas etapas

Exemplo completo no GitHub

Modelos nativos