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 setting up the ios code setting up the android code 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 https //github com/intelliprove/intelliprove web plugin flutter 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 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 updating the code in the project tree, open appdelegate swift , and add the following code // add the intelliprovesdk import import intelliprovesdk // this is an example of how the appdelegate may look, it may be defined differently in another project @uiapplicationmain @objc class appdelegate flutterappdelegate { override func application( application uiapplication, didfinishlaunchingwithoptions launchoptions \[uiapplication launchoptionskey any]? ) > bool { generatedpluginregistrant register(with self) // this registers a methodchannel with your flutter application // the name is important, it must match the name of the channel in the dart file let controller flutterviewcontroller = window? rootviewcontroller as! flutterviewcontroller let webviewchannel = fluttermethodchannel( name "com intelliprove/webview", binarymessenger controller binarymessenger ) // this registers a method call handler, // so the native `openwebview()` function can be called from within the flutter code webviewchannel setmethodcallhandler({ \[weak self] (call fluttermethodcall, result flutterresult) > void in if call method == "openwebview" { if let args = call arguments as? \[string any], let urlstring = args\["url"] as? string { self? openwebview(urlstring urlstring) } result(nil) } else { result(fluttermethodnotimplemented) } }) return super application(application, didfinishlaunchingwithoptions launchoptions) } /// this function creates a new intelliwebview using the factory method, /// passing in the provided urlstring, and setting the appdelegate as a delegate for the intelliwebview private func openwebview(urlstring string) { let webviewcontroller = intelliwebviewfactory newwebview(urlstring urlstring, delegate self) webviewcontroller modalpresentationstyle = fullscreen window? rootviewcontroller? present(webviewcontroller, animated true) } } /// implementation of the `intelliwebviewdelegate` protocol /// this dispatches received `postmessage api` messages through to the flutter application extension appdelegate intelliwebviewdelegate { func didreceive(postmessage string) { let controller flutterviewcontroller = window? rootviewcontroller as! flutterviewcontroller let webviewchannel = fluttermethodchannel( name "com intelliprove/webview", binarymessenger controller binarymessenger ) webviewchannel invokemethod("didreceivepostmessage", arguments postmessage) } } 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\ aar and androidx's appcompatibility constraintlayout dependencies { implementation("androidx constraintlayout\ constraintlayout 2 1 4") implementation files('libs/intelliprovewebview\ aar') } setting up the project in build gradle , ensure the correct kotlin version is used buildscript { ext kotlin version = '1 8 0' } in app/build gradle , define the minsdkversion android { defaultconfig { minsdkversion 24 } } 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 \<manifest xmlns\ android="http //schemas android com/apk/res/android"> \<uses feature android\ name="android hardware camera" android\ required="false" /> \<uses permission android\ name="android permission internet" /> \<uses permission android\ name="android permission camera" /> \<application > \<activity android\ name="com intelliprove webview\ intelliwebviewactivity" android\ theme="@style/theme appcompat noactionbar" /> \</application> \</manifest> 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 // imports for the intelliprove webview import com intelliprove webview\ intelliwebviewactivity import com intelliprove webview\ intelliwebviewdelegate // imports for the flutter methodchannel bridging import io flutter embedding engine flutterengine import io flutter plugin common methodchannel // the mainactivity in our example also implements the `intelliwebviewdelegate` interface // that way it can receive callbacks from the web app's `postmessage api` class mainactivity(private var webviewchannel methodchannel? = null) flutteractivity(), intelliwebviewdelegate { override fun configureflutterengine(flutterengine flutterengine) { super configureflutterengine(flutterengine) // we keep the methodchannel bridge to flutter on a member // make sure to use the same name as in the flutter app code webviewchannel = methodchannel( flutterengine dartexecutor binarymessenger, "com intelliprove/webview" ) // add a methodcallhandler to react to the trigger and show the webview sent from the flutter app code webviewchannel? setmethodcallhandler { call, result > if (call method == "openwebview") { val args = call arguments as? map< , > val urlstring = args? get("url") as? string urlstring? let { openwebview(it) } result success(null) } else { result notimplemented() } } } private fun openwebview(urlstring string) { intelliwebviewactivity start(this, urlstring, this) } override fun didreceivepostmessage(postmessage string) { runonuithread { webviewchannel? invokemethod("didreceivepostmessage", postmessage) } } } 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 import 'package\ flutter/services dart'; // to use methodchannel import 'dart\ convert'; // to convert the received json string to a dictionary 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 docid\ nhmyw3igywbv wbatholb page // make sure the name of the methodchannel matches the one used in the native app code static const platform = methodchannel('com intelliprove/webview'); @override void initstate() { super initstate(); platform setmethodcallhandler(handlenativecallback); } void openwebview(string url) async { try { // make sure the method name also matches the one registered in native app code await platform invokemethod('openwebview', {'url' url}); } on platformexception catch (e) { print("failed to open webview ${e message}"); } } future\<void> handlenativecallback(methodcall call) async { if (call method == 'didreceivepostmessage') { string postmessage = call arguments; print("flutter postmessage full body $postmessage"); // postmessage is received as json string, so we need to parse it map\<string, dynamic> postdata = jsondecode(postmessage); string stage = postdata\['stage']; print("flutter postmessage stage $stage"); } } 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 elevatedbutton( onpressed () => openwebview('https //plugin dev intelliprove com/?action token=xxx'), child text('open webview'), ) 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 docid 0ukxybkmvpnt1kv0jgwml documentation