Flutter
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:
- Setting up the iOS code
- Setting up the Android code
- Interfacing with the native code from Flutter (bridging)
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.
For this guide, we assume a minimal 'Hello World' application generated by the Flutter project initialisation.
- 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
- 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
- In the project tree, open AppDelegate.swift, and add the following code:
- 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.
- In build.gradle, ensure the correct Kotlin version is used:
- In app/build.gradle, define the minSdkVersion:
- 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:
- Now open the Activity from where the IntelliWebView will be triggered. In our example this is MainActivity.kt. Add the following code:
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:
- 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.
- 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:
The WebView is automatically dismissed by the SDK when receiving the dismiss post message.
- To match the plug-in with your brand's colours and fonts, please visit our Customisation documentation.