如何将Google AdMob集成到Flutter中

2020年12月30日10:46:17 发表评论 44 次浏览

本文概述

Flutter移动应用程序开发框架正在迅速成为当今领先的跨平台应用程序开发工具之一。

许多公司和开发人员都选择使用Flutter开发他们的应用程序, 并且你可以在市场。 Flutter还提供了许多自定义的应用模板, 以帮助你入门。

但是这些天来, 一旦你构建了一个应用程序, 你可能想通过它获利。还有什么比Google AdMob更好的方法呢? AdMob是通过应用获利的最简单方法之一, 我们将在本文中介绍如何实现。

在这里, 我们将学习如何将Google AdMob与Flutter应用程序的开发生态系统集成。

我们的想法是首先逐步学习如何设置Firebase应用以及AdMob。之后, 我们将它们配置为Flutter环境。最后, 我们将展示一个简单的横幅广告作为演示, 以便你了解AdMob的工作方式。

如何将Firebase配置与Flutter集成

首先, 我们将Firebase服务与Flutter项目集成在一起。但是首先, 我们需要创建一个Firebase项目。你可以在官方网站找到设置指南Firebase文档为Flutter。

要创建Firebase项目, 我们需要登录到Firebase并导航到Firebase控制台。在这里, 我们只需单击"添加项目"即可开始我们的项目。

首先, 将出现一个窗口, 要求你输入项目的名称。在这里, 我将项目名称保持简单–FlutterAdmob–如下面的屏幕截图所示:

如何将Google AdMob集成到Flutter中1

让我们继续下一步, 直到创建项目为止。设置完项目后, 我们将获得一个项目控制台, 如下面的屏幕快照所示:

如何将Google AdMob集成到Flutter中2

在这里, 我们将为Android平台设置Firebase。因此, 只需单击Android图标, 如上面的屏幕截图所示即可。这将带我们进入将Firebase注册到Flutter应用程序的界面。

步骤1:将Firebase注册到你的Android应用

注册过程是特定于平台的, 因此我们将注册Android平台。点击Android图标后, 你将被带到一个界面, 要求你输入Android套件名称.

为了添加flutter项目的包名称, 我们需要先找到它。软件包名称将在./android/app/build.gradleFlutter项目的文件。你将看到如下内容:

com.example.backgroundSolution

我们只需要复制它并将其粘贴到Android包名称输入字段, 如下面的屏幕截图所示:

如何将Google AdMob集成到Flutter中3

之后, 你只需单击"注册应用程序"按钮。它将引导我们进入可以获取google-services.json文件, 它将我们的Flutter应用程序链接到Firebase Google服务。

我们需要下载文件并将其移至./android/appFlutter项目的目录。以下屏幕快照中也显示了说明:

如何将Google AdMob集成到Flutter中4

步骤2:将Firebase配置添加到Flutter项目中的本机文件

现在, 为了在我们的Android应用中启用Firebase服务, 我们需要添加google-services插件到我们的Gradle文件。

首先, 在我们根级别(项目级别)摇篮文件(android / build.gradle), 我们需要添加规则以包含Google Services Gradle插件。我们需要检查以下配置是否可用:

buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.4'
  }
}

allprojects {
  ...
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    ...
  }
}

如果没有, 我们需要添加上面的代码片段中所示的配置。

现在在我们的模块(应用程序级)Gradle文件中(android / app / build.gradle), 我们需要应用Google Services Gradle插入。

为此, 我们需要将以下代码段中突出显示的代码段添加到./android/app/build.gradle我们项目的文件:

// Add the following line:
apply plugin: 'com.google.gms.google-services'  // Google Services plugin

android {
  // ...
}

现在, 我们需要运行以下命令, 以便可以进行一些自动配置:

flutter packages get

现在, 我们已成功将Firebase配置与Flutter项目集成在一起。

如何建立AdMob帐户

现在, 我们需要一个Google AdMob帐户才能将广告投放到我们的应用中。为此, 我们需要注册并登录到AdMob。然后, 我们需要导航到Google AdMob控制台, 如以下屏幕截图所示:

如何将Google AdMob集成到Flutter中5

现在, 我们需要设置一个AdMob应用, 该应用将使我们能够访问广告单元。为此, 我们需要单击上面的屏幕快照中所示的"添加你的第一个应用程序"按钮。

然后, 我们将转到设置应用程序的屏幕, 如以下屏幕截图所示:

如何将Google AdMob集成到Flutter中6

在这里, 它询问我们的应用程序是否已在Google Play或App Store中提供。由于我们正在进行广告测试演示, 因此我们尚未发布该应用程序。因此, 只需选择"否"即可将你转到另一个屏幕, 如以下屏幕截图所示:

如何将Google AdMob集成到Flutter中7

在这里, 我们需要输入我们的应用名称和平台。你可以选择自己的名字。然后, 由于我们正在使用Flutter for Android, 因此我们需要选择Android, 然后单击"添加"按钮。

之后, 我们需要导航回AdMob控制台。我们将在Apps控制台中获得AdMob应用, 如以下屏幕截图所示:

