Flutter广告横幅稳定显示插件admob_banner_stabilizer的使用

admob_banner_stabilizer简介

admob_banner_stabilizer 是一个用于轻松使用 firebase_admob 包中的横幅广告的插件。它可以帮助开发者更方便地在应用中显示稳定的广告横幅。

特性

• 广告与Widget在同一位置显示
  AdmobBannerWidget 的构建方法返回一个 Container，但广告会精确地放置在这个 Container 上。

• Widget高度与广告高度匹配，便于布局
  这确保了广告和按钮不会重叠。

• 当Widget从Widget树中移除时，广告也会消失
  广告本身可以像Widget一样被处理，无需额外编写代码来移除广告。

• 支持Navigator
  当从上方推送另一个页面时，广告会消失。

• 支持设备方向的变化
  如果设备的方向发生变化，广告会先消失，然后在新位置重新出现。

• 连续屏幕切换后不会崩溃
  可以连续释放此Widget。

插件admob_banner_stabilizer使用步骤

初始化firebase_admob插件

在使用 AdmobBannerWidget 之前，需要初始化 firebase_admob 插件。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FirebaseAdMob.instance.initialize(
      appId: Platform.isAndroid
          // AdMob App ID for Firebase Demo Project (Flood-It!)
          ? 'ca-app-pub-8123415297019784~2664022459'
          // 测试用GADApplicationIdentifier。参见https://developers.google.com/admob/ios/quick-start?hl=en
          : 'ca-app-pub-3940256099942544~1458002511');
  runApp(MyApp());
}

在应用中放置广告

将 AdmobBannerWidget 放置在希望广告显示的位置。

class MyApp extends StatelessWidget {
  const MyApp();
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: AdMobBannerWidget(
          adUnitId: BannerAd.testAdUnitId,
        ),
      ),
    );
  }
}

注意事项

• 无法指定广告大小
  广告大小将是 SafeArea 高度的1/8内可显示的最大尺寸。参考 AdMobBanner 的SmartBanner标准。

• 广告无法随Widget移动
  它们只是简单地出现和消失。不能将其作为滚动列表的一部分使用。

• 无法在后台运行广告
  它仅计算Widget的位置并将广告置于其前方。无法隐藏广告。

示例代码

以下是一个完整的示例代码，展示了如何使用 admob_banner_stabilizer 插件。

import 'dart:io';

import 'package:flutter/material.dart';

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

// 此示例不包含Navigator。
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FirebaseAdMob.instance.initialize(
      appId: Platform.isAndroid
          // AdMob App ID for Firebase Demo Project (Flood-It!)
          ? 'ca-app-pub-8123415297019784~2664022459'
          // 测试用GADApplicationIdentifier。参见https://developers.google.com/admob/ios/quick-start?hl=en
          : 'ca-app-pub-3940256099942544~1458002511');
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyBody(),
    );
  }
}

class MyBody extends StatefulWidget {
  const MyBody({
    Key key,
  }) : super(key: key);

  [@override](/user/override)
  _MyBodyState createState() => _MyBodyState();
}

class _MyBodyState extends State<MyBody> {
  bool isUpperPosition = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          SizedBox(height: isUpperPosition ? 50 : 150),
          Text("↓↓↓↓↓↓↓↓↓↓↓↓↓ AD HERE ↓↓↓↓↓↓↓↓↓↓↓↓↓"),
          AdMobBannerWidget(
            adUnitId: BannerAd.testAdUnitId,
            backgroundColor: Colors.yellow,
          ),
          Text("↑↑↑↑↑↑↑↑↑↑↑↑↑ AD HERE ↑↑↑↑↑↑↑↑↑↑↑↑↑"),
          RaisedButton(
              child: Text('Change Ad Position'),
              onPressed: () {
                setState(() {
                  isUpperPosition = !isUpperPosition;
                });
              })
        ],
      ),
    );
  }
}