CPX Research SDK Flutter

Monetize your product with fun surveys.

We will make it easy for you: Simply implement our solution and be ready to start monetizing your product immediately! Let users earn your virtual currency by simply participating in exciting and well paid online surveys!

This SDK is owned by MakeOpinion GmbH.

Learn more.

Prerequisites
Preview
Installation
Usage
Logging
Changelog

Prerequisites

Android SDK 19 (KitKat) or newer
iOS Target 9 or newer

Preview

Videotutorial

Click the image to watch a step-by-step tutorial on how to use the SDK.

Installation

Add the package to the dependencies in your pubspec.yaml file. ❗️ Null-Safety: with version 0.4.0 we introduced null-safety.

dependencies:
  cpx_research_sdk_flutter:
    git: 
      url: https://github.com/MakeOpinionGmbH/cpx-research-SDK-Flutter.git
      path: cpx_research_sdk_flutter
      // without a ref Flutter uses the main branch by default
      // use ref to get different versions, like 0.3.1 or 0.4.1
      // ref: 0.4.1

Now import the package in your dart files and use it like any other Flutter package.

import 'package:cpx_research_sdk_flutter/cpx.dart';

Usage

Getting Started (Easy)

Simply add the CPXResearch Widget in a Stack Widget anywhere in your app.

Only Specific Views

To display the CPXResearch Widget only in specific views, add it inside those views in a Stack Widget (example in Demo App class SecondRoute).

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: Stack(
        children: [
          Center(
            child: Text(
              'This is a Details Screen',
            ),
          ),
          // Easy CPX
          CPXResearch(
            config: new CPXConfig(
                appID: "<Your app id>",
                userID: "<Your external user id>",
                sidebarWidget: new CPXStyle())),
        ],
      ),
  );
}

Entire App Overlay

For an entire app overlay add it to your MaterialApp Widgets builder (example in Demo App class MyApp).

@override
Widget build(BuildContext context) {
  return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'CPX Flutter Demo'),
      // add following code:
      builder: (context, child) {
        return Material(
          child: Stack(
            children: [
              child,
              // Easy CPX
              CPXResearch(
                  config: new CPXConfig(
                      appID: "<Your app id>",
                      userID: "<Your external user id>",
                      sidebarWidget: new CPXStyle())),
            ],
          ),
        );
      });
}

Getting Started (Advanced)

Customize every CPX Widget as it fits your needs

CPXStyle cornerstyle = new CPXStyle(
  position: WidgetPosition.CornerTopRight,
  width: 100,
  height: 100,
  text: "click here",
  textSize: 10,
  textColor: Colors.white,
  backgroundColor: Colors.orange,
  roundedCorners: 100,
);

CPXStyle sidebarstyle = new CPXStyle(
  position: WidgetPosition.SideLeft,
  width: 50,
  height: 200,
  singleSurvey: true,                         // Add this line, if the webview should show a single survey
  text: "New Survey available",
  textSize: 10,
  textColor: Colors.white,
  backgroundColor: Colors.orange,
  roundedCorners: 100,
);

CPXStyle notificationstyle = new CPXStyle(
  position: WidgetPosition.ScreenCenterBottom,
  width: 200,
  height: 100,
  text: "New Survey\nParticipate now!",
  textSize: 10,
  textColor: Colors.white,
  backgroundColor: Colors.orange,
  roundedCorners: 20,
);

CPXConfig cpxConfig = new CPXConfig(
    appID: "<Your app id>",
    userID: "<Your external user id>",
    cornerWidget: cornerstyle,                // Add this line, to add the corner widget to the view
    sidebarWidget: sidebarstyle,              // Add this line, to add the sidebar widget to the view
    notificationWidget: notificationstyle);   // Add this line, to add the notification widget to the view

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'CPX Flutter Demo'),
        // add following code:
        builder: (context, child) {
          return Material(
            child: Stack(
              children: [
                child, 
                // Advanced CPX
                CPXResearch(config: config)
              ],
            ),
          );
        });
  }

Getting Started (Expert)

Add the CPXResearch Widget with an easy config, but leave the styles empty. Now handle the CPXResearch Response with the listeners below and use your own Widgets to display the surveys.

Widget build(BuildContext context) {
  CPXConfig cpxConfig = new CPXConfig(
      appID: "<Your app id>",
      userID: "<Your external user id>");

  return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'CPX Flutter Demo'),
      // add following code:
      builder: (context, child) {
        return Material(
          child: Stack(
            children: [
              child, 
              // Expert CPX
              CPXResearch(config: cpxConfig)
            ],
          ),
        );
      });
}

CPX Survey Cards

First add the CPXResearch Widget with an easy config as in Getting Started (Expert) and leave the styles empty again. Now add the CPXSurveyCards Widget anywhere within the Material App to display the Cards.

Easy

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Flutter SDK Demo App'),
        CPXSurveyCards(),
      ],
    ),
  );
}

Advanced

To customize the styling and behavior of the cards, add the following properties.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Flutter SDK Demo App'),
        CPXSurveyCards(
          hideIfEmpty: true,        // use either the 'hideIfEmpty' or the 'noSurveysWidget' property
          noSurveysWidget: Text('I show up, if there are no surveys available'),
          config: CPXCardConfig(
            accentColor: Colors.green,
            cardBackgroundColor: Colors.black,
            cardCount: 2,
            inactiveStarColor: Colors.grey,
            starColor: Colors.lightGreenAccent,
            payoutColor: Colors.orange,
            textColor: Colors.white
          ),
        ),
      ],
    ),
  );
}

Additional functionality of the SDK

Add surveys listener

CPXData.cpxData.surveys.addListener(() {
  // YOUR CODE - access surveys via CPXData.cpxData.surveys
});

Add transaction listener

CPXData.cpxData.transactions.addListener(() {
  // YOUR CODE - access transactions via CPXData.cpxData.transactions
});

Add browser state listener

Controller.controller.areCPXWidgetsDisplayed.addListener(() {
  // YOUR CODE - access browser state via Controller.controller.areCPXWidgetsDisplayed
});

Fetch all available surveys and transactions for the user

Add surveys and transactions listeners as shown before, to access the response

fetchCPXSurveysAndTransactions();

Mark a transaction as paid

Add surveys and transactions listeners as shown before, to access the response

markTransactionAsPaid("<transactionID>", "<messageID>");

Open WebView

Open the WebView (optionally with a specific survey ID)

showBrowser("surveyID");

Logging

Add the CPXLogger

The SDK provides a Logger.

@override
void initState() {
  CPXLogger.enableLogger(true);   // Enable the Logger
  CPXLogger.log("message");       // Use the Logger functionality
  CPXLogger.getLogs;              // Get all SDK logs from memory as list
  super.initState();
}

Android

To allow haptic feedback from the package you probably have to add the following code in the AndroidManifest.xml

<uses-permission android:name="android.permission.VIBRATE" />

On some devices it might be necessary to add the internet permission to the AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

makeopiniongmbh / cpx-research-sdk-flutter Goto Github PK