Native ads

1. Native Ad

Importing the Native Ad SDK:

swift Copy

import 'package:anythink_sdk/at_index.dart';

Note for Android: When using native video ads, hardware acceleration must be enabled in AndroidManifest. The handling method is as follows:

Copy

<application
        android:hardwareAccelerated="true">
        ....
</application>

1.1 Load Native Ad

When loading a native ad, you need to pass in the width and height for ad display

swift Copy

 _loadnativeAd() async {
        ATNativeManager.loadNativeAd(placementID: 'you placementId',
        extraMap: {
          ATCommon.isNativeShow(): false, // Whether to use platformView
          ATCommon.getAdSizeKey(): ATNativeManager.createNativeSubViewAttribute(
            300,
            250,
          ),// Specify width and height for the request, recommended to pass in values
          ATNativeManager.isAdaptiveHeight(): false // Whether to enable adaptive height, supported by some platforms. For template ads on Pangle, Kuaishou, and Jingdong, it is recommended to set to true
        });
  }

1.2 Check if There Is a Cached Ad and Get Ad Status

Use the following code to check if there is a cached ad:

swift Copy

 _hasNativeAdReady() async {
    await ATNativeManager
        .nativeAdReady(
      placementID: 'b5bacad80a0fb1',
    ).then((value) {
      print('flutter Native ad video cache $value');
    });
  }

Use the following code to get the ad status (return value type is Map). The key-value pairs are as follows:

isLoading: Whether it is loading
isReady: Whether there is a cached ad
adInfo: The highest-priority cached ad info

swift Copy

  _checkNativeAdStatus() async {
    await ATNativeManager
        .checkNativeAdLoadStatus(
      placementID: 'b5bacad80a0fb1',
    ).then((value) {
      print('flutter Native ad video status $value');
    });
  }

Get information about all available ads under the current ad placement

swift Copy

getNativeValidAds() async {
    await ATNativeManager
        .getNativeValidAds(
      placementID: Configuration.nativePlacementID,
    ).then((value) {
      print('flutter Native ad video status $value');
    });
  }

1.3 Enter Scenario

swift Copy

entryNativeScenario() async {
        ATNativeManager.entryNativeScenario(
        placementID:  'you placementId',
        sceneID: 'you sceneID',
        );
  }

1.4 Display Native Ad

The native ad implementation method is platformView, so you only need to initialize the PlatformNativeWidget component after the ad loads successfully.

1.4.1 PlatformNativeWidget Property Description:

placementID: Ad ID

extraMap: Coordinates and sizes of native ad internal child views

sceneID: Scenario ID (optional parameter)

You can use the following code to display a native ad:

swift Copy

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("native text"),
      ),
      body: SafeArea(
          child: Container(
            height: topSizeTool.getHeight(),
            color: Colors.black,
            child: PlatformNativeWidget(
              Configuration.nativePlacementID,
                {
                    ATNativeManager.parent(): ATNativeManager.createNativeSubViewAttribute(
                      topSizeTool.getWidth(), 340,
                      backgroundColorStr: '#FFFFFF'
                    ),
                    ATNativeManager.appIcon(): ATNativeManager.createNativeSubViewAttribute(
                        50, 50,
                        x: 10, y: 40, backgroundColorStr: 'clearColor'),
                    ATNativeManager.mainTitle(): ATNativeManager.createNativeSubViewAttribute(
                      topSizeTool.getWidth() - 190,
                      20,
                      x: 70,
                      y: 40,
                      textSize: 15,
                    ),
                    ATNativeManager.desc(): ATNativeManager.createNativeSubViewAttribute(
                        topSizeTool.getWidth() - 190, 20,
                        x: 70, y:70, textSize: 15),
                    ATNativeManager.cta(): ATNativeManager.createNativeSubViewAttribute(
                      100,
                      50,
                      x: topSizeTool.getWidth() - 110,
                      y: 40,
                      textSize: 15,
                      textColorStr: "#FFFFFF",
                      backgroundColorStr: "#2095F1"
                    ),
                    ATNativeManager.mainImage(): ATNativeManager.createNativeSubViewAttribute(
                        topSizeTool.getWidth() - 20, topSizeTool.getWidth() * 0.6,
                        x: 10, y: 100, backgroundColorStr: '#00000000'),
                    ATNativeManager.adLogo(): ATNativeManager.createNativeSubViewAttribute(
                        20, 10,
                        x: 10,
                        y: 10,
                        backgroundColorStr: '#00000000'),
                    ATNativeManager.dislike(): ATNativeManager.createNativeSubViewAttribute(
                      20,
                      20,
                      x: topSizeTool.getWidth() - 30,
                      y: 10,
                    ),
                    ATNativeManager.elementsView(): ATNativeManager.createNativeSubViewAttribute(
                      topSizeTool.getWidth(),
                      25,
                      x: 0,
                      y: 315,
                      textSize: 12,
                      textColorStr: "#FFFFFF",
                      backgroundColorStr: "#7F000000"
                    ),
              }
            ),
          )
      ),
    );
  }

1.4.2 ATNativeManager.createNativeSubViewAttribute

1.4.2.1 Map Key Descriptions:

parent: Controls the overall size of the Native ad, as shown in the red-circled area below:

appIcon: The appIcon property controls the ad's icon property, as shown in Figure 1 below:

mainImage: mainImage controls the ad's cover image, as shown in Figure 2 below:

title: title controls the ad title, as shown in Figure 3 below:

desc: desc controls the ad description text, as shown in Figure 4 below

adLogo: adLogo controls the ad logo property, as shown in Figure 5 below. Note: Some platforms have a fixed ad logo position internally and do not support developer-specified positioning, such as Admob.

cta: cta controls the click button, as shown in Figure 6 below

