Flutter广告集成插件flutter

Flutter广告集成插件flutter_adspark的使用

Flutter AdSpark Pro

这是一款优质的广告监测、增长分析、归因上报、事件管理插件（巨量广告、穿山甲）。

♻️ 持续更新 ♻️

💻 支持平台

穿山甲
巨量引擎
巨量广告

🚀 核心功能

✅ 激活
✅ 注册
✅ 支付
✅ 账户登录、登出
✅ 绑定社交账号
✅ 完成教学任务/副本
✅ 升级
✅ 创建角色
✅ 查看内容/商品详情
✅ 添加到购物车
✅ 提交购买/下单
✅ 添加支付渠道
✅ 数据检测
✅ 自定义事件
📱 可视化测试助手

🧪 示例&测试助手

为了方便开发者调试，提供了可视化助手，方便开发者查看数据上报情况。

功能接口	功能区	事件区	网络区

📃 接入文档

📌 广告系列插件（FlutterAds）

插件	描述
flutter_gromore_pro	🏆🏆🏆 帮你大幅提升广告收益，发挥出最大的用户价值
flutter_gromore_ads	字节跳动、穿山甲、GroMore 聚合 Flutter 广告开源版插件
flutter_pangle_ads	字节跳动、穿山甲 Flutter 广告插件
flutter_qq_ads	腾讯广告、广点通、优量汇 Flutter 广告插件
flutter_adspark	巨量广告/穿山甲的广告监测、增长分析、归因上报、事件管理 Flutter 版插件
flutter_adcontent	穿山甲内容输出 Flutter 版插件，支持短剧和小视频

完整示例Demo

以下是使用 flutter_adspark 插件的完整示例代码：

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

import 'package:flutter_adspark/flutter_adspark.dart';

import 'style.dart';

void main() {
  // 绑定引擎
  WidgetsFlutterBinding.ensureInitialized();
  init();
  runApp(const MyApp());
}

/// 初始化
Future<void> init() async {
  bool? result = await FlutterAdspark.init("appid", "huawei");
  debugPrint("FlutterAdspark init result: $result");
}

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FlutterAds Adspark Demo'),
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Center(
              child: Column(
                children: [
                  kSizedBox10,
                  kSizedBox10,
                  ListTile(
                    dense: true,
                    title: const Text('🚀 注册'),
                    onTap: () {
                      // 触发注册事件
                      FlutterAdspark.registerEvent("wechat", true);
                    },
                  ),
                  kDivider,
                  ListTile(
                    dense: true,
                    title: const Text('🛒 下单'),
                    onTap: () {
                      // 添加订单事件
                      FlutterAdspark.addEvent(GrownEventType.order, params: {
                        "orderId": "54323454323",
                        "amount": 2000,
                        "count": 1,
                      });
                    },
                  ),
                  kDivider,
                  ListTile(
                    dense: true,
                    title: const Text('📱 广告变现'),
                    onTap: () {
                      // 添加广告变现事件
                      FlutterAdspark.addEvent(GrownEventType.ad_purchase, params: {
                        "type": "激励视频",
                        "eCPM": "20000",
                      });
                    },
                  ),
                  kDivider,
                  kSizedBox10,
                  kSizedBox10,
                  const Center(
                      child: Text("FlutterAds (致力于构建优质的 Flutter 广告插件)")),
                  kSizedBox10,
                  const Center(
                      child: Text(
                          "https://github.com/FlutterAds/flutter_adspark")),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

bupafengyu 1楼

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

当然，以下是一个关于如何在Flutter应用中集成flutter_adspark插件的代码示例。这个示例将展示如何初始化插件并在应用中显示一个广告。请注意，实际使用中你需要替换示例中的广告ID和其他配置信息。

首先，确保你已经在pubspec.yaml文件中添加了flutter_adspark依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_adspark: ^最新版本号  # 替换为实际的最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤进行广告集成：

初始化AdSpark插件

在你的主应用文件（通常是main.dart）中，初始化AdSpark插件。通常，这会在应用的入口点进行。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化AdSpark插件
  AdSpark.initialize(
    appId: '你的App ID',  // 替换为你的实际App ID
    testMode: true,  // 如果在测试模式，设置为true；发布时设置为false
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AdSpark Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

显示广告

在你的主页面或其他需要显示广告的页面中，使用AdSpark插件提供的方法来加载和显示广告。以下是一个简单的示例，展示如何显示一个横幅广告（Banner Ad）。

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

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

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

  @override
  void initState() {
    super.initState();
    // 创建横幅广告实例
    _bannerAd = BannerAd(
      adUnitId: '你的横幅广告ID',  // 替换为你的实际横幅广告ID
      adSize: AdSize.banner,
      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');
          _bannerAd?.dispose();  // 广告关闭时释放资源
        },
      ),
    )..load();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter AdSpark Demo'),
      ),
      body: Center(
        child: _bannerAd != null && _bannerAd!.isLoaded()
            ? Container(
                height: _bannerAd!.size.height.toDouble(),
                child: AdWidget(ad: _bannerAd!),
              )
            : CircularProgressIndicator(),  // 广告加载中显示加载指示器
      ),
    );
  }

  @override
  void dispose() {
    _bannerAd?.dispose();  // 确保在组件销毁时释放广告资源
    super.dispose();
  }
}

在这个示例中，我们创建了一个BannerAd实例，并在initState方法中加载它。当广告加载成功后，我们在页面上显示它；如果加载失败或广告关闭，我们相应地处理这些情况。

请注意，flutter_adspark插件的具体API和用法可能会随着版本的更新而有所变化，因此建议查阅最新的官方文档和示例代码以获取最准确的信息。此外，确保你遵守广告网络的使用条款和政策。