---
title: "Integrate Whatfix Mobile SDK with Flutter"
slug: "integrate-whatfix-mobile-sdk-with-flutter"
updated: 2026-09-17T12:19:31Z
published: 2026-09-17T12:19:31Z
canonical: "support.whatfix.com/integrate-whatfix-mobile-sdk-with-flutter"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate Whatfix Mobile SDK with Flutter

To create Whatfix Mobile in-app experiences on Android and iOS apps built using [Flutter](https://docs.flutter.dev/), you must first set up Whatfix Mobile.

- [Prerequisites](/mobile/docs/integrate-whatfix-mobile-sdk-with-flutter#prerequisite)
- [Steps to integrate a Flutter app with Whatfix Mobile SDK](/mobile/docs/integrate-whatfix-mobile-sdk-with-flutter#steps-to-integrate-a-flutter-app-with-whatfix-mobile-sdk)
- [Proguard Rules (for Android)](/mobile/docs/integrate-whatfix-mobile-sdk-with-flutter#proguard-rules-for-android)
- [Tag Flutter Widgets](/mobile/docs/integrate-whatfix-mobile-sdk-with-flutter#tag-flutter-widgets)
- [WebView Support](/mobile/docs/integrate-whatfix-mobile-sdk-with-flutter#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](/mobile/docs/integrate-whatfix-mobile-sdk-with-flutter#tag-flutter-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 25.

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

c. Use a device or emulator running on Android 7.1 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:

> [!NOTE]
> 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: ^2.0.1
```

Alternatively, add the dependency using the following command:

```bash
$ flutter pub add leap_aui
```

For more information on the latest version of the Flutter project, see [Flutter Changelog](https://pub.dev/packages/leap_aui/versions).

**b. Start the Whatfix Mobile SDK**

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

```dart
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.

> [!WARNING]
> 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: ^2.0.1
```

Alternatively, add the dependency using the following command:

```bash
$ flutter pub add leap_creator
```

For the latest plugin version, refer to the [Flutter Changelog](https://pub.dev/packages/leap_creator/versions).

**b. Start the Whatfix Mobile Creator SDK**

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

```dart
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:

```plaintext
#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:

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

For more information, see [Okhttp R8/ProGuard](https://github.com/lysine-dev/okhttp/blob/main/docs/features/r8_proguard.md).

---

### Tag Flutter Widgets

**Why should you tag** **Flutter Widgets?**

[Flutter Widgets](https://docs.flutter.dev/get-started/fundamentals/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](https://api.flutter.dev/flutter/foundation/Key-class.html) to uniquely identify screens, views or Flutter widgets. Adding keys enables you to identify elements and simplifies screen recognition.

> [!WARNING]
> 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.

```dart
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](https://codelabs.developers.google.com/codelabs/flutter-webview?utm_source=chatgpt.com#0) 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](https://pub.dev/packages/webview_flutter): Set the Javascript mode to unrestricted using the WebView controller.

```dart
webViewController.setJavaScriptMode(JavaScriptMode.unrestricted);
```

- [flutter_inappwebview](https://pub.dev/packages/flutter_inappwebview): Enable JavaScript in the initial settings.

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

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

> [!WARNING]
> 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.