Morioh
Login
Archie Mistry

Archie Mistry

3 years ago

The Flutter version of the pangolin SDK supports Android and iOS

Pangolin Flutter SDK

Introduction

pangle_flutter is a Flutter plugin that integrates pangolin Androidand iOSSDK. Part of the code is modified from the official demo.

Official documents (login required)

Integration steps

1. Add yaml dependency

the Dependencies :
   ## Add rely 
  pangle_flutter : Latest

2. Additional configuration for Android and iOS

README

Steps for usage

1. Initialization

Import  'Package: pangle_flutter / pangle_flutter.dart' ;
 /// If the initialization before runApp method invocation, this code is added the following
WidgetsFlutterBinding . EnsureInitialized ();
 /// Initialization, not all parameters are listed, there will be detailed instructions later 
/// [kAppId] The appID obtained after applying for pangolin advertising space
await pangle. heat (
  iOS :  IOSConfig (appId : kAppId),
  android :  AndroidConfig (appId : kAppId),
);

2. On-screen advertising

/// [kSplashId] On-screen advertising ID, corresponding to Android’s CodeId, corresponding to iOS’s slotID
await pangle. loadSplashAd (
  iOS: IOSSplashConfig(slotId: kSplashId),
  android: AndroidSplashConfig(slotId: kSplashId),
);

3. Rewarded Video Ads

/// [kRewardedVideoId] Rewarded video ad ID, corresponding to Android’s CodeId, corresponding to iOS’s slotID
pangle. loadRewardVideoAd (
   iOS: IOSRewardedVideoConfig(slotId: kRewardedVideoId),
   android: AndroidRewardedVideoConfig(slotId: kRewardedVideoId),
 );

4. Banner Ads

/// Banner is implemented by PlatformView, and the method of use is the same as Widget 
/// [kBannerId] Banner advertising ID, corresponding to CodeId of Android, corresponding to slotID of iOS
BannerView(
  iOS :  IOSBannerAdConfig (slotId : kBannerId),
  android :  AndroidBannerAdConfig (slotId : kBannerId),
),

5. Information flow advertising

  • Get information flow data
/// Information flow realization logic 
/// First make a network request and get the information flow data 
/// 
/// PangleFeedAd corresponding fields: 
/// [code] response code, 0 success, -1 failure 
/// [message] In case of error, debug information 
/// [count] Get the number of information streams, generally the same as the count passed in above, the final result is based on this count 
/// [data] (string list) The key id used to display information stream ads
 PangleFeedAd feedAd =  await pangle. loadFeedAd (
   iOS: IOSFeedAdConfig(slotId: kFeedId, count: 2),
   android: AndroidFeedAdConfig(slotId: kFeedId, count: 2),
 );
  • Download Data
/// How to use 
/// Your data model
class  Item {
   /// Add field
  final  String feedId;
}
final items = <Item>[];
final feedAdDatas = feedAd.data;
final items = Item(feedId: feedAdDatas[0]);
items.insert(Random().nextInt(items.length), item);
/// Widget使用
FeedView(
  id : item.feedId,
  onRemove: () {
    setState(() {
      items.removeAt(index);
    });
  },
)

6. Interstitial Ads

 final result =  await pangle. loadInterstitialAd (
   iOS: IOSInterstitialAdConfig(
     slotId : kInterstitialId,
     isExpress: true,

     /// The width and height are the width and height of the advertising space you applied for, please assign values ​​according to the actual situation
     imgSize :  PangleImgSize .interstitial600_400,
   ),
   android: AndroidInterstitialAdConfig(
     slotId : kInterstitialId,
     isExpress: true,
   ),
 );
print(jsonEncode(result));

Parameter Description

Initial configuration

/// Register the ad config for iOS
///
/// [appId] the unique identifier of the App
/// [logLevel] optional. default none
/// [coppa] optional. Coppa 0 adult, 1 child
/// [isPaidApp] optional. Set whether the app is a paid app, the default is a non-paid app.
IOSConfig({
  @required this.appId,
  this.logLevel,
  this.coppa,
  this.isPaidApp,
});

