How to use Huawei Ads Kit with Flutter

Furkan Sarıhan
Huawei Developers
Published in
4 min readNov 11, 2020

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 here.

After integration, you are ready to write some Dart code!

Flutter Integration

Get the latest version number from official pub.dev package and add dependency to your pubspec.yaml;

Or download the package from Huawei Developer Website, extract the archive and add dependency as path;

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. 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. for details
  • Rewarded Ads : Rewarded ads are full-screen video ads that users opt to view in exchange for in-app rewards. for details
  • Splash ads : Splash ads are displayed immediately after an app is launched, even before the home screen of the app is displayed. 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. for details

Banner Ads

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

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

Banner Ad Page from Example Project

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

Interstitial Ads

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

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.

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.

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.

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;

--

--