Native ads

1. Native Ad

Import Native Ad SDK:

java Copy

import 'package:secmtp_sdk/at_index.dart';

java Copy

import 'package:thinkup_sdk/at_index.dart';

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

java Copy

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

1.1 Load Native Ad

You need to pass in the width and height of the ad display when loading the native ad

java Copy

 _loadnativeAd() async {
    await ATNativeManager.loadNativeAd(placementID: 'your placementId',
        extraMap: {
          ATCommon.isNativeShow(): false, //Whether to use PlatformView
          ATCommon.getAdSizeKey(): ATNativeManager.createNativeSubViewAttribute(
            300,
            250,
          ),//Set the width and height of the loaded ad
          ATNativeManager.isAdaptiveHeight(): false  //Whether to enable adaptive height, supported by some ad platforms such as Pangle, Kuaishou, Jingmei
        });
  }

1.2 Check for Ad Cache and Get Ad Status

Use the following code to check if there is ad cache:

java Copy

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

1.3 Enter Scene

java Copy

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

1.4 Show Native Ad

Native ads are implemented via PlatformView, so you only need to initialize the PlatformNativeWidget component after the ad is loaded successfully to use it

1.4.1 Description of PlatformNativeWidget Properties:

placementID: Ad ID

extraMap: Coordinates and sizes of sub-controls inside the native ad

sceneID: Scene ID (optional parameter)

You can display the native ad with the following code:

java 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 Explanation of Keys in the Map:

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

appIcon: The appIcon attribute controls the ad icon properties, as shown in Figure 1 below:

mainImage: mainImage controls the ad 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 properties, as shown in Figure 5 below. Note: The position of the ad logo on some platforms is fixed internally 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: (Added in v6.2.37) APK six elements (only valid for Android China region SDK)

customView: (Added in v6.2.37) Custom control, refer to ATCustomViewNative description below

Diagram of Native Self-rendered Feed Ad Material Example:

java 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:

1.x: Horizontal coordinate 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: Background color

6.textColor: Font color (only valid for Views with Text)

7.textSize: Font size (only valid for Views with Text)

8.textAlignment: Font alignment (only valid for Views with Text and only for iOS), left: left alignment, center: center alignment, right: right alignment

9.isCustomClick: Whether to download directly when clicked (only valid for Android and only for application ads on Tencent Ad Platform)

10.ATCustomViewNative: (Added in v6.2.37) Enumeration type of custom controls**(image: picture; label: text;)**

11.imagePath: (Added in v6.2.37) The placement path of the picture in the development project (valid when ATCustomViewNative is specified asimage)

12.title: (Added in v6.2.37) Custom text string to be displayed (valid when ATCustomViewNative is specified aslabel)

1.4.2.2 Explanation of Color and Height

About setting color transparency:

Android: You can directly add two hexadecimal digits of alpha to the original setting. For example, to set the transparency of the color value "#ffffff" to 0, set it to "#00ffffff", so the color is completely transparent. The transparency value can be adjusted according to actual conditions.

iOS: Only the string: "clearColor" can be used to specify a completely transparent color; semi-transparent color settings are not supported.

Template-rendered ad adaptive height:

Developers can achieve adaptive height through the following steps (adaptive height during loading is only forPangle and Tencent Ad Platform on Android)

Notes:

When using adaptive height, relatively tall template ads may appear. Developers can check the required aspect ratio templates in the ad platform backend according to actual needs and remove templates that do not meet expectations.
Adaptive height is not controlled by the height of the parent
(This point is only for Android) Enable adaptive height during loading (need to pass Key: ATNativeManager.isAdaptiveHeight())

java Copy

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

Enable adaptive height during display (need to pass isAdaptiveHeight as true)

java Copy

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

1.5 Implement Native Ad Listener

Introduction to ATNativeResponse Properties:

NativeStatus: Native ad status

placementID: Ad placement ID

requestMessage: Request information (error information)

extraMap: Callback Information

isDeeplinkSuccess: Whether DeepLink is successful

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

java Copy

_nativeListen() {

    ATListenerManager.nativeEventHandler.listen((value) {

      switch (value.nativeStatus) {
        // Ad loading failed
        case NativeStatus.nativeAdFailToLoadAD:
          print("flutter nativeAdFailToLoadAD ---- placementID: ${value.placementID} ---- errStr:${value.requestMessage}");
          break;
        // Ad loading succeeded  
        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 triggered
        case NativeStatus.nativeAdDidDeepLink:
          print("flutter nativeAdDidDeepLink ---- placementID: ${value.placementID} ---- extra:${value.extraMap} ---- isDeeplinkSuccess:${value.isDeeplinkSuccess}");
          break;
        // Ad video finished playing (this callback is available for some ad platforms)  
        case NativeStatus.nativeAdDidEndPlayingVideo:
          print("flutter nativeAdDidEndPlayingVideo ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Ad entered full-screen playback (only available for iOS)  
        case NativeStatus.nativeAdEnterFullScreenVideo:
          print("flutter nativeAdEnterFullScreenVideo ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Ad exited full-screen playback (only available for iOS)   
        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 started playing (this callback is available for some ad platforms)  
        case NativeStatus.nativeAdDidStartPlayingVideo:
          print("flutter nativeAdDidStartPlayingVideo ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        // Ad close button clicked (this callback is available for some ad platforms)  
        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 available for iOS)  
        case NativeStatus.nativeAdDidLoadSuccessDraw:
          print("flutter nativeAdDidLoadSuccessDraw ---- placementID: ${value.placementID} ---- extra:${value.extraMap}");
          break;
        case NativeStatus.nativeAdUnknown:
          print("flutter downloadUnknown");
          break;
      }
    });
}

Banner ads

Privacy Compliance Guide

Last modified: 2026-01-07Powered by

Outline