Integrate Ads kit in Flutter Application - Huawei Developers

More articles like this, you can visit HUAWEI Developer Forum
In this article we will be working on HMS Ads kit and integrate into a flutter application.
In first part we will work on the setup part and in second part we will work on implementing the ads in application.
Step 1: Create a project in AGC console
Step 2: You have to install flutter and dart plugin to android studio. Go to File -> Settings -> Plugins
{
"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"
}
Once both are installed it will show you an option to create a new project in flutter.
To confirm run the below command in terminal “flutter doctor”
If you are still facing any issue in setup please comment below and I will make sure to resolve them.
Step 3: Download the folder and add in in your workspace where your flutter project resides.
https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Library-V1/flutter-sdk-download-0000001050196675-V1
Step 4: Open pubspec.yaml file and add the below code.
Code:
huawei_ads:
path: ../huawei_ads/
..means to go 2 step backwards in folder and Huawei_ads is the folder name which you downloaded in previous step.
Once you change the pubspec.yaml file it will ask you to get the dependencies.
Click on pub get button highlighted above and you can get the latest dependencies.
Below message should be shown if the step goes successful.
To confirm the above step is successful you can also open external libraries and check flutter plugin added to it.
Step 5: Open the android project level gradle file and add below code.
Code:
dependencies {
classpath 'com.huawei.agconnect:agcp:1.2.1.301'
}
add below code in buildscript and allprojects section of gradle file
Code:
maven { url 'https://developer.huawei.com/repo/' }
Step 6: Go to app level gradle file and add below dependencies and agc services
Code:
implementation 'com.huawei.hms:ads-lite:13.4.30.301'
implementation 'com.huawei.hms:ads-consent:3.4.28.305'
implementation 'com.huawei.hms:ads-identifier:3.4.28.313'
implementation 'com.huawei.hms:ads-installreferrer:3.4.28.313'
Code:
apply plugin: 'com.huawei.agconnect'
Step 7: Add the agconnect-services.json into android -> app folder
Till here your initial setup is completed.
Now you have to create a UI where you can showcase your ads.
I am using a RaisedButton in order to call the logic of ads creation. You can use your own triggering mechanism in order to show the ads.
Banner Ads:
Code:
import 'package:flutter/material.dart';
import 'package:huawei_ads/hms_ads_lib.dart';
class BannerAds extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topCenter,
child: RaisedButton(
child: Text(
'Load Banner Ads',
),
onPressed: () {
BannerAd _bannerAd = createBannerAd();
_bannerAd
..loadAd()
..show();
},
),
);
}
}
BannerAd createBannerAd() {
return BannerAd(
adUnitId: "testw6vs28auh3",
size: BannerAdSize(width: 360, height: 57),
adParam: AdParam.build(),
);
}
Make sure you use the proper imports
Create a method which returns BannerAd
I am using test add id but you can use your own add id.
I am showcasing with 2 banner size but you can modify them according to your need.
Call the load add and show add method to show the banner ad.
Below is the table from which you can choose ad size.
Below are the screenshot for Banner Ads
Splash Ads:
Code:
import 'package:flutter/material.dart';
import 'package:huawei_ads/hms_ads_lib.dart';
class SplashAds extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.topCenter,
child: RaisedButton(
child: Text(
'Load Splash Ads',
),
onPressed: () {
SplashAd splashAd = createSplash();
splashAd
..loadAd(
adUnitId: "testq6zq98hecj",
orientation: SplashAdOrientation.portrait,
adParam: AdParam.build(),
topMargin: 1);
},
),
);
}
}
SplashAd createSplash() => SplashAd(
adType: SplashAdType.above,
ownerText: 'Owner Text',
footerText: 'Footer Text',
loadListener: (SplashAdLoadEvent event, {int errorCode}) {
print("SplashAdLoadEvent : $event");
if (event == SplashAdLoadEvent.dismissed) {
//Handle Dismiss logic here
}
});
Create a method which returns SplashAd
I am using test add id but you can use your own add id.
topMargin can increase the margin space between splash and top border.
You can also define the orientation of add as well.
You can customize Owner text and Footer Text.
Below are the screenshot for Splash Ads
Interstitial Ads
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",
);
}
Create a method which returns Interstitial Ad
I am using test add id but you can use your own add id.
Below are the screenshot for Interstitial Ad.
I hope you with the above snippets you can implement above three categories of ads.