loading...

Integrate Ads kit in Flutter Application

singlebubble1 profile image singlebubble ・4 min read

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
Alt Text
Alt Text

Once both are installed it will show you an option to create a new project in flutter.
Alt Text
To confirm run the below command in terminal “flutter doctor”
Alt Text
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.
Alt Text

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.
Alt Text
Click on pub get button highlighted above and you can get the latest dependencies.

Below message should be shown if the step goes successful.
Alt Text
To confirm the above step is successful you can also open external libraries and check flutter plugin added to it.
Alt Text
Step 5: Open the android project level gradle file and add below code.

dependencies {
     classpath 'com.huawei.agconnect:agcp:1.2.1.301'
 }

add below code in buildscript and allprojects section of gradle file

maven { url 'https://developer.huawei.com/repo/' }

Step 6: Go to app level gradle file and add below dependencies and agc services

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'
apply plugin: 'com.huawei.agconnect'

Step 7: Add the agconnect-services.json into android -> app folder
Alt Text

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.

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.
Alt Text

Below are the screenshot for Banner Ads
Alt Text

Splash Ads:

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
Alt Text

Interstitial Ads

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.
Alt Text

I hope you with the above snippets you can implement above three categories of ads.
Official documentation

Posted on by:

singlebubble1 profile

singlebubble

@singlebubble1

live, laough and love coding, cooking and skiing

Discussion

markdown guide