Flutter Quick Start Guide

Learn how to quickly get started with your Flutter Integration.

Overview

The following section shows how to install, set up, and test your Flutter application.

Install

To add the CleverTap Flutter SDK to your project, edit your project's pubspec.yaml file:

dependencies:
clevertap_plugin: 1.5.1

Run flutter packages get to install the SDK.

Now, in your Dart code, you can use:

import 'package:clevertap_plugin/clevertap_plugin.dart';

Android Integration

Add CleverTap Credentials

To associate your Android app with your CleverTap account, you must add your CleverTap credentials to the application's AndroidManifest.xml file. Follow the steps to add CleverTap credentials:

  1. Navigate to the AndroidManifest.xml file in your project navigator.
  1. Add your CleverTap Account ID and Token to your AndroidManifest.xml within the tags.
<meta-data
    android:name="CLEVERTAP_ACCOUNT_ID"
    android:value="Your CleverTap Account ID"/>
<meta-data
    android:name="CLEVERTAP_TOKEN"
    android:value="Your CleverTap Account Token"/>
<!-- IMPORTANT: To force use Google AD ID to uniquely identify  users, use the following meta tag. GDPR mandates that if you are using this tag, there is prominent disclousure to your end customer in their application. Read more about GDPR here - https://clevertap.com/blog/in-preparation-of-gdpr-compliance/ -->
<meta-data
    android:name="CLEVERTAP_USE_GOOGLE_AD_ID"
    android:value="1"/>

Add Android Region Code

Refer to the following table to identify the region for your account:

To enable the CleverTap Region, complete the following step. Add the following snippet according to your location in your AndroidManifest.xml file between the tags.

<meta-data 
android:name="CLEVERTAP_REGION" 
android:value="in1"/>
<meta-data 
android:name="CLEVERTAP_REGION" 
android:value="us1"/>
<meta-data 
android:name="CLEVERTAP_REGION" 
android:value="sg1"/>

For more information on adding region codes for OS, channels, and APIs, refer to Region Codes.

Add Dependencies

  1. Add the following to your dependencies section in project/build.gradle:
dependencies {
            classpath 'com.android.tools.build:gradle:4.2.1'
            classpath 'com.google.gms:google-services:4.3.3' //<--- Mandatory for using Firebase Messaging, skip if not using FCM
        }
  1. Add the following to your dependencies section in app/build.gradle:
implementation 'com.clevertap.android:clevertap-android-sdk:4.4.0'
implementation 'com.google.firebase:firebase-messaging:21.0.0'
implementation 'androidx.core:core:1.3.0'
implementation 'androidx.fragment:fragment:1.3.6'
        
//MANDATORY for App Inbox
implementation 'androidx.appcompat:appcompat:1.3.1'
implementation 'androidx.recyclerview:recyclerview:1.2.1'
implementation 'androidx.viewpager:viewpager:1.0.0'
implementation 'com.google.android.material:material:1.4.0'
implementation 'com.github.bumptech.glide:glide:4.12.0'
        
//For CleverTap Android SDK v3.6.4 and above add the following -
implementation 'com.android.installreferrer:installreferrer:2.2'
        
//Optional ExoPlayer Libraries for Audio/Video Inbox Messages. Audio/Video messages will be dropped without these dependencies
implementation 'com.google.android.exoplayer:exoplayer:2.15.1'
implementation 'com.google.android.exoplayer:exoplayer-hls:2.15.1'
implementation 'com.google.android.exoplayer:exoplayer-ui:2.15.1'
  1. At the end of the app/build.gradle file, add the following:
apply plugin: 'com.google.gms.google-services' //skip if not using FCM

Enable Tracking by Adding Permissions

  1. In your app's Android Application class, add the following code:
public class MyApplication extends FlutterApplication {
        @java.lang.Override
        public void onCreate() {
            ActivityLifecycleCallback.register(this); //<--- Add this before super.onCreate()
            super.onCreate();
        }
    }
class MyApplication : FlutterApplication() {
    override fun onCreate() {
        ActivityLifecycleCallback.register(this)//<--- Add this before super.onCreate()
        super.onCreate()
    }
}

If you do not have an Application class, add this to your AndroidManifest.xml file:

<application
        android:label="@string/app_name"
        android:icon="@drawable/ic_launcher"
        android:name="com.clevertap.android.sdk.Application">
  1. Add the following permissions. They are needed by the CleverTap SDK:
<!-- Required to allow the app to send events and user profile information -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <!-- Recommended so that CleverTap knows when to attempt a network call -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

iOS integration

Add CleverTap Credentials

To link your iOS app with your CleverTap account, add your CleverTap credentials to your application's Info.plist file.

Perform the following steps:

  1. Navigate to the Info.plist file in your project navigator.
  1. Create a key called CleverTapAccountID with the type string.
  2. Create a key called CleverTapToken with the type string.
  3. Insert the account ID and account token values from your CleverTap account. These values are available on the Settings page on the CleverTap dashboard.

Add iOS Region Code

In your applications’ Info.plist file, add a new key under the Information Property List with the type string. The name for key is CleverTapRegion and the value is in1 for India, sg1 for Singapore, and us1 for U.S.
The region code is available on the Settings page on the CleverTap dashboard.

Initialize CleverTap SDK

  1. Initialize CleverTap SDK by adding the following code snippet to import the CleverTap header in your AppDelegate file:
#import "CleverTap.h"
 #import "CleverTapPlugin.h"
import CleverTapSDK
import clevertap_plugin
  1. In your didFinishLaunchingWithOptions: method, notify the CleverTap Flutter SDK of application launch:
[CleverTap autoIntegrate]; // integrate CleverTap SDK using the autoIntegrate option
[[CleverTapPlugin sharedInstance] applicationDidLaunchWithOptions:launchOptions];
CleverTap.autoIntegrate() // integrate CleverTap SDK using the autoIntegrate option
CleverTapPlugin.sharedInstance()?.applicationDidLaunch(options: launchOptions)

🚧

Note

If you want to handle the clicks on the iOS Push notifications manually, remove the [CleverTap autoIntegrate]; line from your integration.

Track User Profiles

Create a User profile when the user logs in (On User Login):

var stuff = ["bags", "shoes"];
var profile = {
    'Name': 'Captain America',
    'Identity': '100',
    'Email': '[email protected]',
    'Phone': '+14155551234',
    'stuff': stuff
};
CleverTapPlugin.onUserLogin(profile);

Track User Events

Record an event with event data:

var eventData = {
    // Key:    Value
   'first': 'partridge',
   'second': 'turtledoves'
};
CleverTapPlugin.recordEvent("Flutter Event", eventData);

Record an event without event data:

CleverTapPlugin.recordEvent("Flutter Event");

Did this page help you?