Flutter广告集成插件admob_easy的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter广告集成插件admob_easy的使用

Admob Easy

本文档指导如何使用提供的辅助类将广告集成到Flutter应用程序中。AdMob Easy自动处理用户消息平台(UMP),确保符合隐私法规。

Android Manifest File (Android)

AndroidManifest.xml 文件中添加以下内容:

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

</manifest>

iOS Info.plist File (iOS)

Info.plist 文件中添加以下内容:

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

Initialize MobileAds

为了启用广告支持,在启动屏幕初始化 AdmobEasy,提供必要的广告单元ID和测试设备:

AdmobEasy.instance.initialize(
  androidRewardedAdID: 'ca-app-pub-3940256099942544/5224354917',
  androidInitAdID: 'ca-app-pub-3940256099942544/1033173712',
  androidBannerAdID: 'ca-app-pub-3940256099942544/6300978111',
  androidAppOpenAdID: 'ca-app-pub-3940256099942544/9257395921',
  testDevices: ['543E082C0B43E6BF17AF6D4F72541F51']
);

Load Ads

使用提供的方法创建广告实例并加载广告:

AdmobEasy.instance.createRewardedAd(context); // 加载奖励广告
AdmobEasy.instance.createInterstitialAd(context); // 加载插屏广告
AdmobEasy.instance.loadAppOpenAd(); // 加载应用打开广告,加载后会自动显示

Show Ads

一旦广告加载完成,使用相应的方法显示广告:

AdmobEasy.instance.showRewardedAd(context);
AdmobEasy.instance.showInterstitialAd(context);

AdmobEasyNative Widget

AdmobEasyNative 小部件提供了一种简单的方法来在Flutter应用程序中使用Admob显示原生广告。它允许两种类型的广告模板:smallmedium,适用于UI中的不同广告位置。

Usage

你可以通过指定相关的构造函数将 AdmobEasyNative 集成到你的应用中:

Example (Small Native Ad):

AdmobEasyNative.smallTemplate(
  minWidth: 320,
  minHeight: 90,
  maxWidth: 400,
  maxHeight: 200,
  onAdClicked: (ad) => print("Ad Clicked"),
  onAdImpression: (ad) => print("Ad Impression Logged"),
  onAdClosed: (ad) => print("Ad Closed"),
);

Example (Medium Native Ad):

AdmobEasyNative.mediumTemplate(
  minWidth: 320,
  minHeight: 320,
  maxWidth: 400,
  maxHeight: 400,
  onAdOpened: (ad) => print("Ad Opened"),
  onAdClosed: (ad) => print("Ad Closed"),
  onPaidEvent: (ad, value, precision, currencyCode) {
    print("Paid event: $value $currencyCode with precision: $precision");
  },
);

Parameters:

  • minWidth: 原生广告的最小宽度。
  • minHeight: 原生广告的最小高度。
  • maxWidth: 原生广告的最大宽度。
  • maxHeight: 原生广告的最大高度。
  • onAdClicked: 广告被点击时的回调。
  • onAdImpression: 广告印象记录时的回调。
  • onAdClosed: 广告关闭时的回调。
  • onAdOpened: 广告打开时的回调。
  • onAdWillDismissScreen: 广告即将关闭屏幕时的回调。
  • onPaidEvent: 处理广告付费事件的回调。

Example Implementation:

class NativeAdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Native Ad Example')),
      body: Center(
        child: AdmobEasyNative.smallTemplate(
          minWidth: 320,
          minHeight: 90,
          maxWidth: 400,
          maxHeight: 200,
        ),
      ),
    );
  }
}

通过集成 AdmobEasyNative,你可以轻松地向用户展示原生广告,自定义其大小,并处理点击和印象等广告事件,从而提高参与度和货币化。

Internet Connectivity

Admob Easy 现在会自动检查设备是否连接到移动数据或Wi-Fi,然后再加载广告。此外,用户可以使用以下方法检查互联网连接状态:

AdmobEasy.instance.isConnected.value; // 返回 true 如果已连接,否则返回 false

或者使用 ValueListenableBuilder

ValueListenableBuilder(
  valueListenable: ConnectivityController.instance.isConnected,
  builder: (_, value, child) {
    return Text(value ? "Connected" : "No Internet");
  },
);

你也可以初始化连接性检查:

AdmobEasy.instance.initConnectivity(onOnline: () {}, onOffline: () {});

Support

如果你觉得这个包有用并且想支持其开发,可以给我买杯咖啡:

Buy Me a Coffee

感谢你的支持!

Contributions are welcome!

欢迎提交错误报告、功能请求或拉取请求到 GitHub


更多关于Flutter广告集成插件admob_easy的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter广告集成插件admob_easy的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter应用中集成AdMob广告并使用admob_easy插件的示例代码。请注意,实际使用时需要替换你自己的AdMob应用ID和广告单元ID。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加admob_easy依赖:

dependencies:
  flutter:
    sdk: flutter
  admob_easy: ^0.3.4  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Android和iOS

Android

android/app/src/main/AndroidManifest.xml中添加以下权限:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

iOS

ios/Runner/Info.plist中添加以下配置(如果你打算在iOS上显示广告):

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx</string> <!-- 替换为你的AdMob应用ID -->
<key>IOSBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

3. 初始化AdMob并显示广告

在你的Flutter应用的主文件中(例如main.dart),你可以按照以下步骤初始化AdMob并显示广告。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化AdMob
  AdmobEasy.instance.init(
    appId: 'ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx', // 替换为你的AdMob应用ID
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AdMob Easy Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 显示横幅广告
              BannerAdWidget(
                adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx', // 替换为你的横幅广告单元ID
                adSize: AdSize.banner,
              ),
              SizedBox(height: 20),
              // 显示插屏广告按钮
              ElevatedButton(
                onPressed: () {
                  AdmobEasy.instance.showInterstitial(
                    adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx', // 替换为你的插屏广告单元ID
                  );
                },
                child: Text('Show Interstitial Ad'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 处理广告事件(可选)

你可以监听广告事件(如广告加载、显示、关闭等)以提供更好的用户体验。例如:

AdmobEasy.instance.interstitial.addListener((AdmobAdEvent event) {
  if (event == AdmobAdEvent.loaded) {
    print('Interstitial ad loaded.');
  } else if (event == AdmobAdEvent.failedToLoad) {
    print('Failed to load interstitial ad.');
  } else if (event == AdmobAdEvent.opened) {
    print('Interstitial ad opened.');
  } else if (event == AdmobAdEvent.closed) {
    print('Interstitial ad closed.');
    // 重新加载插屏广告
    AdmobEasy.instance.loadInterstitial(
      adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx', // 替换为你的插屏广告单元ID
    );
  }
});

以上代码示例展示了如何在Flutter应用中集成并使用admob_easy插件来显示横幅广告和插屏广告。请确保替换示例中的AdMob应用ID和广告单元ID为你自己的值。

回到顶部