Flutter广告集成插件flutter_ads_plugin的使用

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

Flutter广告集成插件 flutter_ads_plugin 的使用

flutter_ads_plugin 是一个简化了 Google Ads 集成的 Flutter 插件。通过这个插件,您可以快速地在您的应用中部署多种类型的广告,如 Banner 广告、插页式广告、奖励视频广告和原生广告等。

快速开始

安装

首先,在您的 pubspec.yaml 文件中添加 flutter_ads_plugin

dependencies:
  flutter_ads_plugin: ^<latest-version>

然后运行以下命令来获取依赖包:

flutter pub get

初始化

在您的 main.dart 文件中初始化 Mobile Ads SDK:

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

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

使用示例

下面是一个完整的示例,展示了如何显示不同类型的广告:

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

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

class _MyAppState extends State<MyApp> {

  // 显示奖励视频广告
  void showRewardedAd() {
    FlutterAdsRewarded.show(
      androidId: 'YOUR_ANDROID_REWARDED_AD_ID',
      iosId: 'YOUR_IOS_REWARDED_AD_ID',
      onUserEarnedReward: (view, item) {
        // 用户获得奖励时的处理逻辑
      },
      onError: (e) {
        // 错误处理逻辑
      },
      onClose: () {
        // 广告关闭时的处理逻辑
      },
    );
  }

  // 显示插页式广告
  void showInterstitialAd() {
    FlutterAdsInterstitial.show(
      androidId: 'YOUR_ANDROID_INTERSTITIAL_AD_ID',
      iosId: 'YOUR_IOS_INTERSTITIAL_AD_ID',
      onError: (e) {
        // 错误处理逻辑
      },
      onClose: () {
        // 广告关闭时的处理逻辑
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            const SizedBox(height: 24),
            // 显示横幅广告
            const FlutterAdsBanner(
              iosId: 'YOUR_IOS_BANNER_AD_ID',
              androidId: 'YOUR_ANDROID_BANNER_AD_ID',
            ),
            const SizedBox(height: 24),
            // 显示原生广告
            const FlutterAdsNative(
              androidId: 'YOUR_ANDROID_NATIVE_AD_ID',
              iosId: 'YOUR_IOS_NATIVE_AD_ID',
              templateStyle: null,
              factoryId: null,
              constraints: null,
            ),
            ElevatedButton(
                onPressed: showRewardedAd,
                child: const Text('Show Rewarded Ad')),
            const SizedBox(height: 24),
            ElevatedButton(
                onPressed: showInterstitialAd,
                child: const Text('Show Interstitial Ad')),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中集成并使用flutter_ads_plugin插件的代码示例。这个插件允许你在Flutter应用中展示广告,比如横幅广告(Banner Ads)和插屏广告(Interstitial Ads)。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_ads_plugin: ^x.y.z  # 请替换为最新版本号

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

2. 配置Android和iOS广告平台

Android

android/app/src/main/AndroidManifest.xml中添加必要的权限和广告平台配置(例如,对于AdMob):

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <!-- 添加必要的权限 -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    <application
        ... >
        <!-- AdMob App ID -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx"/>
        ...
    </application>
</manifest>

iOS

ios/Runner/Info.plist中添加AdMob App ID配置:

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx</string>

确保在Xcode中启用了必要的广告追踪权限。

3. 初始化插件并展示广告

在你的Flutter代码中,你需要初始化插件并展示广告。下面是一个简单的示例:

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

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  BannerAd? _bannerAd;
  InterstitialAd? _interstitialAd;

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

  void _initAds() async {
    // 初始化BannerAd
    String bannerAdUnitId = "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx";
    _bannerAd = BannerAd.create(adUnitId: bannerAdUnitId, size: AdSize.banner);
    _bannerAd?.load();

    // 初始化InterstitialAd
    String interstitialAdUnitId = "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx";
    _interstitialAd = InterstitialAd.create(adUnitId: interstitialAdUnitId);
    _interstitialAd?.load();

    // 监听广告加载完成事件
    _bannerAd?.addAdEventListener(
      AdEvent.loaded,
      () {
        // 可以在这里将广告添加到布局中
        print("Banner ad loaded.");
      },
    );

    _interstitialAd?.addAdEventListener(
      AdEvent.loaded,
      () {
        print("Interstitial ad loaded.");
      },
    );

    // 监听广告显示完成事件
    _interstitialAd?.addAdEventListener(
      AdEvent.closed,
      () {
        // 重新加载插屏广告
        _interstitialAd?.load();
        print("Interstitial ad closed. Reloading...");
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Ads Example"),
      ),
      body: Column(
        children: [
          // 显示横幅广告
          if (_bannerAd?.isLoaded() ?? false)
            Container(
              height: _bannerAd!.size.height.toDouble(),
              child: AdWidget(ad: _bannerAd!),
            ),
          SizedBox(height: 20),
          Center(
            child: ElevatedButton(
              onPressed: () {
                // 显示插屏广告
                if (_interstitialAd?.isLoaded() ?? false) {
                  _interstitialAd?.show();
                } else {
                  print("Interstitial ad is not loaded yet.");
                }
              },
              child: Text("Show Interstitial Ad"),
            ),
          ),
        ],
      ),
    );
  }
}

注意事项

  1. 广告单元ID:确保你使用的是真实的广告单元ID,而不是示例ID。
  2. 测试设备:在开发阶段,你可以使用AdMob的测试广告单元ID来避免产生真实的广告费用。
  3. 权限处理:确保你的应用有处理网络权限的权限声明。
  4. 错误处理:在实际应用中,你可能需要添加更多的错误处理和日志记录。

这个示例展示了如何在Flutter应用中集成横幅广告和插屏广告。你可以根据需要进一步扩展和自定义广告展示逻辑。

回到顶部