Menu

native ads

1 Native advertising

Import of native advertising SDK: 

import 'package:anythink_sdk/at_index.dart';

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

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

1.1 Load native ads

When loading native ads, you need to pass in the width and height of the ad display

  _loadnativeAd() async {
    await ATNativeManager.loadNativeAd(placementID: 'you placementId',
        extraMap: {
          ATNativeManager.parent():
          ATNativeManager.createNativeSubViewAttribute(
            topSizeTool.getWidth(),
            topSizeTool.getHeight(),
          ),
        });
  }

1.2 Determine whether there is advertising cache and obtain advertising status

Use the following code to determine whether there is ad cache:

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

Information about all ads available in the current ad slot

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

1.3 Display native ads

The implementation method of native ads is platformView, so you only need to initialize the PlatformNativeWidget component after the ads are loaded successfully to us.

Note: It is recommended to do a good job of Native view state control to avoid the blank situation that Native ads appear when Flutter refreshes the interface frequently.

1.3.1 PlatformNativeWidget attribute description:

placementID: Advertising ID

extraMap: The coordinates and size of the sub-control inside the native ad

sceneID: scene ID (optional parameter)

You can display native ads using the following code:

  @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.3.2 ATNativeManager.createNativeSubViewAttribute

1.3.2.1 Key explanation in Map:

parent: Controls the overall size of Native, as shown in the red circle area below:

appIcon: The appIcon attribute controls the icon attribute of the advertisement, as shown in Figure 1 below:

mainImage: mainImage controls the advertisement The cover image, as shown in Figure 2 below:

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

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

adLogo: adLogo controls the advertising logo attributes, as shown in Figure 5 below. Note: The advertising logo position of some platforms is internally fixed and does not support developer specification, such as Admob.

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

dislike: close button

elementsView: (new in v6.2.37) apk six elements (only valid for Android China SDK)

customView: (new in v6.2.37 ) Customize the control, refer to the ATCustomViewNative description belowNative

self-rendering information flow material example diagram illustration:

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:

  1. x: Abscissa position (with the upper left corner as the origin)
  2. y: vertical coordinate position (with the upper left corner as the origin)
  3. width: width
  4. height: height
  5. backgroundColor: View background color
  6. textColor: Font color (valid only for views with Text)
  7. textSize: Font size (valid only for views with Text)
  8. textAlignment: Font alignment (valid only for views with Text and iOS only), left: left, center: center, right: right
  9. isCustomClick: Whether to download directly when clicked (only valid for Android and only valid for app ads on Tencent advertising platform)
  10. ATCustomViewNative: (new in v6.2.37) The enumeration type of the custom control (image: picture; label: text;)
  11. imagePath: (new in v6.2.37) The path to place images in the development project (valid when ATCustomViewNative is specified as image)
  12. title: (new in v6.2.37) Custom text string to display (valid when ATCustomViewNative is specified as label)
1.3.2.2 Color and height description

Regarding color transparency Settings:

Android: You can directly increase the two-digit hexadecimal value of alpha in the original setting, for example, set the transparency of the color value "#ffffff" to 0, then set it to "#00ffffff", so that the color is completely transparent, and the transparent value can be adjusted according to the actual situation.

iOS: Fully transparent colors can only be specified through the setting string: "clearColor", and translucent Settings for colors are not supported.

Template render AD adaptive height:

Developers can achieve adaptive height through the following steps (adaptive height when loading is only for Android TT(CSJ), GDT platform)

Note:

    • When the adaptive height is used, relatively high template ads may appear. Developers can check the required width ratio template in the background of the advertising platform according to the actual demand, and remove the template that does not meet the expectations.
    • Adaptive height is not controlled by the parent's height.
    • (this point only for Android) loads on adaptive height (need to Key: ATNativeManager isAdaptiveHeight ()).
loadNativeWith() async {
    await ATNativeManager.loadNativeAd(
        placementID: Configuration.nativePlacementID,
        extraMap: {
          ATCommon.getAdSizeKey(): ATNativeManager.createNativeSubViewAttribute(
            topSizeTool.getWidth(),
            topSizeTool.getHeight(),
          ),
          ATNativeManager.isAdaptiveHeight(): true
        });
  }
    • Turn on adaptive height for display (pass isAdaptiveHeight to true)
PlatformNativeWidget(Configuration.nativePlacementID, {...}
    ,isAdaptiveHeight: true);

1.4 Implement Listener for native ads

ATNativeResponse attribute Description:

NativeStatus: Native AD state

placementID: placementID

requestMessage: Request message (error message)

extraMap: Callback information

isDeeplinkSuccess: isDeeplinkSuccess

To get notifications about various native advertising events (load success/failure, display and click, etc.), here is an example

_nativeListen() {

    ATListenerManager.nativeEventHandler.listen((value) {

      switch (value.nativeStatus) {
        // ad load fail
        case NativeStatus.nativeAdFailToLoadAD:
          print("flutter nativeAdFailToLoadAD ---- placementID: ${value.placementID} ---- errStr:${value.requestMessage}");
          break;
        // ad load finish
        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 end play, some advertising platforms have this callback
        case NativeStatus.nativeAdDidEndPlayingVideo:
          print("flutter nativeAdDidEndPlayingVideo ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // The AD plays in full screen, only iOS has this callback
        case NativeStatus.nativeAdEnterFullScreenVideo:
          print("flutter nativeAdEnterFullScreenVideo ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // When the AD leaves full screen play, only iOS has this callback
        case NativeStatus.nativeAdExitFullScreenVideoInAd:
          print("flutter nativeAdExitFullScreenVideoInAd ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // ad show succeed
        case NativeStatus.nativeAdDidShowNativeAd:
          print("flutter nativeAdDidShowNativeAd ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // AD video starts playing, some AD platforms have this callback  
        case NativeStatus.nativeAdDidStartPlayingVideo:
          print("flutter nativeAdDidStartPlayingVideo ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // The AD close button was clicked and 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 loading Draw successful, only iOS  
        case NativeStatus.nativeAdDidLoadSuccessDraw:
          print("flutter nativeAdDidLoadSuccessDraw ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        case NativeStatus.nativeAdUnknown:
          print("flutter downloadUnknown");
          break;
      }
    });
}


Previous
banner ads
Next
Callback information
Last modified: 2025-05-30Powered by