Integrate Whatfix Mobile SDK with Flutter

To create Whatfix Mobile in-app experiences on Android and iOS apps built using Flutter, you must first set up Whatfix Mobile.

• Prerequisites

• Steps to integrate a Flutter app with Whatfix Mobile SDK

• Proguard Rules (for Android)

• Tag Flutter Widgets

• WebView Support

Prerequisites

• API key: An API key is required to integrate Flutter with the Whatfix Mobile SDK.

• Tag Flutter widgets: Add tags to Flutter widgets as needed. For more information, refer to the tag widgets section.

• Flutter Version: The Whatfix Mobile Flutter plugin supports only AndroidX. Ensure that your Flutter version is 3.24.3 or higher.

• Platform-Specific requirements

  Android:  
   a. The minimum API version supported by the Whatfix Mobile SDK is API 21.

   b. The highest tested API level is 35, which corresponds to Android 14.

   c. Use a device or emulator running on Android 5.0 or newer, with Google Play Services installed.

  iOS: The minimum API version supported by the Whatfix Mobile SDK is iOS 12.

Steps to integrate a Flutter app with Whatfix Mobile SDK

Use the following steps to integrate the Whatfix Mobile SDK into your Flutter project:

Info:

Ensure that you complete both the steps, before creating and testing the in-app experience.

Step 1: Integrate Whatfix Mobile SDK

a. Add the Whatfix Flutter Plugin dependency

Add the Whatfix Mobile plugin dependency in your pubspec.yaml file:

dependencies:
  leap_aui: ^0.0.13

Alternatively, add the dependency using the following command:

$ flutter pub add leap_aui

For more information on the latest version of the Flutter project, see Flutter Changelog.

b. Start the Whatfix Mobile SDK

Add the initialization code in the main() function of the main.dart file:

import 'dart:io';
import 'package:leap_aui/leap_aui.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
  await initLeap();
}
Future<void> initLeap() async {
  if (Platform.isAndroid) {
    await LeapAui.start("<ANDROID-API-KEY>");
  } else if (Platform.isIOS) {
    await LeapAui.start("<IOS-API-KEY>");
  }
}

Step 2: Enable the Creator Mode in your app

To create in-app experiences using the Whatfix Mobile Studio, you must enable Creator Mode in your app by integrating the Whatfix Mobile Creator SDK.

Note:

• The Whatfix Mobile Creator SDK must be removed before the app is released on the Play Store.

• For Development and Testing versions, include both the Whatfix Mobile SDK and the Creator Mode SDK.

• For the Production version, include only the Whatfix Mobile SDK.

a. Add dependencies

Add the Creator SDK dependency in your pubspec.yaml file:

dependencies:
  leap_creator: ^0.0.13

Alternatively, add the dependency using the following command:

$ flutter pub add leap_creator

For the latest plugin version, refer to the Flutter Changelog.

b. Start the Whatfix Mobile Creator SDK

Add the initialization code for the Creator SDK in the main() function of your main.dart file:

import 'dart:io';
import 'package:leap_creator/leap_creator.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
  await initLeapCreator();
}
Future<void> initLeapCreator() async {
  if (Platform.isAndroid) {
    await LeapCreator.start("<ANDROID-API-KEY>");
  } else if (Platform.isIOS) {
    await LeapCreator.start("<IOS-API-KEY>");
  }
}

Proguard Rules (for Android)

If your Flutter app uses Proguard or R8, use the following rules in your proguard-rules.pro file:

#For Leap
-dontwarn is.leap.android.**
-keep class is.leap.android.** {*;}

# For Flutter views
-keep class io.flutter.** { *; }

# For Flutter Play Store app splits
-dontwarn com.google.android.play.**
-keep class io.flutter.app.FlutterPlayStoreSplitApplication { *; }

If you are using Android Gradle Plugin (AGP) version 8.0 or newer, it may be necessary to include OkHttp rules in your proguard-rules.pro file. This step needs to be done as the LeapCreator SDK relies on the OkHttp library to ensure the proper execution of release builds. The required rules are as following:

#For Okhttp
-dontwarn okhttp3.internal.platform.**
-dontwarn org.conscrypt.**
-dontwarn org.bouncycastle.**
-dontwarn org.openjsse.**

For more information, see Okhttp R8/ProGuard.

Tag Flutter Widgets

Why should you tag Flutter Widgets?

Flutter Widgets are the basic building blocks of a Flutter app's UI, representing elements such as text, buttons, images, and layouts. Whatfix Mobile uses a key to uniquely identify screens, views or Flutter widgets. Adding keys enables you to identify elements and simplifies screen recognition.

Note:

You don’t need to add a key to every widget. You only need to add a key to the Flutter widgets where you want DAP content to show.

For example: Add keys to Flutter widgets in Flutter to help the framework identify and manage Flutter widgets efficiently during UI updates.

AnyWidget(
  key: Key('Unique key for this widget'),
  child: ChildWidget()
)
//Example with ElevatedButton widget
ElevatedButton(
  key: const Key('Key Simple'),
  onPressed: () {
    //Some action
  },
  child: const Text("Sample"),
)

After integrating the code, you can start creating your in-app experience using Whatfix Mobile.

WebView Support

Whatfix Mobile supports WebViews within Flutter screens, starting with Flutter plugin version 0.0.9.

Why is this required?

Javascript must be enabled within the WebView for Whatfix Mobile to identify and interact with on-screen elements.

How to configure?

The following examples show how to enable JavaScript in Flutter WebView plugins:

• webview_flutter: Set the Javascript mode to unrestricted using the WebView controller.

webViewController.setJavaScriptMode(JavaScriptMode.unrestricted);

• flutter_inappwebview: Enable JavaScript in the initial settings.

InAppWebView(
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true,
  ),
)

Apply the configuration to all WebView instances to ensure Whatfix Mobile content displays correctly on WebView-based screens.

Note:

The current version of the Flutter plugin does not support:

• Auto-scroll and auto-focus functionalities.

• Identifying elements on pop-ups in your app.

• Self Hosting mode.