/// Register the ad config for Android 
/// 
/// [appId] Mandatory parameters, set the AppId of the application 
/// [debug] Open the test phase, you can troubleshoot the problem through the log, remove the call when going online, the default is false 
/// [allowShowNotify] Whether to allow sdk to display notification bar prompts 
/// [allowShowPageWhenScreenLock] Whether to support the display of advertising landing pages in the lock screen scene 
/// [supportMultiProcess] Optional parameter, set whether to support multiple processes: true support, false not stand by. The default is false is not supported 
/// [directDownloadNetworkType] Optional parameters allow direct download network state set, the default is only a WiFi 
/// [isPaidApp] Optional parameter set whether charging users: true user billing, false non- Billing users. The default is false for non-billing users. This parameter can be passed in only with the user’s consent. 
/// [useTextureView] Optional parameter to set whether to use texture to play video: true to use, false to not use. The default is false and not used (surface is used) 
///[titleBarTheme] optional parameter, set the landing page theme, the default is light
AndroidConfig({
  @required this.appId,
  this.debug,
  this.allowShowNotify,
  this.allowShowPageWhenScreenLock,
  this.supportMultiProcess,
  this.directDownloadNetworkType = AndroidDirectDownloadNetworkType.kWiFi /// 多个值，用 & 连接
  this.isPaidApp,
  this.useTextureView,
  this.titleBarTheme = AndroidTitleBarTheme.light,
});

Open screen configuration

/// The splash ad config for iOS
///
/// [slotId] The unique identifier of splash ad.
/// [tolerateTimeout] optional. Maximum allowable load timeout, default 3s, unit s.
/// [hideSkipButton] optional. Whether hide skip button, default NO. If you hide the skip button, you need to customize the countdown.
/// [isExpress] optional. experimental. 个性化模板广告.
IOSSplashConfig({
  @required this.slotId,
  this.tolerateTimeout,
  this.hideSkipButton,
  this.isExpress,
});

/// The splash ad config for Android
///
/// [slotId] The unique identifier of splash ad.
/// [tolerateTimeout] optional. Maximum allowable load timeout, default 3s, unit s.
/// [hideSkipButton] optional. Whether hide skip button, default NO. If you hide the skip button, you need to customize the countdown.
/// [isExpress] optional. experimental. 个性化模板广告.
/// [isSupportDeepLink] optional. Whether to support deeplink. default true.
AndroidSplashConfig({
  @required this.slotId,
  this.tolerateTimeout,
  this.hideSkipButton,
  this.isExpress,
  this.isSupportDeepLink,
});

Incentive video configuration

/// The rewarded video ad config for Android
///
/// [slotId] The unique identifier of rewarded video ad.
/// [userId] required.
//   Third-party game user_id identity.
//   Mainly used in the reward issuance, it is the callback pass-through parameter from server-to-server.
//   It is the unique identifier of each user.
//   In the non-server callback mode, it will also be pass-through when the video is finished playing.
//   Only the string can be passed in this case, not nil.
/// [rewardName] optional. reward name.
/// [rewardAmount] optional. number of rewards.
/// [extra] optional. serialized string.
/// [isExpress] optional. 个性化模板广告.
/// [loadingType] optional. 加载广告的类型，默认[LoadingType.normal]
IOSRewardedVideoConfig({
  @required this.slotId,
  this.userId,
  this.rewardName,
  this.rewardAmount,
  this.extra,
  this.isExpress,
  this.loadingType,
});

/// The rewarded video ad config for Android
///
/// [slotId] The unique identifier of rewarded video ad.
/// [userId] required.
//   Third-party game user_id identity.
//   Mainly used in the reward issuance, it is the callback pass-through parameter from server-to-server.
//   It is the unique identifier of each user.
//   In the non-server callback mode, it will also be pass-through when the video is finished playing.
//   Only the string can be passed in this case, not nil.
/// [rewardName] optional. reward name.
/// [rewardAmount] optional. number of rewards.
/// [extra] optional. serialized string.
/// [isVertical] optional. Whether video is vertical orientation. Vertical, if true. Otherwise, horizontal.
/// [isSupportDeepLink]optional. Whether to support deeplink. default true. 
/// [isExpress] optional. Personalized template ads.
AndroidRewardedVideoConfig({
  @required this.slotId,
  this.userId,
  this.rewardName,
  this.rewardAmount,
  this.extra,
  this.isVertical,
  this.isSupportDeepLink,
  this.isExpress,
});

Banner configuration

/// The feed ad config for iOS
///
/// [slotId] required. The unique identifier of a feed ad.
/// [imgSize] required. Image size.
/// [isExpress] optional. 个性化模板广告.
IOSBannerAdConfig({
  @required this.slotId,
  this.imgSize = PangleImgSize.banner600_150,
  this.count,
  this.isExpress,
});

