[Huawei Developers] furkansarihan:
Hello everyone, In this article, We will bring Huawei Ads to your Flutter app!

What is the Ads Kit ?

Ads kit is used to obtain revenues. HUAWEI Ads Publisher Service utilizes Huawei’s vast user base and extensive data capabilities to deliver targeted, high quality ads to users.

Huawei Mobile Services Integration

Firstly, If you haven’t integrated Huawei Mobile Services to your app yet, please do it "https://medium.com/huawei-developers/android-integrating-your-apps-with-huawei-hms-core-1f1e2a090e98" here. After integration, you are ready to write some Dart code!

Flutter Integration

Get the latest version number from "https://pub.dev/packages/huawei_ads" official pub.dev package and add dependency to your pubspec.yaml;

dependencies:
huawei_ads: # Latest Version Number

Or download the package from "https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Library-V1/flutter-sdk-download-0000001050196675-V1" Huawei Developer Website, extract the archive and add dependency as path;

dependencies:
huawei_ads:
path: # The path that you extracted archive to
huawei_ads:path: # The path that you extracted archive to

Usage

There are number of display options for Huawei Ads;

Banner Ads : Banner ads are rectangular images that occupy a spot at the top, middle, or bottom within an app’s layout. Banner ads refresh automatically at intervals. When a user taps a banner ad, the user is redirected to the advertiser’s page in most cases. "https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Guides/banner-ads-0000001050436805-V1" for details

Interstitial ads : Interstitial ads are full-screen ads that cover the interface of an app. Such ads are displayed when a user starts, pauses, or exits an app, without disrupting the user’s experience. "https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Guides/interstitial-ads-0000001050196804-V1" for details

Rewarded Ads : Rewarded ads are full-screen video ads that users opt to view in exchange for in-app rewards. "https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Guides/rewarded-ads-0000001050315988-V1" for details

Splash ads : Splash ads are displayed immediately after an app is launched, even before the home screen of the app is displayed. "https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Guides/splash-ads-0000001050439035-V1" for details

Native Ads : Native ads are typical ad materials that are displayed on the customized interface of an app so that they can fit seamlessly into the surrounding content in the app. "https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Guides/native-ads-0000001050198817-V1" for details

Banner Ads

Banner Ad’s lifecycle can be managed from BannerAd object. Create it with your Ad Slot ID.

BannerAd bannerAd = BannerAd(
adSlotId: "testw6vs28auh3", // This is test slot id for banner ad
size: BannerAdSize.s320x50, // Banner size
adParam: AdParam(), // Special request options
bannerRefreshTime: 60, // Refresh time in seconds
listener: (AdEvent event, {int errorCode}) { // Event listener
print("Banner Ad event : $event");
},
);

Call loadAd() and show() functions sequentially to display the Banner Ad.

bannerAd.loadAd(); // Loading ad
bannerAd.show(); // Showing ad at the bottom of the page

r/HMSCore - How to use Huawei Ads Kit with Flutter

Banner Ad Page from Example Project

And finally don’t forget to destroy banner view at the desired point.

bannerAd.destroy(); // Destroying ad view

Interstitial Ads

You can display an Interstitial Ad with InterstitialAd object. Functions are same as Banner’s. Just call loadAd() and show() sequentially.

InterstitialAd interstitialAd = InterstitialAd(
adSlotId: "teste9ih9j0rc3", // This is test slot id for interstitial ad
adParam: AdParam(), // Special request options
listener: (AdEvent event, {int errorCode}) { // Event listener
print("Interstitial Ad event : $event");
},
);

interstitialAd.loadAd(); // Loading ad
interstitialAd.show(); // Showing ad full screen

... interstitialAd.destroy(); // Destroying full screen activity programatically

r/HMSCore - How to use Huawei Ads Kit with Flutter

Interstitial Ad Example

Reward Ads

Reward Ad flow can be started with a RewardAd object.

As you can see; if a user completes the reward process, you can use Reward object in listener callback.

RewardAd rewardAd = RewardAd(
listener: (RewardAdEvent event, {Reward reward, int errorCode}) { // Event listener for reward ad
print("RewardAd event : $event");
if (event == RewardAdEvent.rewarded) {
print('Received reward : ${jsonEncode(reward.toJson())}');
}
}
);

rewardAd.loadAd( // Loading ad
adSlotId: "testx9dtjwj8hp", // This is test slot id for reward ad
adParam: AdParam(), // Special request options
);
rewardAd.show(); // Showing ad full screen

... rewardAd.destroy(); // Destroying full screen activity programatically

r/HMSCore - How to use Huawei Ads Kit with Flutter

Collecting Reward Ad Events, Example Project

Splash Ads

With Splash Ad you can show non-skippable, highly customizable full screen ad from anywhere of your app.

SplashAd splashAd = SplashAd(
adType: SplashAdType.above, // Splash ad type
loadListener: (SplashAdLoadEvent event, {int errorCode}) { // loading events listened here
print("Splash Ad Load event : $event");
... // Handle how your app behave when splash ad started and ended
},
displayListener: (SplashAdDisplayEvent event) { // display events listened here
print("Splash Ad Display Event : $event");
},
);

splashAd.loadAd( // Loads and shows the splash ad
adSlotId: "testq6zq98hecj", // This is test slot id for splash ad
orientation: SplashAdOrientation.portrait, // Orientation
adParam: AdParam(), // Special request options
);

... splashAd.destroy(); // Destroying full screen activity programatically

Native Ads

Native Ads can be placed anywhere in your app as widget. Events can be listened with NativeAdController object and the widget can be customized with type and styles parameters.

NativeAd(
adSlotId: "testb65czjivt9", // small native template test id
controller: NativeAdController(), // native ad configuration and parameters
type: NativeAdType.small, // native ad type
styles: NativeStyles(), // native ad style
)

r/HMSCore - How to use Huawei Ads Kit with Flutter

Native Ads in list, Example Project

Huawei Ads Publisher Service

In this article we used test identifiers for ads. But; You need a Huawei Developer Account with Merchant Service enabled, for getting real Ad Slot ID. With these Ad Slot ID’s, Huawei can serve ads through your view and collect your revenue.

Further information, please take a look at these official docs;

"https://developer.huawei.com/consumer/en/doc/distribution/monetize/0603" App Integration Process

"https://developer.huawei.com/consumer/en/doc/distribution/monetize/Monetizeaddappandunit" Add App and Unit

Conclusion

Congratulations! It is really easy to display Huawei Ads in a Flutter app. If you run into a problem, write a comment. I would love to help!

Reference

"https://github.com/HMS-Core/hms-flutter-plugin/tree/master/flutter-hms-ads" Example Project - GitHub

"https://developer.huawei.com/consumer/en/hms/huawei-adskit/" Huawei Ads Kit