Flutter广告集成插件google_mobile_ads_ext的使用

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

Flutter广告集成插件google_mobile_ads_ext的使用

如果您使用的是 google_mobile_ads,可能会注意到它仍然缺少一些AdMob功能。

这个插件是为了填补这些功能缺失,直到 google_mobile_ads 实现它们。

前提条件

您应该添加并设置 google_mobile_ads

开始使用

要在您的 pubspec.yaml 文件中作为依赖项添加 google_mobile_ads_ext

dependencies:
  google_mobile_ads_ext: ^最新版本号

然后运行 flutter pub get 来获取新包。

特性

目前,该插件支持视频广告音量控制。但您可以欢迎提交PR以实现其他所需的功能。

全局设置

在原生SDK中,您可以控制视频广告的音量和静音状态。

视频广告音量控制

插件提供了以下方法:

  • setAppVolume() - 用于向Mobile Ads SDK报告相对应用音量。
  • setAppMuted() - 用于通知SDK应用音量已被静音。

使用方法

您可以直接调用静态方法,例如:

await GoogleMobileAdsExt.setAppMuted(true);

或者使用扩展方法对 MobileAds(确保导入库):

import 'package:google_mobile_ads_ext/google_mobile_ads_ext.dart';

// 一些代码

await MobileAds.instance.setAppVolume(true);

这取决于您的偏好。

示例代码

以下是一个完整的示例代码,展示了如何使用 google_mobile_ads_ext 插件来控制视频广告的音量和静音状态。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  double _value = 1;
  bool _muted = false;
  bool _pending = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final nextVal = _value == 1 ? .5 : 1.0;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Builder(
          builder: (context) {
            Widget res = Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    child: Text(_muted ? '取消静音' : '静音'),
                    onPressed: () async {
                      final val = !_muted;

                      await GoogleMobileAdsExt.setAppMuted(val);
                      // 可选:
                      // await MobileAds.instance.setAppMuted(val);

                      setState(() {
                        _muted = val;
                      });
                    },
                  ),
                  ElevatedButton(
                    child: Text('设置音量 $nextVal'),
                    onPressed: () async {
                      await GoogleMobileAdsExt.setAppVolume(nextVal);
                      // 可选:
                      // await MobileAds.instance.setAppVolume(val);

                      _showMessage(context, '音量已设置为 $nextVal');

                      setState(() {
                        _value = nextVal;
                      });
                    },
                  ),
                  ElevatedButton(
                    child: const Text('显示广告'),
                    style: TextButton.styleFrom(
                      backgroundColor: Colors.yellowAccent,
                      primary: Colors.black54,
                    ),
                    onPressed: _showAds,
                  ),
                ],
              ),
            );

            if (_pending) {
              res = Stack(
                children: [
                  res,
                  _buildPending(context),
                ],
              );
            }

            return res;
          },
        ),
      ),
    );
  }

  Widget _buildPending(BuildContext context) {
    return Stack(
      children: const [
        Opacity(
          opacity: 0.3,
          child: ModalBarrier(dismissible: false, color: Colors.grey),
        ),
        Center(
          child: CircularProgressIndicator(),
        ),
      ],
    );
  }

  Future<void> _showAds() async {
    _setPending(true);

    // 插屏视频广告:
    const adId = 'ca-app-pub-3940256099942544/8691691433';

    await InterstitialAd.load(
      adUnitId: adId,
      request: const AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) => _setPending(false),
          );
          ad.show();
        },
        onAdFailedToLoad: (error) => _setPending(false),
      ),
    );
  }

  void _showMessage(BuildContext context, String message) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text(message),
      duration: const Duration(seconds: 1),
    ));
  }

  void _setPending(bool value) {
    setState(() {
      _pending = value;
    });
  }
}

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

1 回复

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


当然,以下是如何在Flutter应用中集成和使用google_mobile_ads_ext插件来显示广告的示例代码。这个插件是google_mobile_ads的一个扩展,提供了一些额外的功能和更精细的控制。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: ^x.y.z  # 请替换为最新版本号
  google_mobile_ads_ext: ^a.b.c  # 请替换为最新版本号

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

2. 初始化广告

在你的应用入口文件(通常是main.dart)中初始化Mobile Ads SDK:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

3. 配置广告单元ID

在你的应用中,你需要配置广告单元ID。这些ID通常是从Google AdMob控制台获取的。

final BannerAd myBanner = BannerAd(
  adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
  size: AdSize.banner,
  request: AdRequest(
    keywords: <String>['foo', 'bar'],
    contentUrl: 'http://www.example.com',
    // 其他请求参数...
  ),
  listener: BannerAdListener(
    onAdLoaded: () {
      print('Banner Ad loaded.');
    },
    onAdFailedToLoad: (AdError error) {
      print('Banner Ad failed to load: ${error.message}');
    },
    onAdOpened: () {
      print('Banner Ad opened.');
    },
    onAdClosed: () {
      print('Banner Ad closed.');
    },
    onAdImpression: () {
      print('Banner Ad impression.');
    },
  ),
);

4. 显示广告

在你的页面或组件中显示广告。例如,你可以在一个ColumnStack中放置一个AdWidget

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    myBanner.load();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Ad Integration'),
      ),
      body: Column(
        children: <Widget>[
          // 其他内容...
          myBanner.isLoaded
              ? Center(child: AdWidget(ad: myBanner))
              : Center(child: CircularProgressIndicator()),
          // 其他内容...
        ],
      ),
    );
  }
}

5. 奖励视频广告示例

除了横幅广告,你还可以集成奖励视频广告。以下是如何加载和显示奖励视频广告的示例:

final RewardedAd myRewardedAd = RewardedAd(
  adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
  request: AdRequest(),
  listener: RewardedAdListener(
    onAdLoaded: () {
      print('Rewarded Ad loaded.');
      myRewardedAd.show();
    },
    onAdFailedToLoad: (AdError error) {
      print('Rewarded Ad failed to load: ${error.message}');
    },
    onAdOpened: () => print('Rewarded Ad opened.'),
    onAdClosed: () => print('Rewarded Ad closed.'),
    onUserEarnedReward: (RewardItem reward) {
      print('User earned reward. ${reward.amount} amount. ${reward.type}');
    },
  ),
);

// 在某个按钮点击事件中加载和显示奖励视频广告
void _showRewardedAd() {
  myRewardedAd.load();
}

在UI中添加一个按钮来触发_showRewardedAd方法:

ElevatedButton(
  onPressed: _showRewardedAd,
  child: Text('Show Rewarded Ad'),
),

总结

以上代码展示了如何在Flutter应用中集成和使用google_mobile_ads_ext插件来显示横幅广告和奖励视频广告。请确保你已经在Google AdMob控制台中创建了相应的广告单元,并将正确的adUnitId替换到代码中。此外,注意处理广告加载失败的情况,并提供用户友好的反馈。

回到顶部