/// The feed ad config for Android
///
/// [slotId] required. The unique identifier of a feed ad.
/// [imgSize] required. Image size.
/// [isSupportDeepLink] optional. Whether to support deeplink.
/// [isExpress] optional. 个性化模板广告.
AndroidBannerAdConfig({
  @required this.slotId,
  this.imgSize = PangleImgSize.banner600_150,
  this.isSupportDeepLink,
  this.isExpress,
});

Information flow configuration

/// The feed ad config for iOS
///
/// [slotId] required. The unique identifier of a feed ad.
/// [imgSize] required. Image size.
/// [tag] optional. experimental. Mark it.
/// [count] It is recommended to request no more than 3 ads. The maximum is 10\. default 3
/// [isSupportDeepLink] optional. Whether to support deeplink.
/// [isExpress] optional. 个性化模板广告.
IOSFeedAdConfig({
  @required this.slotId,
  this.imgSize = PangleImgSize.feed690_388,
  this.tag,
  this.count,
  this.isSupportDeepLink,
  this.isExpress,
});

/// The feed ad config for iOS
///
/// [slotId] required. The unique identifier of a feed ad.
/// [imgSize] required. Image size.
/// [tag] optional. experimental. Mark it.
/// [count] It is recommended to request no more than 3 ads. The maximum is 10\. default 3
/// [isSupportDeepLink] optional. Whether to support deeplink.
/// [isExpress] optional. 个性化模板广告.
AndroidFeedAdConfig({
  @required this.slotId,
  this.imgSize = PangleImgSize.feed690_388,
  this.tag,
  this.count,
  this.isSupportDeepLink,
  this.isExpress,
});

Interstitial ad

/// The interstitial ad config for iOS
///
/// [slotId] required. The unique identifier of a interstitial ad.
/// [imgSize] required. Image size.
/// [isExpress] optional. 个性化模板广告.
IOSInterstitialAdConfig({
  @required this.slotId,
  this.imgSize = PangleImgSize.interstitial600_400,
  this.isExpress,
})

/// The interstitial ad config for Android
///
/// [slotId] required. The unique identifier of a interstitial ad.
/// [imgSize] required. Image size.
/// [isExpress] optional. experimental. 个性化模板广告
/// [isSupportDeepLink] optional. Whether to support deeplink. default true.
AndroidInterstitialAdConfig({
  @required this.slotId,
  this.imgSize = PangleImgSize.interstitial600_400,
  this.isSupportDeepLink,
  this.isExpress,
})

Instructions for use

  1. The open-screen advertisement is placed before runApp to call the best experience

  2. Information flow ads were previously loaded after the PlatformView was successfully created, and changed to load when created. Then use the hashCode of the obtained FeedAd object as the key global cache, and find the corresponding advertising object through the id passed in by the FeedView in Flutter.

  3. This solves the setState((){});problem that the advertising object disappears when the item ( ) is removed .

  4. The click event of the iOS information flow advertisement needs to be passed in rootViewController, (UIApplication.shared.delegate?.window??.rootViewController)!and the problem is not found yet.

  5. Interstitial ads do not display problem

// open_ad_sdk: 
// com.bytedance.sdk.openadsdk.utils.a: 28 has life cycle monitoring, 
// under certain circumstances when FlutterActivity jumps to the interface, it will not call back onStart(), onStop() 
// if used ttAdManager.requestPermissionIfNecessary(context) will not be called. 
//The above situation causes onActivityStarted to go less once, so the show method below does not work. 
public  void onActivityStarted( Activity var1) {
   if ( this . a . incrementAndGet() >  0 ) {
     this . b . set( false );
  }

  this.b();
}
...

public void onActivityStopped(Activity var1) {
  if (this.a.decrementAndGet() == 0) {
    this.b.set(true);
  }

}

// com.bytedance.sdk.openadsdk.core.cb: 306 has a life cycle judgment, and show() cannot be executed 
if ( ! this . k . isShowing() &&  ! com . bytedance . sdk . openadsdk . core . i . c() . a()) {
   this . k . show();
}
  1. BannerView, FeedViewThrough PlatformViewrealization. On Android, PlatformViewAPI 20 is supported at least.

contribution

  • Any better way to implement or add additional features, please submit a PR.
  • If you have any usage problems, please submit an issue.

Download Details:

Author: nullptrX

Source Code: https://github.com/nullptrX/pangle_flutter

#flutter #dart #mobile-apps

The Flutter version of the pangolin SDK supports Android and iOS
3.75 GEEK