Flutter广告流插件fluent_adflow_widget的使用

Flutter广告流插件fluent_adflow_widget的使用

引言

本指南提供了详细的步骤，帮助Flutter移动应用发布者通过adflow Flutter SDK无缝地将广告流体验集成到他们的移动应用中。

概述

adflow Flutter SDK简化了集成过程，使你的Flutter移动应用能够轻松启用广告流功能。该SDK因其轻量级、安全性及用户友好的设计而受到称赞。

开始使用

如果你还没有与Fluent代表联系以成为我们的合作伙伴之一，请发送邮件至sales@fluentco.com开始合作。完成所有必要的合同协议后，你将会被分配一个唯一的合作伙伴ID。

电子商务集成

作为宝贵的adflow合作伙伴，通过我们的Flutter SDK提升你的应用前端体验。集成电子商务增强功能，并用顶级第三方优惠吸引用户。根据你的应用布局，SDK可以在现有应用体验中的任何位置有机地展示adflow插件。

将Fluent Flutter adflow SDK集成到你的Flutter应用中

添加为依赖项

在你的Flutter项目中安装adflow Flutter SDK，使用以下命令：

flutter pub add fluent_adflow_widget

这将在你的包的pubspec.yaml文件中添加一行（并运行隐式的flutter pub get）：

dependencies:
  fluent_adflow_widget: ^[latest_version]

或者，你的编辑器可能支持flutter pub get。查阅你的编辑器文档了解更多详情。

导入它

现在在你的Dart代码中可以使用：

import 'package:fluent_adflow_widget/FluentAdFlowWidget.dart';

配置SDK用于iOS

如果你的项目中没有ios文件夹，请参阅下面的故障排除步骤。

iOS SDK需要版本13或更高版本。请确保你的应用程序Podfile中的iOS版本设置为13.0或更高（通常位于Flutter应用的ios目录下的顶层）。例如，你可能需要更改：

platform :ios, min_ios_version_supported

为：

platform :ios, '13.0'

此外，你需要在Xcode中更新部署目标到13.0： [Xcode]

你还需要更新签名证书。

安装完dart包后，你需要安装iOS依赖：

cd ios && pod install

注意： 对于Mac M1架构问题，请使用：

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

配置SDK用于Android

Android SDK需要minSdkVersion 24或更高版本。你可能需要在app/build.gradle文件中进行以下更新：

...
android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true,
        minSdkVersion 24
    }
    ...
}
...

初始化SDK

SDK暴露了一个组件，你可以将其添加到你的应用代码中。

要导入该组件，请添加以下语句：

import 'package:flutter/material.dart';
import 'package:fluent_adflow_widget/FluentAdFlowWidget.dart';

SDK暴露了一个方法来初始化SDK（init）。此方法需要你的API密钥和引用。SDK初始化后，你就可以在应用中使用FluentAdFlowWidgetView组件。

你可以使用以下代码初始化SDK：

FluentAdFlowWidget.init("api-key", "referer");

注意： 我们建议在应用启动时初始化SDK（而不是在计划使用SDK的地方调用show()方法）。

然后，你可以构造参数传递给SDK。这些参数如下所示（见此处），但这里是一个如何构造值传递给SDK的例子。这些参数是关于用户的数据，有助于为每个客户提供更独特的广告流体验。

var userDetails = {
    "email": "jsmith@gmail.com",
    "firstname": "John",
    "lastname": "Smith",
    "orderId": "123abc456def",
    "transactionValue": "99.99",
    "zip": "11211",
};

FluentAdFlowWidgetView(params: userDetails)

下面是实现SDK的完整示例，既可以嵌入视图也可以弹出视图：

import 'package:flutter/material.dart';
import 'package:fluent_adflow_widget/FluentAdFlowWidget.dart';

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

class PopupModule extends StatefulWidget {
  final Function(bool)? onAdShow;
  Map<String, String>? params;
  PopupModule({this.onAdShow, this.params});
  @override
  State<PopupModule> createState() => PopupModuleState();
}

