1. Home
  2. Developer Guides
  3. Flutter
  4. Apptentive SDK Flutter Plugin Guide

Apptentive SDK Flutter Plugin Guide

Add Apptentive

Add Apptentive Flutter as a dependency

Run this command in your Flutter project to add Apptentive_Flutter as a dependency:

$ flutter pub add apptentive_flutter

It will add this line to your project’s pubspec.yaml:

dependencies:
  apptentive_flutter: ^<Latest Version>

Register Apptentive

Import Apptentive to your project:

import 'package:apptentive_flutter/apptentive_flutter.dart';

Register Apptentive when your app starts. Do this in your app’s initState() function.

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // Initialize Apptentive on app startup
    initializeApptentive();
}

You will need to make at least two Apptentive Dashboards for your Flutter app, one for Android and one for iOS. Upon initialization, detect which platform your customer is using to properly set which Apptentive Dashboard key and signature the Apptentive SDK will be registered with. You can find your key and signature by going to Settings > API & Development for the targeted app.

import 'dart:io' show Platform;

...

Future<void> initializeApptentive() async {
    final String apptentiveKey;
    final String apptentiveSignature;
    if (Platform.isAndroid) {
      apptentiveKey = "<YOUR_ANDROID_KEY>";
      apptentiveSignature = "<YOUR_ANDROID_SIGNATURE>";
    } else if (Platform.isIOS) {
      apptentiveKey = "<YOUR_IOS_KEY>";
      apptentiveSignature = "<YOUR_IOS_SIGNATURE>";
    } else {
      ...
    }
    ...
}

Once you set the correct key and signature, use them to register the Apptentive SDK by creating an Apptentive Configuration. Inside the Apptentive Configuration, also set the log level for logs printed by the SDK while your app is running. It is recommended to keep it at LogLevel.debug while developing, and LogLevel.info for production.

Finally, register Apptentive using the configuration you created using the register() function. It a bool saying if it was successfully registered or not.

Future<void> initializeApptentive() async {
  ...
  final ApptentiveConfiguration configuration = ApptentiveConfiguration(
      apptentiveKey: apptentiveKey,
      apptentiveSignature: apptentiveSignature,
      // Set your log level here
      logLevel: LogLevel.debug
  );
  bool successful = await ApptentiveFlutter.register(configuration);
}

Add Events

Events record user interaction. Use them to determine when an Interaction will be shown to your customers. At a minimum, you should include 20 – 50 Events in your app to start taking advantage of Apptentive. For tips and ideas, check out this guide

Add Events to your app using the engage(eventName) function. When this function is called, Apptentive will record the Event and then check to see if any Interactions targeted to that Event are allowed to be displayed based on the logic you set up in your Apptentive Dashboard.

ApptentiveFlutter.engage(eventName: "Button_Pressed");

The engage() function also returns a Future<bool> determining if the Event was successfully engaged or not. All Apptentive functions return a success bool.

ApptentiveFlutter.engage(eventName: "Button_Pressed").then((success) {
  if (!success) {
    // Not engaged, do something
  } else {
    // Engaged, do something
  }
}

Add Message Center

Our Message Center will allow your customers to contact you with feedback or questions about your app. For more details, see this guide. Message Center has two ways of being launched:

  • From other Interactions. Message Center can be shown to customers that say “No” on the Love Dialog, presented as a button on Notes. From there, customers can send feedback and start a conversation. 
  • Being opened by a button or action via code in your app, such as when your customer taps on a “Leave Feedback” button. Use the showMessageCenter() function to display the Message Center. If using Message Center in any capacity, we recommend using this method so customers can contact you on their time.
OutlinedButton(
  onPressed: () {
    ApptentiveFlutter.showMessageCenter();
  },
  child: Text('Leave Feedback'),
),

Add Custom Data

Custom Person and Device Data

To add Custom Person Data, use the addCustomPersonData(key,value) function. For Custom Device Data, use addCustomDeviceData(key,value). The key is the name of the Custom Data, and the value is the data itself. We support boolean, string, and numeric values. If you add a different value of Custom Data to a key you’ve already added, the old data will be overwritten.

We strongly recommend sending a customer ID as Custom Person Data as we offer deeper reporting capabilities and exports based on this information.  

ApptentiveFlutter.addCustomPersonData(key: "name", value: "data");
ApptentiveFlutter.addCustomDeviceData(key: "name", value: "data");

Generally, Custom Data does not need to be deleted. But if necessary for your app, use the removeCustomPersonData(key) function. This will completely remove the custom data for your customer. Similarly, use removeCustomDeviceData(key) to remove Custom Device Data.

ApptentiveFlutter.removeCustomPersonData(key: "name");
ApptentiveFlutter.removeCustomDeviceData(key: "name");

Customer Contact Information

If you already know the customer’s email address or name, you can pass them to us to display in the Conversation view on your Apptentive Dashboard using the setPersonName() and setPersonEmail() functions. 

ApptentiveFlutter.setPersonName(name: name);
ApptentiveFlutter.setPersonEmail(email: email);

Other

Styling Apptentive

When modifying your Android project in your Flutter app, follow the native instructions to customize how Apptentive looks for you: Android | iOS

Customer Authentication

If you have multiple consumers using your app, you may want to use Customer Authentication to protect each customer’s information from one another. See our native guides for details: Android | iOS

Updated on September 14, 2021

Was this article helpful?