show banner admob between listview flutter app

الاثنين, سبتمبر 06, 2021

 show banner admob  between  listview  flutter app

اضافة عرض اعلانات البانر في listview flutter app:

add admob banner into a listview flutter app



 Video Tutorial of Monitizing flutter app with  google admob

 Banner Ad  in   listview flutter app:






 You need to create an Admob Account

Here is a article step by step process to create account and add app in your admob account or use the test AdsUnit.

  • Goto Admob.com
  • SignIn/SignUp with your Google Account.
  • Goto App > Add App
    – select, YES, if you have already published App on Appstore or NO.
  • if Published, then give the package name/URL of your app.
  • A unique App ID will be generated for your Admob ads app.

    <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
  • Then, Click on “create Ad Unit”.
  • An Admob ad unit will be generated.
Test adUnitId of BannerAds: 'ca-app-pub-3940256099942544/6300978111'

Use this ad unit id in your flutter app to display ads in your apps.

Now, Let’s move to flutter project where you want to integrate admob ads and display ads to your app users.

 Add dependency: Google_Mobile_Ads  Packages

 إضافة المكتبات التالية: Google_Mobile_Ads 

 dependencies:
    google_mobile_ads: ^0.13.4
add package of google_mobile_ads to pubspace.yaml



  •  :Add your Ad app ID to your app's AndroidManifest.xml file or use test_app_ID

  • ضبط بيئة الاندرويد من ملف androidmainfast.xml

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="ca-app-pub-3940256099942544~3347511713"/>

setup androidminefast.xml platfore for admob






  • mine.dart تهيئة حزمة الاعلانات في ملف 

  • WidgetsFlutterBinding.ensureInitialized();
    AdmobHelper.initialize();

intalization of ads sdk for flutter app

انشاء ملف  ad_helper لاكواد Ad Banner

class AdmobHelper {
static String get bannerUnit => 'ca-app-pub-3940256099942544/6300978111';

static initialize() {
if (MobileAds.instance == null) {
MobileAds.instance.initialize();
}
}


  static BannerAd getBannerAd() {
    BannerAd bAd = new BannerAd(
        size: AdSize.banner,
        adUnitId: bannerUnit,
        listener: BannerAdListener(onAdClosed: (Ad ad) {
          print("Ad Closed");
        }, onAdFailedToLoad: (Ad ad, LoadAdError error) {
          ad.dispose();
        }, onAdLoaded: (Ad ad) {
          print('Ad Loaded');
        }, onAdOpened: (Ad ad) {
          print('Ad opened');
        }),
        request: AdRequest());

    return bAd;
  }
}


  • Create class of banner_Listview

  •  اضافة اكواد banner_Listview


class BannerListview extends StatefulWidget {
  @override
  _BannerListviewState createState() => _BannerListviewState();
}

class _BannerListviewState extends State<BannerListview> {
  late List<String> datas; // late for null safty

  late List<Object> dataads; // will store both data + banner ads

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    datas = [];

    //generate array list of string
    for (int i = 1; i <= 20; i++) {
      datas.add("List Item $i");
    }

    dataads = List.from(datas);

    // insert admob banner object in between the array list
    for (int i = 0; i <= 2; i++) {
      var min = 1;
      var rm = new Random();

      //generate a random number from 2 to 18 (+ 1)
      var rannumpos = min + rm.nextInt(18);

      //and add the banner ad to particular index of arraylist
      dataads.insert(rannumpos, AdmobHelper.getBannerAd()..load());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Banner ads listview"),
      ),
      body: ListView.builder(
          itemCount: dataads.length,
          itemBuilder: (context, index) {
            //id dataads[index] is string show listtile with item in it
            if (dataads[index] is String) {
              return ListTile(
                title: Text(dataads[index].toString()),
                leading: Icon(Icons.exit_to_app),
                trailing: Icon(Icons.ice_skating),
              );
            } else {
              // if dataads[index] is object (ads) then show container with adWidget
              final Container adcontent = Container(
                child: AdWidget(
                  ad: dataads[index] as BannerAd,
                  key: UniqueKey(),
                ),
                height: 50,
              );
              return adcontent;
            }
          }),
    );
  }
}



وضع كود عرض اعلان البانر في كلاس banner_listview

bottomNavigationBar: Container(
  child: AdWidget(
    ad: AdmobHelper.getBannerAd()..load(),
    key: UniqueKey(),
  ),
  height: 50,
),

show banner admob flutter app


 Complete Source Code : 


main.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'ad_helper.dart';
import 'listview_banner.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  AdmobHelper.initialize();
  runApp(MaterialApp(debugShowCheckedModeBanner: false,
    title: 'Banner ads in listview',
    home: BannerListview(),
  ));
}

ad_helper

import 'package:google_mobile_ads/google_mobile_ads.dart';

class AdmobHelper {
  static String get bannerUnit => 'ca-app-pub-3940256099942544/6300978111';

  static initialize() {
    if (MobileAds.instance == null) {
      MobileAds.instance.initialize();
    }
  }

  static BannerAd getBannerAd() {
    BannerAd bAd = new BannerAd(
        size: AdSize.banner,
        adUnitId: bannerUnit,
        listener: BannerAdListener(onAdClosed: (Ad ad) {
          print("Ad Closed");
        }, onAdFailedToLoad: (Ad ad, LoadAdError error) {
          ad.dispose();
        }, onAdLoaded: (Ad ad) {
          print('Ad Loaded');
        }, onAdOpened: (Ad ad) {
          print('Ad opened');
        }),
        request: AdRequest());

    return bAd;
  }
}

banner_listview

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'ad_helper.dart';

class BannerListview extends StatefulWidget {
  @override
  _BannerListviewState createState() => _BannerListviewState();
}

class _BannerListviewState extends State<BannerListview> {
  late List<String> datas; // late for null safty

  late List<Object> dataads; // will store both data + banner ads

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    datas = [];

    //generate array list of string
    for (int i = 1; i <= 20; i++) {
      datas.add("List Item $i");
    }

    dataads = List.from(datas);

    // insert admob banner object in between the array list
    for (int i = 0; i <= 2; i++) {
      var min = 1;
      var rm = new Random();

      //generate a random number from 2 to 18 (+ 1)
      var rannumpos = min + rm.nextInt(18);

      //and add the banner ad to particular index of arraylist
      dataads.insert(rannumpos, AdmobHelper.getBannerAd()..load());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Welcome in ads test"),
      ),
      body: ListView.builder(
          itemCount: dataads.length,
          itemBuilder: (context, index) {
            //id dataads[index] is string show listtile with item in it
            if (dataads[index] is String) {
              return ListTile(
                title: Text(dataads[index].toString()),
                leading: Icon(Icons.exit_to_app),
                trailing: Icon(Icons.ice_skating),
              );
            } else {
              // if dataads[index] is object (ads) then show container with adWidget
              final Container adcontent = Container(
                child: AdWidget(
                  ad: dataads[index] as BannerAd,
                  key: UniqueKey(),
                ),
                height: 50,
              );
              return adcontent;
            }
          }),
      bottomNavigationBar: Container(
        child: AdWidget(
          ad: AdmobHelper.getBannerAd()..load(),
          key: UniqueKey(),
        ),
        height: 50,
      ),
    );
  }
}






brhomapps

مرسلة بواسطة brhomapps

إرسال تعليق

0 تعليقات

Contact Us