Add banner ads google_mobile_ads to web view flutter app

Add banner ads google_mobile_ads to web view flutter app

أضف إعلانات البانر google_mobile_ads إلى Webvie_flutter app

  مرحبًا يا شباب ، مرحبًا بكم في مدونة brhom apps  ، في هذا الشرح التعليمي ل flutter ، سنتعلم كيفية اضاعة اعلانات البانر و تحقيق الدخل من تطبيق flutter باستخدام إعلانات Google Admob.
إذن ،هل  لديك تطبيق flutter منشور على متجر Play أو أكملت إنشاء تطبيق flutter وتريد دمج الإعلانات في تطبيق flutter الخاص بك؟ انت في المكان الصحيح .

 Hi Guys, Welcome to brhom apps Point, In this flutter tutorial we will learn how to monetize flutter app with Google Admob ads.
So, you have an flutter app published on Play Store or you have completed building your flutter app & want to integrate ads into your flutter app?


Add banner ads google_mobile_ads to web view flutter app








Table of Contents
     جدول المحتوى


           

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.


   1. Add dependency: Google_Mobile_Ads  and WebView_flutter Packages

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

 dependencies:
webview_flutter: ^2.0.12
google_mobile_ads: ^0.13.4

dependencies: webview_flutter package



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

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




  • 3. Create class of webview

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

  • import 'dart:io';
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';

    void main() {
    runApp(MaterialApp(
    home: WebViewExample(),
    ));
    }

    class WebViewExample extends StatefulWidget {
    @override
    WebViewExampleState createState() => WebViewExampleState();
    }

    class WebViewExampleState extends State<WebViewExample> {
    @override
    void initState() {
    super.initState();
    // Enable hybrid composition.
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
    }

    @override
    Widget build(BuildContext context) {
    return WebView(
    initialUrl: 'https://flutter.dev',
    javascriptMode: JavascriptMode.unrestricted,
    );
    }
    }



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

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

Initialize theMobile Ads SDK




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

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;
}
}


وضع كود عرض اعلان البانر 

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


show banner display ads in webview



       Complete Source Code:


main.dart
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_web_view/ad_helper.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
WidgetsFlutterBinding.ensureInitialized();
AdmobHelper.initialize();
runApp(MaterialApp(
home: WebViewExample(),
));
}

class WebViewExample extends StatefulWidget {
@override
WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
final AdmobHelper admobHelper = new AdmobHelper();
@override
void initState() {
super.initState();
// Enable hybrid composition.
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'add banner ads to web view',
)),
body: WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
),
bottomNavigationBar: Container(
child: AdWidget(
ad: AdmobHelper.getBannerAd()..load(),
key: UniqueKey(),
),
height: 50,
),
);
}
}


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;
}
}




Our resurse:


إرسال تعليق

0 تعليقات

Contact Us