Purpose of the article: To get the knowledge on creating platform views in flutter by which developer can embed the native platform view.

Intended Audience: Technology Experts

Tools and Technology: Android Studio(IDE), Dart, Flutter, Android, Java, iOS, Swift, Yaml

Keywords: Platform View, Plugin, Android Studio(IDE), Dart, Flutter, Android, Java, iOS, Swift, Yaml

Platform View allows us to embed native views in flutter applications. You can also apply custom flutter effects like opacity, transform, clip, etc., in your dart code.

For example, if you want to show Google Maps in your flutter application from native SDKs, platform views can help you achieve this.

Let us look into the code implementation for different platforms. Below are the steps to follow to create a platform view. We will first discuss the on the dart side implementation and then look into the native platform side.

Create a new flutter plugin project with the name FLPlugin.

Dart:

In the Dart file under lib/FLPlugin.dart,create a new widget and add the below code implementation and for importing.

iOS:

In iOS, platform view uses hybrid composition, which means the native UIView is directly appended to the view hierarchy.

Create a file under ios/classes with two classes in it, one for factory and the other for platform view. The factory class creates the platform view and the platform view class provides the reference to the UIView and the below code implementation in it.

Register the plugin by modifying the plugin’s main file (FLPlugin.swift) under the ios/classes folder with the below changes.

Register the platform view by modifying the App’s AppDelegate.swift file under example/ios/Runner/AppDelegate.swift with the below changes.

That’s it. We have successfully created a platform view for the iOS platform J. Now we will look into the android part.

Android:

In Android, platform view offers two types of composition

1. Hybrid Composition
2. Virtual Composition

In Hybrid composition, flutter appends native android.view.View instance to the view hierarchy, which helps in the keyboard functionality and accessibility.

In Virtual composition, flutter renders the native android.view.View instance to a texture in which some functionalities like keyboard and other accessibilities may not be effective.

In this example, we are using the hybrid composition.

Modify your app-level build.gradle

Create a new factory class and add the below code implementation.

Create a new factory class and add the below code implementation.

Register the platform view by modifying the App’s MainActivity.java file under example/android/app/src/main/…/MainActivity.java with the below changes.

Register the plugin by modifying the plugin`s main file (FLPlugin.java) under the android/src/main/…/FLPlugin.java folder with the below changes.

That is it! We have created a platform view for the Android platform also.

Note: You can also pass width and height as a parameter from dart code to native code and assign the view boundaries of native view accordingly.