flutter - 如何在 Flutter 应用程序中集成谷歌移动广告

Question

最近，flutter 宣布发布适用于 Flutter 的 Google 移动广告，这是一种与 AdMob 和 AdManager 配合使用的新 SDK，可提供各种广告格式，包括横幅广告、插页式广告、原生广告和用于 Flutter 的激励视频广告
我想通过 AdMob 展示广告来通过我的 Flutter 应用获利。我们如何在我们的 Flutter 应用程序中设置和集成谷歌移动广告

Answer 1

Flutter 的 Google 移动广告 SDK 目前支持加载和显示横幅、插页式(全屏)、原生广告和激励视频广告
将 Google 移动广告 SDK 集成到 Flutter 应用程序中，您将在此处完成
先决条件:https://pub.dev/packages/google_mobile_ads#prerequisites
添加 Google 移动广告插件作为依赖项
添加 Google Mobile Ads插件作为对 pubspec.yaml 的依赖文件位于项目的根目录。

dependencies:
  google_mobile_ads: ^0.11.0+1

导入到您的 Dart 代码中，您可以使用:

import 'package:google_mobile_ads/google_mobile_ads.dart';

特定平台的设置
iOS
更新您的 信息.plist

打开 ios/Runner/Info.plist Android Studio 中的文件。

添加 GADApplicationIdentifier键与您的 AdMob 应用 ID ( identified in the AdMob UI ) 的字符串值，如下所示:

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>

安卓
更新 AndroidManifest.xml

打开 android/app/src/main/AndroidManifest.xml Android Studio 中的文件。

通过添加 <meta-data> 添加您的 AdMob 应用 ID标记并输入 com.google.android.gms.ads.APPLICATION_ID .如下所示。您可以在 AdMob UI 中找到您的 App ID。 .对于 android:value在引号中插入您自己的 AdMob 应用 ID，如下所示。

 <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
 <meta-data
      android:name="com.google.android.gms.ads.APPLICATION_ID"
      android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>

AdMob 应用 ID 必须包含在 AndroidManifest.xml 中.如果不这样做，将导致应用程序启动时崩溃。
初始化移动广告 SDK
在加载广告之前，请通过调用 MobileAds.instance.initialize() 让您的应用初始化移动广告 SDK。初始化 SDK 并返回 Future初始化完成后(或在 30 秒超时后)完成。这只需执行一次，最好在运行应用程序之前完成。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // Load ads.
  }
}

这是添加横幅广告 给大家看 googleads-mobile-flutter BannerAd需要一个 adUnitId、一个 AdSize、一个 AdRequest , 和 AdListener .下面显示了一个示例，以及有关每个参数的更多信息。

final BannerAd myBanner = BannerAd(
  adUnitId: '<ad unit id>',
  size: AdSize.banner,
  request: AdRequest(),
  listener: AdListener(),
);

要定义自定义横幅尺寸，请设置所需的 AdSize，如下所示:

final AdSize adSize = AdSize(300, 50);

横幅广告事件
通过使用 AdListener ，您可以监听生命周期事件，例如广告关闭或用户离开应用程序。这个例子实现了每个方法并将一条消息记录到控制台:

final AdListener listener = AdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an ad is in the process of leaving the application.
 onApplicationExit: (Ad ad) => print('Left application.'),
);

之后 BannerAd被实例化， load()必须先调用，然后才能在屏幕上显示。

myBanner.load();

显示 BannerAd作为小部件，您必须实例化 AdWidget调用 load() 后带有受支持的广告。您可以在调用 load() 之前创建小部件，但是 load()必须在将其添加到小部件树之前调用。

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget继承自 Flutter 的 Widget 类，可以用作任何其他小部件。在 iOS 上，确保将小部件放置在具有指定宽度和高度的小部件中。否则，您的广告可能不会显示。 BannerAd可以放置在尺寸与广告匹配的容器中:

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: myBanner.size.width.toDouble(),
  height: myBanner.size.height.toDouble(),
);

最后，通过调用 BannerAd.dispose() 释放与 BannerAd 对象关联的资源。 dispose() 中的方法回调方法。

@override
void dispose() {
  // TODO: Dispose BannerAd object
  myBanner?.dispose();
  super.dispose();
}

就是这样!您的应用现在可以显示横幅广告了。
完整示例

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


void main() {
  runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp()));
}

// You can also test with your own ad unit IDs by registering your device as a
// test device. Check the logs for your device's ID value.
const String testDevice = 'YOUR_DEVICE_ID';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  BannerAd _bannerAd;

  @override
  void initState() {
    super.initState();
    _bannerAd = BannerAd(
      adUnitId: BannerAd.testAdUnitId,
      request: AdRequest(),
      size: AdSize.banner,
      listener: AdListener(
        onAdLoaded: (Ad ad) {
          print('$BannerAd loaded.');
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('$BannerAd failedToLoad: $error');
        },
        onAdOpened: (Ad ad) => print('$BannerAd onAdOpened.'),
        onAdClosed: (Ad ad) => print('$BannerAd onAdClosed.'),
        onApplicationExit: (Ad ad) => print('$BannerAd onApplicationExit.'),
      ),
    );

    _bannerAd?.load();
  }

  @override
  void dispose() {
    super.dispose();
    _bannerAd?.dispose();
    _bannerAd = null;
  }

  @override
  Widget build(BuildContext context) {
    final AdWidget adWidget = AdWidget(ad: _bannerAd);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Mobile Ads'),
        actions: <Widget>[
        ],
      ),
      body: Column(
        children: [
          Align(
            alignment: FractionalOffset.topCenter,
            child: Padding(
                padding: EdgeInsets.only(top: 10.0),
                child: Container(
                  alignment: Alignment.center,
                  child: adWidget,
                  width: _bannerAd.size.width.toDouble(),
                  height: _bannerAd.size.height.toDouble(),
                )
            ),
          )
        ],
      ),
    );
  }
}