Flutter广告集成插件ad_base的使用

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

Flutter广告集成插件ad_base的使用

本文档描述了如何使用 ad_base 插件。如果你将此插件发布到 pub.dev,此文档的内容将会出现在插件的首页。

Features

  • 支持多种广告形式(如 Banner 广告、Interstitial 广告等)。
  • 提供统一的 API 接口,方便开发者快速集成广告功能。
  • 兼容多个广告平台(如 AdMob、Facebook Audience Network 等)。

Getting started

在使用 ad_base 插件之前,你需要确保已经配置好相关的广告平台账号,并在项目的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  ad_base: ^1.0.0

然后运行 flutter pub get 命令以安装依赖。

Usage

初始化插件

在使用广告功能之前,需要先初始化插件。通常在应用启动时调用初始化方法。

import 'package:ad_base/ad_base.dart';

void main() {
  // 初始化广告插件
  AdBase.initialize();
  runApp(MyApp());
}

添加 Banner 广告

Banner 广告是一种常用于页面底部的广告形式。

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  BannerAd? _bannerAd;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 创建 Banner 广告实例
    _bannerAd = BannerAd(
      adUnitId: 'your_banner_ad_unit_id', // 替换为你的 Banner 广告单元 ID
      size: AdSize.BANNER,
      listener: (event) {
        if (event == AdEvent.loaded) {
          print('Banner 广告加载成功');
        } else if (event == AdEvent.failedToLoad) {
          print('Banner 广告加载失败');
        }
      },
    );
    // 加载 Banner 广告
    _bannerAd?.load();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Banner 广告示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示 Banner 广告
            Container(
              width: _bannerAd?.size.width.toDouble(),
              height: _bannerAd?.size.height.toDouble(),
              child: _bannerAd?.view,
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    // 销毁 Banner 广告实例
    _bannerAd?.dispose();
    super.dispose();
  }
}

添加 Interstitial 广告

Interstitial 广告是一种全屏广告形式,通常在用户完成某个操作后展示。

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

class MyInterstitialPage extends StatelessWidget {
  InterstitialAd? _interstitialAd;

  MyInterstitialPage() {
    // 创建 Interstitial 广告实例
    _interstitialAd = InterstitialAd(
      adUnitId: 'your_interstitial_ad_unit_id', // 替换为你的 Interstitial 广告单元 ID
      listener: (event) {
        if (event == AdEvent.loaded) {
          print('Interstitial 广告加载成功');
        } else if (event == AdEvent.closed) {
          print('Interstitial 广告关闭');
        }
      },
    );
    // 加载 Interstitial 广告
    _interstitialAd?.load();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Interstitial 广告示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 展示 Interstitial 广告
            _interstitialAd?.show();
          },
          child: Text('展示 Interstitial 广告'),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    // 销毁 Interstitial 广告实例
    _interstitialAd?.dispose();
    super.dispose();
  }
}

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

1 回复

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


ad_base 是一个用于 Flutter 应用广告集成的插件,它提供了一个统一的接口来集成多种广告平台(如 AdMob、Facebook Audience Network 等)。通过 ad_base,开发者可以更方便地管理和展示广告,而无需为每个广告平台编写单独的代码。

以下是使用 ad_base 插件的基本步骤:

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  ad_base: ^latest_version

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

2. 初始化广告插件

在应用的 main.dart 文件中初始化 ad_base 插件。通常,你需要在 main() 函数中调用 AdBase.initialize() 方法:

import 'package:ad_base/ad_base.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AdBase.initialize(
    adConfig: AdConfig(
      admobAppId: 'your_admob_app_id',
      facebookAppId: 'your_facebook_app_id',
      // 其他广告平台的配置
    ),
  );
  runApp(MyApp());
}

3. 创建广告实例

在需要展示广告的地方,创建广告实例。ad_base 支持多种广告类型,如横幅广告、插页广告、激励视频广告等。

例如,创建一个横幅广告:

import 'package:ad_base/ad_base.dart';

class MyBannerAd extends StatefulWidget {
  @override
  _MyBannerAdState createState() => _MyBannerAdState();
}

class _MyBannerAdState extends State<MyBannerAd> {
  BannerAd? _bannerAd;

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

  void _loadBannerAd() {
    _bannerAd = BannerAd(
      adUnitId: 'your_banner_ad_unit_id',
      size: AdSize.banner,
      listener: AdListener(
        onAdLoaded: (Ad ad) {
          print('Banner ad loaded.');
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Banner ad failed to load: $error');
        },
      ),
    );
    _bannerAd?.load();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: _bannerAd != null
          ? AdWidget(ad: _bannerAd!)
          : SizedBox.shrink(),
    );
  }

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

4. 展示广告

将广告实例添加到你的 UI 中。例如,在 MyBannerAdbuild 方法中,将 AdWidget 添加到你的布局中。

5. 处理广告事件

通过 AdListener 来处理广告事件,如广告加载成功、加载失败、用户点击广告等。

6. 其他广告类型

ad_base 还支持其他广告类型,如插页广告、激励视频广告等。你可以根据需要创建相应的广告实例并展示。

例如,创建一个插页广告:

InterstitialAd? _interstitialAd;

void _loadInterstitialAd() {
  InterstitialAd.load(
    adUnitId: 'your_interstitial_ad_unit_id',
    request: AdRequest(),
    adLoadCallback: InterstitialAdLoadCallback(
      onAdLoaded: (InterstitialAd ad) {
        _interstitialAd = ad;
        print('Interstitial ad loaded.');
      },
      onAdFailedToLoad: (LoadAdError error) {
        print('Interstitial ad failed to load: $error');
      },
    ),
  );
}

void _showInterstitialAd() {
  if (_interstitialAd != null) {
    _interstitialAd?.show();
  } else {
    print('Interstitial ad is not ready yet.');
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!