Szablony natywne w Dart

Szablony natywne to widoki reklam natywnych z kompletnym kodem, które zostały zaprojektowane z myślą o szybkiej implementacji i łatwej modyfikacji. Dzięki szablonom natywnym wtyczka udostępnia gotowe układy na Androida i iOS, a Ty możesz dostosować styl komponentów natywnych za pomocą interfejsu Dart API.

Ten przewodnik pokazuje, jak za pomocą interfejsu Dart API nadać styl widokom platformy i wyrenderować reklamę.

Wymagania wstępne

  • Flutter w wersji 2.4.0 lub nowszej.

Zawsze testuj reklamy za pomocą reklam testowych

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie reklam produkcyjnych. Najprostszym sposobem wczytania reklam testowych jest użycie dedykowanego identyfikatora testowej jednostki reklamowej na potrzeby reklam natywnych:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

Jednostki reklamowe testowe są skonfigurowane tak, aby zwracać reklamy testowe w przypadku każdego żądania. Możesz ich używać w swoich aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj tylko, aby przed opublikowaniem aplikacji zastąpić je własnymi identyfikatorami jednostek reklamowych.

Wczytaj reklamę

W tym przykładzie wczytujemy reklamę natywną za pomocą szablonu natywnego o rozmiarze medium:

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

Dostępne opcje stylizacji znajdziesz w sekcjach NativeTemplateStyle i NativeTemplateTextStyle.

Dostosowywanie reklamy

Podczas dostosowywania reklamy natywnej za pomocą szablonów natywnych konfiguracja interfejsu użytkownika reklamy będzie przechowywana w klasie NativeTemplateStyle, co umożliwi Ci nadawanie stylu całej reklamie natywnej w kodzie Darta.

Rozmiary szablonów

Istnieją 2 rodzaje szablonów reklam natywnych Flutter: TemplateType.small i TemplateType.medium. Szablon mały jest idealny do TableView lub GridView, reklam In-Feed lub wszędzie tam, gdzie potrzebny jest cienki prostokątny widok reklamy. Szablon średni ma wyświetlać od połowy do 3/4 strony, co jest idealne w przypadku stron docelowych lub stron ładowania.

Mały

Android
iOS
Średni

Android
iOS

Zdarzenia reklam natywnych

Aby otrzymywać powiadomienia o zdarzeniach związanych z interakcjami z reklamą natywną, użyj właściwości listener reklamy. Następnie zaimplementuj NativeAdListener, aby otrzymywać wywołania zwrotne zdarzeń reklamy.

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

Reklama displayowa

Aby wyświetlić NativeAd jako widżet, musisz utworzyć instancję AdWidgetz obsługiwaną reklamą po wywołaniu funkcji load(). Możesz utworzyć widget przed wywołaniem funkcji load(), ale musisz wywołać funkcję load() przed dodaniem widgetu do drzewa widgetów.

AdWidget dziedziczy po klasie Widget w Flutterze i może być używany jak każdy inny widget. Na iOS upewnij się, że widżet znajduje się w kontenerze o określonej szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlać.

// 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!),
);

Usuwanie reklamy

NativeAdnależy wyrzucić, gdy dostęp do niego nie jest już potrzebny. Sprawdzoną metodą wywołania funkcji dispose() jest wywołanie jej po usunięciu elementu AdWidget powiązanego z reklamą natywną z drzewa widżetów i w funkcji wywołania zwrotnego AdListener.onAdFailedToLoad().

Dalsze kroki

Pełny przykład w GitHub

Szablony natywne