Flutter is an SDK developed by the giant Google for building expressive and flexible native apps for iOS and Android from a single codebase.

Flutter shows high-performance, high-fidelity, and fast development. The flexible and expressive nature of UI components which helps it gain a lot of wows by app developers in little span of time.

Platform specific code with Flutter:

Flutter SDK allows you to call platform-specific APIs available in Android, or iOS specific languages (Java, Kotlin, Obj-C, Swift). These APIs don’t rely on code generation, but mainly work with flexible message passing.

Platform Channels:

Messages are passed between the client (UI) and host (platform)

Messages and responses received to and from client and host are made asynchronously to ensure and maintain responsive UI.

How It Works:

Photo by bruce mars on Unsplash

The Client(Flutter app) sends messages to its host(iOS or Android), over a platform channel.

The host(iOS or Android) listens on the Platform Channel APIs (for iOS FlutterMethodChannel and for Android MethodChannel), and receives the message. Developer can now call native code base and receive a response on the Client(Flutter app).

Supported data types:

Whenever data value is send or received between client and host, serialization and deserialization of these values happen automatically. Platform channel uses standard message compression technique that supports efficient binary serialization of simple JSON like values as listed below for data message send and receive.

Supported MethodChannel data types

Integrating Survey Monkey SDK with Flutter:

To see how it really works, let’s examine this integration of Native Survey Monkey SDK with flutter and how the host and client communicates.

Step 1: Create Flutter Project…

To create a new amazing Flutter app:

In a terminal run: flutter create <Your_project_name>

To create Flutter project with Kotlin or Swift, use the -i and/or -a flags:

In a terminal run: flutter create -i swift -a kotlin <Your_project_name>

Step 2: Construct Method channel…

Firstly create a MethodChannel, this channel will allow us to communicate between Client and Host sides. Both sides of channel are connected through an identifier passed while initialising the channel. These channel name/identifier must be unique like: com.Rahim.myFlutterApp/surveyMonkey

Step 3: Invoke PlatformChannel method…

After Creating a platform channel, the next step is to invoke the method on that platform channel by specifying a string identifier surveyMonkey , this identifier will be used as concrete method to call and will be used to identify method calls on host(platform) side.

The invoke method call might fail due to many reason — for e.g. If that host(platform) doesn’t support the platform method API etc, so to efficiently handle these type of crashes its better to use try-crash statement.

As previously mentioned that invokeMethods work asynchronous so that client UI should not stall, because of this fact once the host responds to the invoke method .then(result) will be called and access from host will be transfered to client(flutter).

Step 4: Add Platform specific Implementation…

Method invoked by Flutter needs to listen and handled well in each platform. In both the platform FlutterMethodChannel object will be created with an identifier similar to that of provided in Flutter like com.Rahim.myFlutterApp/surveyMonkey , due to which any method invoke with this channel will be received in host side by MethodChannelHandler.

iOS

Android

Step 5: Present Survey Monkey View…

iOS

To learn more about the Survey Monkey SDK, visit here.

Adding Survey Monkey Dependency

For integrating Survey Monkey SDK in iOS, firstly navigate to your flutter app project from terminal and run flutter build ios . This command will generate pod file for your iOS project and automatically link everything that will be required while installing dependencies. After successfully executing the command your pod file look something like this

Podfile in flutter project.

Add Survey Monkey pod dependency pod 'surveymonkey-ios-sdk' to this podfile and run pod install from your terminal.

Presenting Survey Monkey View:

Finally we are ready to present Survey Monkey view, So firstly create a ViewController in Main.Storyboard and link it to a CocoaTouch class SurveyMonkeyViewController.swift , lastly to load the Survey Monkey SDK ViewController as shown below:

After successfully creating surveyMonkeyViewController it is required to accurately handle the method invoke from flutter, it is required to match the method.call to make sure you are handling correct method. And at-last push your SurveyMonkeyViewController to navigtion.

But wait 😅, its not over yet. To push SurveyMonkeyViewController it is required to setup UINavigationViewController as shown below:

Android

To learn more about the Survey Monkey SDK, visit here.

Adding Survey Monkey Dependency

For integration of Survey Monkey in Android it is required to add dependency for sdk. This can be done via several methods as shown below:

OR

<dependency>

<groupId>com.surveymonkey</groupId>

<artifactId>SurveyMonkey-android-sdk</artifactId>

<version>2.0.0</version>

<type>pom</type>

</dependency>

OR

implementation 'com.surveymonkey:surveymonkey-android-sdk:2.0.0'

Once dependency is setup and gradle is synced, you are good to go to present Survey View.

Presenting Survey Monkey View:

Lastly, to setup Survey view create a layout and an Activity class, Set the activity content to that layout, finally in onCreate method call startSMFeedbackActivityForResult Method of Survey Monkey SDK.

Damn !!! You have finally integrated Survey Monkey view, lastly In next step we will be returning result back to flutter app when we are done with native code.

Step 6: Returning result from Native to Flutter…

Android

MethodCallHandler gives access to MethodCall and MethodChannel. The result allows us to pass data back to the Flutter widget using Success, Error, and notImplemented() method.

Result

Run the code on Android and iOS devices. Click on the Button “Load SurveyMonkey”

After SDK integration

Here is the full code of the implementation.

Thanks for reading. If you enjoyed this article, feel free to hit that clap button 👏 to help others find it. If you have any questions please feel free to drop them in the comments section below.

Peace out!