Build your Own Plugin using (PlatformViews) — Flutter

Flutter 1.0 announced PlatformViews

Platform Views

While Add To App is useful as a way to gradually introduce Flutter to an existing application, sometimes it’s useful to go the other way round and embed an Android or iPhone platform control in a Flutter app.

So we’ve introduced platform view widgets (AndroidView and UiKitView) that let you embed this kind of content on each platform. We've been previewing Android support for a couple of months, but now we're expanding support to iOS, and starting to add plug-ins like Google Maps and WebView that take advantage of this.

Like other components, our platform view widgets participate in the composition model, which means that you can integrate it with other Flutter content. For example, in the screenshot above, the floating action button in the bottom right corner is a Flutter widget that has background color with 50% alpha. This demonstrates the unique architectural advantages of Flutter well.

While this work is ready for developers to try out, we’re continuing to work on improving performance and device compatibility, so we recommend caution if deploying apps that depend on PlatformViews. We’re continuing to actively optimize platform views and expect them to be ready for production in time for our next quarterly update.

Here how we can use PlatformViews to create your own Plugins

Step 1

Step 2

Inside lib/nativeweb.dart file we create a WebController Class

Step 3

Create a Webview callback function

Now in lib/nativeweb.dart we create a stateful widget

Step 4

Inside build function instead of returning Container we return AndroidView or UiKitView for Android or iOS

Step 5

AndroidView and UiKitView accepts few parameters

AndroidView and UiKitView looks like below

This is our onPlatFormViewCreated Function

Step 6

Inside android folder NativeWebPlugin.java file

replace above code with this one

Step 7

Create a new file WebFactory.java

Step 8

Create a new file FlutterWeb.java

In this file we implement two methods PlatformView, MethodCallHandler

FlutterWeb.java constructor will be as below

we ovrride some default methods

we create a new function which return a webview

Step 9

Inside iOS folder NativewebPlugin.m file replace the existing code with below

Step 10

Create two file FlutterWeb.h and FlutterWeb.m

Inside FlutterWeb.h paste the below code

Step 11

Inside FlutterWeb.m paste the below code

We implement FlutterWebFactory and FlutterWebController

Step 12

Inside example/lib folder main.dart file

Step 13

Inside example/ios folder Info.plist file

the output of the plugin

Get Working code from Github

Additional Resources

If you want to use XML files from the Layout directory

private View getViewFromFile() {
    view = LayoutInflater.from(registrar.activity()).inflate(R.layout.la, null);
    return view;
}

Inside on getView() We need to return view

@Override
public View getView() {
    return view;
}

Thanks for your time.

Hope you like it, if yes clap & share.