dislike: Close button

elementsView: (Added in v6.2.37) APK six elements (only effective for Android China-region SDK)

customView: (Added in v6.2.37) Custom view, see ATCustomViewNative description belowNative self-rendering feed material example illustration:

swift Copy

Map createNativeSubViewAttribute(
      double width,
      double height,
    { double x = 0,
      double y = 0,
      String backgroundColorStr = '#FFFFFF',
      String textColorStr = '#000000',
      String textAlignmentStr = 'left',
      double textSize = 15,
      bool isCustomClick =  true}
 )

Function description:

x: Horizontal coordinate position (origin at top-left corner)
y: Vertical coordinate position (origin at top-left corner)
width: Width
height: Height
backgroundColor: Background color
textColor: Font color (only effective for Views with Text)
textSize: Font size (only effective for Views with Text)
textAlignment: Text alignment (only effective for Views with Text and only for iOS). left: left-aligned, center: center-aligned, right: right-aligned
isCustomClick: Whether to download directly on click (only effective for Android and only for Tencent Ads platform app-install ads)
ATCustomViewNative: (Added in v6.2.37) Enumeration type for custom views (image: picture; label: text;)
imagePath: (Added in v6.2.37) The path where the image is placed in the development project (effective when ATCustomViewNative is specified as image)
title: (Added in v6.2.37) The custom text string to display (effective when ATCustomViewNative is specified as label)

1.4.2.2 Color and Height Description

About setting transparent colors:

Android: You can directly add a two-digit hexadecimal alpha value to the original setting. For example, to set the color "#ffffff" with 0 opacity, set it to "#00ffffff". This makes the color fully transparent. The alpha value can be adjusted according to actual needs.

iOS: You can only specify a fully transparent color by setting the string "clearColor". Semi-transparent colors are not supported.

Adaptive height for template rendering ads:

Developers can implement adaptive height through the following steps (adaptive height during loading is only for Pangle and GDT platforms on Android)

Note:

When using adaptive height, taller template ads may appear. Developers can check the desired aspect ratio templates in the ad platform dashboard based on actual needs and remove templates that do not meet expectations.
Adaptive height is not controlled by the height of parent.
(This point is only for Android) Enable adaptive height during loading (Key must be passed: ATNativeManager.isAdaptiveHeight())

swift Copy

loadNativeWith() async {
        ATNativeManager.loadNativeAd(
        placementID: Configuration.nativePlacementID,
        extraMap: {
          ATCommon.getAdSizeKey(): ATNativeManager.createNativeSubViewAttribute(
            topSizeTool.getWidth(),
            topSizeTool.getHeight(),
          ),
          ATNativeManager.isAdaptiveHeight(): true
        });
  }

Enable adaptive height during display (isAdaptiveHeight must be passed as true)

swift Copy

PlatformNativeWidget(Configuration.nativePlacementID, {...}
    ,isAdaptiveHeight: true);

1.5 Implement Native Ad Listeners

ATNativeResponse property description:

NativeStatus: Native ad status

placementID: placementID

requestMessage: Request info (error message)

extraMap: Callback Info

isDeeplinkSuccess: isDeeplinkSuccess

To get notified about various native ad events (load success/failure, impression, click, etc.), below is an example

swift Copy

_nativeListen() {

    ATListenerManager.nativeEventHandler.listen((value) {

      switch (value.nativeStatus) {
        // Ad load failed
        case NativeStatus.nativeAdFailToLoadAD:
          print("flutter nativeAdFailToLoadAD ---- placementID: ${value.placementID} ---- errStr:${value.requestMessage}");
          break;
        // Ad loaded successfully  
        case NativeStatus.nativeAdDidFinishLoading:
          print("flutter nativeAdDidFinishLoading ---- placementID: ${value.placementID}");
          break;
        // Ad clicked  
        case NativeStatus.nativeAdDidClick:
          print("flutter nativeAdDidClick ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Deeplink  
        case NativeStatus.nativeAdDidDeepLink:
          print("flutter nativeAdDidDeepLink ---- placementID: ${value.placementID} ---- extra:${value.extraMap} ---- isDeeplinkSuccess:${value.isDeeplinkSuccess}");
          break;
        // Ad video playback ended, some ad platforms have this callback  
        case NativeStatus.nativeAdDidEndPlayingVideo:
          print("flutter nativeAdDidEndPlayingVideo ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Ad entered full-screen playback, only iOS has this callback  
        case NativeStatus.nativeAdEnterFullScreenVideo:
          print("flutter nativeAdEnterFullScreenVideo ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Ad exited full-screen playback, only iOS has this callback   
        case NativeStatus.nativeAdExitFullScreenVideoInAd:
          print("flutter nativeAdExitFullScreenVideoInAd ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Ad displayed successfully  
        case NativeStatus.nativeAdDidShowNativeAd:
          print("flutter nativeAdDidShowNativeAd ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Ad video playback started, some ad platforms have this callback  
        case NativeStatus.nativeAdDidStartPlayingVideo:
          print("flutter nativeAdDidStartPlayingVideo ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Ad close button tapped, some ad platforms have this callback  
        case NativeStatus.nativeAdDidTapCloseButton:
          print("flutter nativeAdDidTapCloseButton ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        case NativeStatus.nativeAdDidCloseDetailInAdView:
          print("flutter nativeAdDidCloseDetailInAdView ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Ad Draw loaded successfully, only iOS has this callback  
        case NativeStatus.nativeAdDidLoadSuccessDraw:
          print("flutter nativeAdDidLoadSuccessDraw ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        case NativeStatus.nativeAdUnknown:
          print("flutter downloadUnknown");
          break;
      }
    });
}

Banner ads

Policy compliance

Last modified: 2026-07-01Powered by

Outline