Plug-in solution
...
Embed plug-in
Embed in mobile app

Flutter

Introduction

Using the native iOS/Android WebView implies some extra setup in your Flutter project. This setup involves incorporating the IntelliProve plug-in Mobile SDK files into your project dependencies for both iOS and Android and adding the necessary bridging code.

All this is nicely laid out in our step-by-step guide below.

The integration guide covers three sections:

  1. Setting up the iOS code
  2. Setting up the Android code
  3. Interfacing with the native code from Flutter (bridging)

GitHub

Our GitHub repository provides a fully functional example of our platform's integration, demonstrating the seamless setup and utilisation of our native SDKs for iOS and Android platforms.

Minimal Requirements

For this guide, we assume a minimal 'Hello World' application generated by the Flutter project initialisation.

1. iOS Framework Setup

Adding the framework Last update 18/06/2024 19:13

  • Add folder ios/Frameworks
  • Copy the unzipped IntelliProveSDK.xcframework folder into this folder
  • Open the ios/Runner.xcodeproj project in XCode
  • Open Project Settings > General and in the Frameworks, Libraries, and Embedded Content section, add the IntelliProveSDK.xcframework that you copied above as a dependency
Document image


Setting up the project

  • In Project Settings > Build Settings tab, verify that the iOS Deployment Target is set appropriately. The minimum supported version for the IntelliProveSDK is iOS 15.0
  • Now open the Project Settings > Info tab to add the following Info.plist value:
    • NSCameraUsageDescription - Add a String here that will be displayed when the application asks the user for Camera Usage permissions
Document image


Updating the code

  • In the project tree, open AppDelegate.swift, and add the following code:
Swift


2. Android Framework Setup

Adding the framework Last update 16/09/2024 17:00

  • All the following actions are taken in the android root folder of the Flutter project
  • Add folder app/libs
  • Copy the IntelliProveWebView.aar into this folder
  • In app/build.gradle, add a dependency for the IntelliProveWebView.aarand androidx's AppCompatibility ConstraintLayout.
Java


Setting up the project

  • In build.gradle, ensure the correct Kotlin version is used:
Java

  • In app/build.gradle, define the minSdkVersion:
Java

  • In app/src/main/AndroidManifest.xml, add the needed permissions for Camera and Internet usage, and an activity tag, so the IntelliWebViewActivity can be shown in the application:
XML


Updating the code

  • Now open the Activity from where the IntelliWebView will be triggered. In our example this is MainActivity.kt. Add the following code:
Kotlin


3. Flutter Integration

While many possibilities exist to bridge the gap between Native iOS/Android and Flutter, this document serves as a guide to integrating the IntelliProveSDK into a Flutter application project.

To be able to call functions on, and receive callbacks from the Native application, we can implement a MethodChannel in the Flutter Application.

  • Open main.dart (or wherever in the Flutter app that the IntelliProve web view will be used)
  • Add the following imports:
Dart

  • Add a MethodChannel with a method to open the IntelliWebView. In our example we add it as a static const on our State<HomePage> implementation.
  • Also add a callback handler for receiving 'PostMessage' messages.
    • The post messages allow you to track the progress of the health check and obtain the results from the IntelliProve plug-in immediately after the user has performed the health check. This allows you to use the results in your mobile app, enabling you to link actions to the results or design a custom results screen.
    • You can find an overview of the different types of messages on the Message events page.
Dart

  • Finally, call the openWebView(...) function from wherever the entry point to the WebView should be. The URL to open the IntelliProve WebApp including the action_token is also passed to this function. In our example, it is added on a Button press handler:
Dart


The WebView is automatically dismissed by the SDK when receiving the dismiss post message.

Next steps

  • To match the plug-in with your brand's colours and fonts, please visit our Customisation documentation.