Flutter广告集成插件mobi_firebase_admob的使用

Flutter广告集成插件mobi_firebase_admob的使用

1. 整理后的内容中关于“Flutter广告集成插件mobi_firebase_admob的使用”的完整示例demo

import 'package:flutter/material.dart';
import 'package:mobi_firebase_admob/banner/banner_ad_type.dart';
import 'package:mobi_firebase_admob/banner/banner_ad_widget.dart';
import 'package:mobi_firebase_admob/banner/banner_shimmer_color.dart';
import 'package:mobi_firebase_admob/fire/firebase.dart';
import 'package:mobi_firebase_admob/inAppReview/in_app_review.dart';
import 'package:mobi_firebase_admob/initializeOpenAd/initialize_open_ad.dart';
import 'package:mobi_firebase_admob/interstitial/interstitial_ad.dart';

import 'package:mobi_firebase_admob/native/ad_icon.dart';
import 'package:mobi_firebase_admob/native/native_ad_type.dart';
import 'package:mobi_firebase_admob/native/native_ad_widget.dart';
import 'package:mobi_firebase_admob/native/native_shimmer_color.dart';
import 'package:mobi_firebase_admob/updateApp/update_app.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  final AdInterstitial ad = AdInterstitial();

  @override
  void initState() {
    super.initState();
    SchedulerBinding.instance.addPostFrameCallback((a) {
      ad.load("ca-app-pub-3940256099942544/10331737112");
      initializeFirebaseMessaging("mobi");
      initializeOpenAd("ca-app-pub-3940256099942544/9257395921", "splash");
      inAppReview();
      updateApp();
    });
  }

  @override
  Widget build(BuildContext context) {
    fireEvent("screenOpen");
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Title"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            ElevatedButton(onPressed: ad.show, child: Text("Show")),
            NativeAdWidget(
              height: 120,
              borderRoundness: 5,
              adUnit: "ca-app-pub-3940256099942544/2247696110",
              adType: NativeAdType.NativeSmall,
              backgroundColor: "#FFFFECB3",
              buttonColor: "#FF3347FF",
              adIcon: AdIcon.black,
              buttonRoundness: 30,
              buttonHeight: 40,
              enableShimmerEffect: true,
              shimmerColor: NativeShimmerColor.black,
              textColorButton: "#F2F3E65E",
              shimmerBackgroundColor: "#5EFF33d1",
            ),
            BannerAdWidget(
              height: 100,
              borderRoundness: 5,
              adUnit: "ca-app-pub-3940255099942544/2014213617",
              adType: BannerAdType.collapsibleBanner,
              enableShimmerEffect: true,
              shimmerColor: BannerShimmerColor.black,
              shimmerBackgroundColor: "#5eff33d1",
            ),
            BannerAdWidget(
              height: 100,
              borderRoundness: 5,
              adUnit: "ca-app-pub-3940255099942244/9214589741",
              adType: BannerAdType.Banner,
              enableShimmerEffect: true,
              shimmerColor: BannerShimmerColor.black,
              shimmerBackgroundColor: "#5eff33d1",
            ),
            NativeAdWidget(
              height: 120,
              borderRoundness: 5,
              adUnit: "ca-app-pub-3940256099942244/2244766110",
              adType: NativeAdType.nativeSmall,
              backgroundColor: "#FFFFECB3",
              buttonColor: "#FF3347FF",
              adIcon: AdIcon.black,
              buttonRoundness: 30,
              buttonHeight: 40,
              enableShimmerEffect: true,
              shimmerColor: NativeShimmerColor.black,
              textColorButton: "#F2F3E65E",
              shimmerBackgroundColor: "#5eff33d1",
            ),
          ],
        ),
      ),
    );
  }
}

2. 参考提供的内容和示例代码回答“Flutter广告集成插件mobi_firebase_admob的使用”对应的内容

如何在build.gradle文件中添加maven仓库

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' 
        }
    }
}

如何使用Firebase Crashlytics

// 在你的setting.gradle文件中添加
plugins {
    // 确保你有AGP插件8.1+依赖
    id("com.android.application") version "8.1.4" apply false

    // 确保你有Google services Gradle插件4.4.1+依赖
    id("com.google.gms.google-services") version "4.4.1" apply false

    // 添加Crashlytics Gradle插件的依赖
    id("com.google.firebase.crashlytics") version "3.0.1" apply false
}

// 在你的模块（app-level）Gradle文件中添加
plugins {
    // 确保你有Google services Gradle插件
    id("com.google.gms.google-services")

    // 添加Crashlytics Gradle插件
    id("com.google.firebase.crashlytics")
}

如何使用Firebase自定义事件