如何将Google AdMob集成到Flutter中8

现在, 我们需要点击"添加广告单元"以创建用于投放测试广告的广告单元。单击后, 你将看到一个屏幕, 显示不同的广告单元, 如下面的屏幕快照所示:

如何将Google AdMob集成到Flutter中9

在这里, 我们可以选择不同的广告。为了简单实施, 我们将选择横幅广告。

因此, 我们需要点击"横幅"广告, 然后选择广告单元名称, 如以下屏幕截图所示:

如何将Google AdMob集成到Flutter中10

最后, 单击"创建广告单元", 然后单击"完成"以成功创建广告单元, 如以下屏幕截图所示:

如何将Google AdMob集成到Flutter中11

在这里, 我们有了广告单元(请记住, 在投放实际广告时, 广告单元ID很有用)。

如何在Flutter项目中配置AdMob

现在, 我们已经准备好AdMob应用程序和AdMob应用程序广告单元, 现在可以在Flutter项目中设置AdMob。

为此, 我们需要先安装Firebase插件, 如下面的代码片段所示:

firebase_admob: ^0.10.2

现在, 我们需要将AdMob应用连接到我们的本机平台。为此, 我们需要向AndroidManifest。XML文件文件, 如下面的代码片段所示:

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="[ADMOB_APP_ID]"/>

可以在路径"./android/app/src/main/AndroidManifest.xml"。 代替[ADMOB_APP_ID], 我们需要输入实际的AdMob应用程式编号.

我们可以从应用程式设定AbMob控制台中的控制台, 如以下屏幕截图所示:

如何将Google AdMob集成到Flutter中12

我们只需要复制App ID并将其粘贴到值论据。

如何制作横幅广告

现在, 我们的AdMob应用已连接到Flutter项目。在这里, 我们将制作横幅广告。想法是在应用程序屏幕底部显示一个测试横幅广告。

请注意, 我们使用的是与我们在上一教程。在每个项目中, 设置AdMob的过程都是相同的。我们只是将该项目用作演示。

但首先, 我们需要在主镖文件, 如下面的代码片段所示:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_admob/firebase_admob.dart';

然后, 我们需要初始化测试设备。我们也可以从日志中获取测试设备的ID:

const String testDevice = 'Kris';

现在, 我们将创建一个返回横幅广告的函数。为此, 我们将使用横幅广告由Firebase AdMob库提供的实例, 该实例将广告单元ID, 大小和侦听器功能作为参数。

我们可以使用之前在AdMob应用中创建的横幅广告单元ID, adUnitId属性。下面的代码段提供了该功能的整体实现:

Future<void> main() async{
  WidgetsFlutterBinding.ensureInitialized();
  BannerAd createBannerAd() {
    return BannerAd(
      adUnitId: BannerAd.testAdUnitId, size: AdSize.banner, listener: (MobileAdEvent event) {
        print("BannerAd event $event");
      }, );
  }
  runApp(MyApp());
}

由于我们将在此处显示一个测试广告横幅, 因此我们将使用testAdUnitId由...提供横幅广告实例。但是我们可以粘贴之前在此处创建的实际广告单元ID。

现在, 我们需要在我们的广告中触发横幅广告功能主要功能。但是首先, 我们需要启动Firebase实例。

然后, 我们需要初始化FirebaseAdMob具有的实例应用程式编号我们从应用程式设定AdMob控制台的控制台。

最后, 我们需要调用createBannerAd功能然后加载广告和节目广告也是如此。下面的代码段提供了总体实现:

Future<void> main() async{
  .
	.
	.
  await Firebase.initializeApp();
  FirebaseAdMob.instance.initialize(appId: FirebaseAdMob.testAppId);
  createBannerAd()
    ..load()
    ..show();
  runApp(MyApp());
}

因此, 我们将在应用程序屏幕的底部看到横幅广告, 如下面的模拟器屏幕截图所示:

如何将Google AdMob集成到Flutter中13

如你所见, 仿真器屏幕底部有一个测试广告横幅。

恭喜!你已经在Flutter应用中成功设置了AdMob!

请注意, 如果我们使用实际的应用程序ID和广告单元ID, 则可以在横幅广告中获取实际的广告Feed。

总结

Flutter是一个不断发展的跨平台移动应用程序开发框架, 已经引起了许多开发人员和公司的关注。因此, 了解其一些最有用的功能非常重要。

在本文中, 我们将AdMob集成到Flutter项目中。这个过程有点冗长, 但是很简单。

AdMob是通过应用获利的最佳方法之一-但是要充分利用它, 你需要了解如何在屏幕上正确集成它。

本教程的主要目的是演示如何在Flutter项目中配置AdMob, 然后显示简单的横幅广告。对于任何Flutter应用程序, 该过程都是相同的。

现在, 面临的挑战是展示当今流行的其他类型的广告单元, 例如非页内广告, 原生广告, 奖励广告等。我们可以使用实际的AbMob应用ID和单位ID来显示真实的广告Feed, 代替测试广告。

你可以看到功能强大的功能完善的应用程序, 其中包括最先进的用户界面和功能Flutter市场上的应用程序。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: