Integrating third-party Native SDKs in Flutter

Flutter third party SDKs for iOS and Android

Since Flutter’s launch in Dec 2018, many teams have made their hands dirty with Flutter development. Industry leaders like Google, Alibaba have amazed us with their masterpieces built using the Flutter app development. To get started, you can:

Check out our in-depth Flutter Tutorial for Beginners

One of the dilemmas that developers (or CTOs) might have is if it would be possible to integrate existing third-party Native SDKs (and functionality) into Flutter apps. Good news — It is very much possible.

Assume that you want to integrate a video chat platform such as Tokbox’s SDK (for the Video chat / messaging functionality) into your Flutter app. As of now, Tokbox doesn’t have any native SDK (library) for Flutter. Therefore to use the functionality, there are two ways to go about this:

Flutter Native Third-Party SDK-UI integration

You can directly call native Android and iOS SDKs of Tokbox chat app from your Flutter application — wherein the UI will be driven by Tokbox SDKs. Since this approach uses native UIs of each platform, the app developer is devoid of any responsibility to create working UIs on both the Android and iOS platforms.

A downside of this approach is that even if the whole app supports say iOS 9 (because it’s Flutter), because of one SDK — you will have to support the minimum OS version that all Flutter third party SDKs support!

On the flip side, your development time (including Project Management and QA) and thus costs are reduced.

Dart UI + Flutter Native SDK

Create a wrapper around the Flutter native SDKs and create a separate UI (built-in dart) that will be used across both the iOS and Android versions — assuming that the Flutter native SDKs will expose the necessary methods.

Going with this approach is that you will have to invest significant time and thus resources to create a Dart UI (Design + Development) which will ultimately offer much better control. Thus you will still be able to support that minimum OS as well as offer a better User Experience.

The Concept

Before we dig into the “how”, let’s dig into the “why”. Let’s understand what are Flutter Platform channels. Flutter uses a flexible system that allows you to write a platform-specific code either in Java or in Kotlin for Android & in Swift or Objective-C for iOS.

Flutter third-party native SDKs — Flutter platform channels
undraw.co

It works on the below message-passing style:

Step1: Flutter portion of the app sends a message to its host app (Android or iOS portion of Application)
Step 2: The host listens to the Platform channels and receives the message.
Step 3: Host apps execute the Flutter Native code (written in Platform-specific language)
Step 4: Host apps return the response to the Flutter portion of the app.

The below diagram illustrates the architecture of the Platform channel in Flutter.

Flutter third-party native  libraries— the architecture of Flutter platform channel
https://flutter.dev/docs/development/platform-integration/platform-channels

Example of Flutter TokBox OpenTok Video Chat Integration

Now let’s integrate the Video chat feature TokBox OpenTok to our Flutter application and understand this step by step. I’ll be following the Native SDK-UI integration (first) approach to demonstrate the Platform channel.

I assume you have already created a Flutter application using

flutter create my_video_call_demo

Now go to main.dart and follow the below steps.

Step 1: Constructing Method channel

First, we will construct a method channel which will allow us to communicate between Platform-specific code and Flutter code to integrate OpenTok in your Flutter app.

Construct Method Channel in Flutter

Step 2: Invoke platform Specific method from Flutter

Next, we can invoke any method using this method channel. This method may fail if the target platform doesn’t support the Platform API or throws an Exception. So here PlatformException should be handled well.

Invoke Platform Specific method from Flutter

Step 3.1: Add Android-specific Implementation

Now Android portion of the host app will listen to the Platform channel and receives a message to invoke a method.

We will integrate Tokbox related code using Android SDKs in a separate Activity called VideoScreen. (Full source code is available at the end of the article)

We will start the respective activity when a particular method is invoked via method channel.

Android Code

Step 3.2: Returning result from Native to Flutter

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

Passing back result

Step 4: Add Flutter iOS-specific Implementation

Similar to Android, in the Flutter iOS host application, we will integrate TokBox OpenTok to Flutter native iOS SDKs and present VideChatScreen when a particular method is invoked via method channel.

iOS Code Snippet

All Good!, Now we are able to work with native SDKs to our Flutter app. The full source code of an application can be found from the below URL.

With the team gets ready, Challenges don’t stop there! It is equally challenging to prove to your Clients/Product owners that you can start using Flutter for production apps. If they are still evaluating Flutter, here is everything that you will need to change their minds :)

And if you’re looking for more proof of how much Flutter is already being adopted by companies around the world, check out the showcase.

--

--

--

SoluteLabs is a high-performance team focused on mobile and web design and development; we have produced top #10 chart topping applications on Android and iOS app stores, graphics that have gone viral and applications with Millions of downloads.

Recommended from Medium

How to Create a Library Using GitHub Copilot

RESTaurant at the ENDPOINT of the Universe

Your Content and the Semantic Web

How to Generate Professional API Docs in Minutes from Docstrings

Dual-track Agile: How to optimize product development?

Bluehost or HostGator? Which one is the best web host and why?

Karasuno — A Hackathon Story

Google completely terminated our new business via our Google Play Developer Account + Ad sense…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Milind Mevada

Milind Mevada

Google Certified Associate Android Developer, Now Building #Flutter Widgets

More from Medium

Fix for Deprecated version of the Android embedding in Flutter

Problem: Trying to run a Flutter application with the flutter run command produces the following…

USB Debugging using Android Debug Bridge

Frequently asked: Flutter Interview Questions and Answers