How to add Native Ads, Interstitial Ads and Rewarded Ads in Flutter - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
In our previous article we have discussed regarding how we can integrate Banner Ads and Splash Ads.
We have also discussed on how you can integrate Ads kit sdk into flutter project. If you have missed the project then i would recommend you to give it a read. Here is the link.
In this article we will be discussing about how we can integrate Interstitial Ads, Reward Ads and Native Ads
Plugin for Ads Kit: https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Library/flutter-sdk-download-0000001050196675
Application: In case you want to try the demo yourself please download Calculate BMI app form AppGallery. This application helps you calculate your Body Mass Index and shows you Banner and Interstitial Ads at the same time.
Below is the demo
Interstitial Ads:
These are full Screen Ads. In these ads the control to close the ads is given to customer.
The ideal place to add these kind of ads is transition between activities or if there is a level up then you can insert these ads.
These ads can be configured to redirect to a particular URL as well.
Let us see how to add these ads in flutter.
Code:
import 'package:flutter/material.dart';
import 'package:huawei_ads/adslite/interstitial/interstitial_ad.dart';
class InterstitialAds extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topCenter,
child: RaisedButton(
child: Text(
'Load Interstitial Ads',
),
onPressed: () {
InterstitialAd _interstitialAd = createInterstitialAd();
_interstitialAd
..loadAd()
..show();
},
),
);
}
}
InterstitialAd createInterstitialAd() {
return InterstitialAd(
adUnitId: "teste9ih9j0rc3",
);
}
Below is the result you will get after running it.
Rewarded Ads:
These are also full screen ads but they provide some kind of reward to customer if he watches full add.
Example – User can get extra life in a game if he watches full video.
These are explicitly chosen by customer but user have full control to close the ads. User can anytime close these ads but in that case he won’t get any reward.
These ads are always singleton ads hence we need to check whether the ad is showing or not.
Code:
import 'package:flutter/material.dart';
import 'package:huawei_ads/hms_ads_lib.dart';
import 'package:huawei_ads/adslite/ad_param.dart';
import 'package:huawei_ads/adslite/reward/reward_verify_config.dart';
import 'package:flutter/cupertino.dart';
import 'package:huawei_ads/hms_ads.dart';
typedef void RewardAdListener(RewardAdEvent event,
{Reward reward, int errorCode});
class RewardedAds extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topCenter,
child: RaisedButton(
child: Text(
'Load Rewarded Ads',
),
onPressed: () {
RewardAd.instance
.loadAd(adUnitId: "testx9dtjwj8hp", adParam: AdParam.build());
RewardAd.instance.isLoaded().then((isLoaded) {
if (isLoaded) {
RewardAd.instance.show();
}
});
RewardAd.instance.setRewardAdListener =
(RewardAdEvent event, {Reward reward, int errorCode}) {
print("RewardedVideoAd event $event");
if (event == RewardAdEvent.rewarded) {
print('Received reward : ');
}
};
},
),
);
}
}
As you can see in above code we are checking whether Rewarded as is loaded or not by isLoading() method.
If it is not loaded we will show it. Also we have applied listener to it so we can listen to user events.
Below are example of some events:
Opened - RewardAdEvent.opened
Started - RewardAdEvent.started
Completed - RewardAdEvent.completed
Closed - RewardAdEvent.closed
While adding reward ads make sure validation is done at client side so there is no delay in providing reward to user.
Below is the result you will get after running it.
Native Ads:
These ads fit into the surrounding into which they are added.
Here Native ads acts like a widget which you can add into a child, loading and displaying the ads is handled by plugin itself. Images and videos both are supported here. We also need to use a controller in order to set properties of native ads.
We can also add listener in order to see the user interaction with the ads.
Below is the code to add native add.
Code:
import 'package:flutter/material.dart';
import 'package:huawei_ads/adslite/nativead/native_ad.dart';
import 'package:huawei_ads/adslite/nativead/native_ad_configuration.dart';
import 'package:huawei_ads/adslite/nativead/native_ad_controller.dart';
import 'package:huawei_ads/adslite/nativead/native_styles.dart';
import 'package:huawei_ads/utils/constants.dart';
class NativeAds extends StatelessWidget {
@override
Widget build(BuildContext context) {
NativeStyles stylesSmall = NativeStyles();
stylesSmall.setCallToAction(fontSize: 8);
stylesSmall.setFlag(fontSize: 10);
stylesSmall.setSource(fontSize: 11);
NativeAdConfiguration configuration = NativeAdConfiguration.build();
configuration.setChoicesPosition = NativeAdChoicesPosition.bottomRight;
return Align(
alignment: Alignment.topCenter,
child: Column(
children: <Widget>[
Container(
height: 100,
margin: EdgeInsets.only(bottom: 20.0),
child: NativeAd(
adUnitId: "testu7m3hc4gvm",
controller: NativeAdController(
adConfiguration: configuration,
listener: (AdEvent event, {int errorCode}) {
print("NativeAd event $event");
}),
type: NativeAdType.small,
styles: stylesSmall,
),
),
],
),
);
}
}
Below is the result you will get after running it.
Github Link:
Ads Kit: https://github.com/DTSE-India-Community/Flutter/tree/master/add_kit_flutter
BMI Calculator: https://github.com/DTSE-India-Community/Flutter/tree/master/calculate_bmi
Conclusion:
I hope with this article you will find some ease in integrating Ads kit in flutter project., In case you want to see any other kit integration or sample code then make sure to give the feedback.
Banner and Splash Ads: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201286813113710087&fid=0101187876626530001
Below is the official documentation: https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/publisher-service-0000001050196431

---

In this and your previous 'projects' you discuss ways of pushing ads.
How about not discussing ad development and instead doing something actually beneficial and useful .
If you can ?