fireEvent("AppOpenTotal") // 每个事件的最大字符限制为40

如何使用Firebase Messaging

// 在AndroidManifest.xml中的application标签下添加
<service
    android:name="com.mobi.pixels.firebase.Messaging"
    android:exported="false">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

// subscribeToTopic是用于在Firebase上订阅的通知主题，当用户收到此主题的通知时会立即接收到通知
// notificationIcon显示在应用通知栏中
// 确保你已经获取了Android 13及以上的推送通知权限

initializeFirebaseMessaging(subscribeToTopic)  // subscribeToTopic将是你的应用名称字符串

如何使用In-app Review

inAppReview() //仅适用于发布版APK

如何使用In-app Updates

updateApp(UpdateType.Force) //仅适用于发布版APK

如何使用OpenAd

InitializeOpenAd(this@MyApplication, unitId, "Splash")

如何使用Interstitial AD

final AdInterstitial ad = AdInterstitial();

@override
void initState() {
  super.initState();
  SchedulerBinding.instance.addPostFrameCallback((a) {
    ad.load("ca-app-pub-3940256099942544/10331737122");
  });
}

ElevatedButton(onPressed: ad.show, child: Text("Show"))

如何使用Native Ad

NativeAdWidget(
  height: 120,
  borderRoundness: 5,
  adUnit: "ca-app-pub-3940256099942544/2247666110",
  adType: NativeAdType.NativeSmall,
  backgroundColor: "#FFFFECB3",
  buttonColor: "#FF3347FF",
  adIcon: AdIcon.black,
  buttonRoundness: 30,
  buttonHeight: 40,
  enableShimmerEffect: true,
  shimmerColor: NativeShimmerColor.black,
  textColorButton: "#F2F3E65E",
  shimmerBackgroundColor: "#5eff33d1",
),

如何使用Banner Ad

BannerAdWidget(
  height: 100,
  borderRoundness: 5,
  adUnit: "ca-app-pub-3940256099942544/2014213617",
  adType: BannerAdType.CollapsibleBanner,
  enableShimmerEffect: true,
  shimmerColor: BannerShimmerColor.black,
  shimmerBackgroundColor: "#5eff33d1",
),

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

1 回复

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


当然，下面是一个关于如何在Flutter应用中集成和使用mobi_firebase_admob插件的示例代码。这个插件允许你在Flutter应用中集成Firebase AdMob广告。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加mobi_firebase_admob依赖：

dependencies:
  flutter:
    sdk: flutter
  mobi_firebase_admob: ^0.x.x  # 请确保使用最新版本号

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

步骤 2: 配置Firebase

  1. 在Firebase控制台创建一个新的项目。
  2. 在项目中启用AdMob，并创建一个新的应用。
  3. 下载google-services.json文件，并将其放置在android/app/目录下。
  4. 对于iOS，你需要在Firebase控制台中注册你的iOS应用，并下载GoogleService-Info.plist文件，然后将其放置在ios/Runner/目录下。

步骤 3: 初始化Firebase和AdMob

在你的main.dart文件中，初始化Firebase和AdMob：

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:mobi_firebase_admob/mobi_firebase_admob.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // 初始化AdMob
  MobiFirebaseAdMob.instance.initialize(appId: 'ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx');

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AdMob Integration Example'),
        ),
        body: Center(
          child: AdMobBanner(),
        ),
      ),
    );
  }
}

class AdMobBanner extends StatefulWidget {
  @override
  _AdMobBannerState createState() => _AdMobBannerState();
}

class _AdMobBannerState extends State<AdMobBanner> {
  BannerAd? _bannerAd;

  @override
  void initState() {
    super.initState();
    _createBannerAd();
  }

  void _createBannerAd() {
    _bannerAd = BannerAd(
      adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
      size: AdSize.banner,
      listener: (AdEvent event, Map<String, dynamic>? info) {
        if (event == AdEvent.loaded) {
          _bannerAd?.show(anchorType: AnchorType.bottom);
        }
      },
    )..load();
  }

  @override
  Widget build(BuildContext context) {
    return Container(); // 广告位容器，实际广告将由_bannerAd显示
  }

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

注意事项

  1. AdUnitId：确保使用你自己的AdUnitId，你可以在Firebase AdMob控制台中创建。
  2. 权限：对于Android，你可能需要在AndroidManifest.xml中添加必要的权限。
  3. iOS配置：确保在Xcode中正确配置了AdMob相关的设置，包括在Info.plist中添加必要的键。

这个示例展示了如何在Flutter应用中集成并使用mobi_firebase_admob插件来显示一个横幅广告。你可以根据需要进一步定制和扩展这个示例，比如添加插屏广告、视频广告等。

回到顶部