fluent_adflow_widget 1.0.1-beta.1

Fluent AdFlow Widget

Flutter SDK Integration Guide

Introduction

This comprehensive guide provides a step-by-step outline for our Flutter mobile app publishers to integrate the adflow experience via the adflow Flutter SDK seamlessly into their mobile app.

Overview

The adflow Flutter SDK facilitates seamless integration, enabling adflow's features in your Flutter mobile apps. This SDK is lauded for its lightweight, security, and user-friendly design.

Getting Started

If you have not already spoken with a Fluent representative about becoming one of our publisher partners, don’t hesitate to contact [e-mail] to get started. Once you have completed all necessary contractual agreements, you will be assigned a Partner ID unique to your account.

E-Commerce Integration

As a valued adflow partner, elevate your app's frontend experience with our Flutter SDK. Integrate e-commerce enhancements and mesmerize users with premier third-party offers. According to your app's layout, the SDK can display adflow placements organically anywhere within your existing app experiences.

With adflow added to your mobile application, you will have the ability to customize styling to match your brand as well as exercise full autonomy over customer and transaction data, ensuring a native and personalized user experience.

Integrate the Fluent Flutter adflow SDK into your Flutter application

Add as a dependency

Install the Flutter adflow SDK into your Flutter project with the following command:

flutter pub add fluent_adflow_widget

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  fluent_adflow_widget: ^[latest_version]

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:fluent_adflow_widget/FluentAdFlowWidget.dart';

Configure the SDK for iOS

If you do not have an iosfolder in your project please see the troubleshooting steps below.

The iOS SDK requires version 13 or greater. Please ensure the iOS version in your applications' Podfile (usually located at the top-level of the ios directory in your Flutter application) is set to 13.0 or greater. For example, you may need to change:

platform :ios, min_ios_version_supported

To

platform :ios, '13.0'

Additionally, you will need to update the Deployment Target in Xcode to 13.0:

You will also need to update the signing certificate

After installing the dart package, you will need to install the iOS dependencies.

cd ios && pod install

NOTE: For Mac M1 architecture issues, use:

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

Configure the SDK for Android

The Android SDK requires minSdkVersion 24 or greater. you may need to make the following update in your app/build.gradle:

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

Initialize the SDK

The SDK exposes a component you can add to your application code.

To import the component add the following statement:

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

The SDK exposes one method to initialize the SDK (init). This method requires your API key and a referer. After the SDK is initialized you will be able to use the FluentAdFlowWidgetView component in your application.

You can initialize the SDK with the following code:

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

NOTE: We recommend adding the initialization of the SDK in the bootstrapping of your application rather than where you plan to use the SDK (e.g. by calling the show() method).

Then, you can construct parameters to be passed to the SDK. These parameters are outlined below (see here), but here is an example of how to construct a value to be passed to the SDK. These parameters are data about the user that will help build a more unique adflow experience for each customer.

var userDetails = {
    "email": "[e-mail]",
    "firstname": "John",
    "lastname": "Smith",
    "orderId": "123abc456def",
    "transactionValue": "99.99",
    "zip": "11211",
};

FluentAdFlowWidgetView(params: userDetails)

Below is a full example of implementing the SDK as either an embedded view or a pop up view:

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) {
              //for showing backdrop when ad loads
              setState(() {
                isDialogOpen = isAdShown;
              });
              //close dialogue when ad is hidden
              if (!isAdShown) {
                if (Navigator.canPop(context)) {
                  Navigator.of(context, rootNavigator: true).pop(context);
                }
              }
              //call onAdShow callback of parent widget
              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> {
  // late Widget content;
  bool isDialogOpen = false;
  bool showEmbededAd = false;
  bool showPopUpAd = false;
  //user details
  var userDetails = {
    "email": "[e-mail]",
    "firstname": "John",
    "lastname": "Smith",
    "orderId": "123abc456def",
    "transactionValue": "99.99",
    "zip": "11211",
  };

  @override
  void initState() {
    super.initState();
    FluentAdFlowWidget.init("api-key", "referer");
  }

  void onAdShown(bool isShown) {
    setState(() {
      if (!isShown) showEmbededAd = false;
      showPopUpAd = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Stack(children: [
          ListView(children: [
            Container(
              height: 50,
              color: Colors.amber[600],
              child: const Center(child: Text('Upper View')),
            ),
            //embedded ad view
            showEmbededAd
                ? FluentAdFlowWidgetView(
                    onAdShow: onAdShown,
                    params: userDetails,
                  )
                : Container(),
            Container(
              height: 50,
              color: Colors.amber[600],
              child: const Center(child: Text('Lower View')),
            ),
            ElevatedButton(
              onPressed: () => {
                //open ad view in popup dialog
                showDialog(
                    context: context,
                    barrierColor: Color(0x01000000),
                    builder: (context) => PopupModule(
                        onAdShow: (isAdShown) {
                          if (!isAdShown) {
                            if (Navigator.canPop(context)) {
                              Navigator.of(context, rootNavigator: true)
                                  .pop(context);
                            }
                          }
                          onAdShown(isAdShown);
                        },
                        params: userDetails)),
              },
              child: const Text('Popup View'),
            ),

            ElevatedButton(
              onPressed: () => {
                setState(() {
                  showEmbededAd = true;
                })
              },
              child: const Text('Embedded View'),
            ),
          ]),
        ]));
  }
}

Optional Event Handler

onAdShow- If isAdShown is returned from the SDK as true there will be ads shown to the user. If isAdShown is false there will not be any ads shown to the user. Your application can do any logic based on those values in your optionalEvent handler. After a user has viewed all the ads or there are no ads to be shown at all isAdShown will be false.

const optionalEvent = (isAdShown) => {
    // Your logic here
};

FluentAdFlowWidgetView(onAdShow: onAdShown, params: userDetails)

NOTE: adflow can be displayed at any width greater than 320px and will automatically adjust to your content area. The limit for adflow to render is no less than 320px.