class PopupModuleState extends State<PopupModule> {
  bool isDialogOpen = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      color: isDialogOpen
          ? const Color.fromARGB(100, 0, 0, 0)
          : const Color(0x01000000),
      constraints: const BoxConstraints.expand(),
      child: Center(
        widthFactor: 0.8,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 20),
          child: FluentAdFlowWidgetView(
            onAdShow: (isAdShown) {
              // 显示背景层当广告加载时
              setState(() {
                isDialogOpen = isAdShown;
              });
              // 当广告隐藏时关闭对话框
              if (!isAdShown) {
                if (Navigator.canPop(context)) {
                  Navigator.of(context, rootNavigator: true).pop(context);
                }
              }
              // 调用父组件的onAdShow回调
              if (widget.onAdShow != null) {
                widget.onAdShow!(isAdShown);
              }
            },
            params: widget.params,
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AdFlow Flutter App',
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  bool isDialogOpen = false;
  bool showEmbededAd1 = false;
  bool showEmbededAd2 = false;
  bool showPopUpAd = false;
  // 用户详细信息
  var userDetails = {
    "email": "jsmith@gmail.com",
    "firstname": "John",
    "lastname": "Smith",
    "orderId": "123abc456def",
    "transactionValue": "99.99",
    "zip": "11211",
  };

  @override
  void initState() {
    super.initState();
    FluentAdFlowWidget.init(
        "e8699957-af84-479d-af1e-dd95e800da77", "sdk_prod_test");
  }

  void onAdShownEmbeded1(bool isShown) {
    print("^^^^^^^^^ onAdShown ^^^^^^^^^" + (isShown ? "true" : "false"));
    setState(() {
      if (!isShown) showEmbededAd1 = false;
    });
  }

  void onAdShownEmbeded2(bool isShown) {
    print("^^^^^^^^^ onAdShown ^^^^^^^^^" + (isShown ? "true" : "false"));
    setState(() {
      if (!isShown) showEmbededAd2 = false;
    });
  }

  void onAdShownPopup(bool isShown) {
    print("^^^^^^^^^ onAdShown ^^^^^^^^^" + (isShown ? "true" : "false"));
    setState(() {
      showPopUpAd = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Stack(children: [
          ListView(children: [
            showEmbededAd1
                ? FluentAdFlowWidgetView(
                    onAdShow: onAdShownEmbeded1,
                    params: userDetails,
                  )
                : Container(),
            Container(
              height: 50,
              color: Colors.amber[600],
              child: const Center(child: Text('上部视图')),
            ),
            // 嵌入式广告视图

            Container(
              height: 50,
              color: Colors.amber[600],
              child: const Center(child: Text('下部视图')),
            ),
            showEmbededAd2
                ? FluentAdFlowWidgetView(
                    onAdShow: onAdShownEmbeded2,
                    params: userDetails,
                  )
                : Container(),
            ElevatedButton(
              onPressed: () => {
                // 在弹出对话框中打开广告视图
                showDialog(
                    context: context,
                    barrierColor: Color(0x01000000),
                    builder: (context) => PopupModule(
                        onAdShow: onAdShownPopup, params: userDetails)),
              },
              child: const Text('弹出视图'),
            ),

            ElevatedButton(
              onPressed: () => {
                setState(() {
                  showEmbededAd1 = true;
                })
              },
              child: const Text('嵌入式视图 1'),
            ),
            ElevatedButton(
              onPressed: () => {
                setState(() {
                  showEmbededAd2 = true;
                })
              },
              child: const Text('嵌入式视图 2'),
            ),
          ]),
        ]));
  }
}

可选事件处理器

onAdShow - 如果从SDK返回的isAdShown为true，则会向用户展示广告。如果isAdShown为false，则不会向用户展示广告。你的应用可以根据这些值执行任何逻辑。在用户查看完所有广告或没有任何广告可展示时，isAdShown将为false。

const optionalEvent = (isAdShown) => {
    // 你的逻辑在这里
};

FluentAdFlowWidgetView(onAdShow: onAdShown, params: userDetails)