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

Video Tutorial of Monitizing flutter app with google admob Banner Ad in webview 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

2. Android Platform Setup

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

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

4. Initialize the Mobile Ads SDK
mine.dart تهيئة حزمة الاعلانات في ملف
WidgetsFlutterBinding.ensureInitialized();
AdmobHelper.initialize();

5. Create an ad_helper class of Ad BannerAd

انشاء ملف 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;
  }
}

6. Show ads – Banner ads to user

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

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

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:

codelabs.developers.google

https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter#0

flutter.dev

https://flutter.dev/?gclid=Cj0KCQjwssyJBhDXARIsAK98ITTVr1TEtQmoFAWi7M9XiTj5pP_WB6Ghamtj2qeoOPBYVRMFTSvYHsAaAqe4EALw_wcB&gclsrc=aw.ds

Pub Dev

https://pub.dev/packages/google_mobile_ads

brhomapps

بحث هذه المدونة الإلكترونية