fluent_adflow_widget

Description:

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 [email protected] 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
copied to clipboard
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]
copied to clipboard
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';
copied to clipboard
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
copied to clipboard
To
platform :ios, '13.0'
copied to clipboard
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
copied to clipboard
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
}
...
}
...
copied to clipboard
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';
copied to clipboard
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");
copied to clipboard

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": "[email protected]",
"firstname": "John",
"lastname": "Smith",
"orderId": "123abc456def",
"transactionValue": "99.99",
"zip": "11211",
};

FluentAdFlowWidgetView(params: userDetails)
copied to clipboard
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": "[email protected]",
"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'),
),
]),
]));
}
}
copied to clipboard
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)
copied to clipboard

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.