Create custom plugin in the flutter

Dart package that contains an API written in Dart code combined with one or more platform-specific implementations. Plugin packages can be written for Android (using Kotlin or Java), iOS (using Swift or Objective-C), web, macOS, Windows, or Linux, or any combination thereof.

Flutter allows us to create our own plugins where we can manage our native code.

Read about the variety of Flutter App Development Services offered by Mobikul

Let’s create a plugin where we will implement webview.

Step 1: Create the package

Open the android studio got to File –>> New –>> New flutter project.

Click on the New flutter project –>> Select the Flutter plugin option and create the plugin.

Step 2: Specifying a plugin’s supported platforms. In pubspec.yaml file we can add specific information about the package.

flutter:
  plugin:
    platforms:
      android:
        package: com.mobikul.webview
        pluginClass: WebviewPlugin
      ios:
        pluginClass: WebviewPlugin

environment:
  sdk: ">=2.1.0 <3.0.0"
  # Flutter versions prior to 1.12 did not support the
  # flutter.plugin.platforms map.
  flutter: ">=1.12.0"

flutter:

plugin:

platforms:

android:

package: com.mobikul.webview

pluginClass: WebviewPlugin

ios:

pluginClass: WebviewPlugin

environment:

sdk: ">=2.1.0 <3.0.0"

# Flutter versions prior to 1.12 did not support the

# flutter.plugin.platforms map.

flutter: ">=1.12.0"

Step 3: Now open lib/WebviewPlugin.dart file and create a method where we will pass URL string.

class WebviewPlugin {
  static const MethodChannel _channel =
      const MethodChannel('webview_plugin');

  static Future<void>  openWebview(String url) async {
     await _channel.invokeMethod('openWebview',url);
  }
}

class WebviewPlugin {

static const MethodChannel _channel =

const MethodChannel('webview_plugin');

static Future<void> openWebview(String url) async {

await _channel.invokeMethod('openWebview',url);

}

Step 4: Now implement Webview code in iOS end. Open SwiftWebviewPlugin.swift file from ios folder and add code to handle API request.

 public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {

    if call.method == "openWebview", let url = call.arguments as? String{
    let vc = WkWebviewController()
        vc.url = url
    let viewController = UIApplication.shared.keyWindow?.rootViewController
    let nav = UINavigationController(rootViewController: vc)
    nav.modalPresentationStyle = .fullScreen
    viewController?.present(nav, animated: true)
    }
  }

public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {

if call.method == "openWebview", let url = call.arguments as? String{

let vc = WkWebviewController()

vc.url = url

let viewController = UIApplication.shared.keyWindow?.rootViewController

let nav = UINavigationController(rootViewController: vc)

nav.modalPresentationStyle = .fullScreen

viewController?.present(nav, animated: true)

}

And Add WKWebview implementation code.

class WkWebviewController: UIViewController, WKUIDelegate {

    // MARK: - Lifecycle Methods
    var url = ""
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        setupNavItem()
        let myURL = URL(string: url)
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        setupNavBar()
    }

    // MARK: - Actions
  
    @objc func backAction() {
        print("backAction")
        self.dismiss(animated: true, completion: nil)
    }

    // MARK: - Properties
    lazy var webView: WKWebView = {
        let webConfiguration = WKWebViewConfiguration()
        let webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        webView.translatesAutoresizingMaskIntoConstraints = false
        return webView
    }()


}

extension WkWebviewController {
    func setupUI() {
        self.view.backgroundColor = .white
        self.view.addSubview(webView)
        NSLayoutConstraint.activate([
            webView.topAnchor
                .constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
            webView.leftAnchor
                .constraint(equalTo: self.view.safeAreaLayoutGuide.leftAnchor),
            webView.bottomAnchor
                .constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
            webView.rightAnchor
                .constraint(equalTo: self.view.safeAreaLayoutGuide.rightAnchor)
        ])
    }

    func setupNavItem() {
        let backBarItem = UIBarButtonItem(title: "Close", style: .plain, target: self, action: #selector(backAction))
        self.navigationItem.leftBarButtonItem = backBarItem
    }

    func setupNavBar() {
        self.navigationController?.navigationBar
            .barTintColor = .systemBlue
        self.navigationController?.navigationBar
            .tintColor = .white
    }
}

class WkWebviewController: UIViewController, WKUIDelegate {

// MARK: - Lifecycle Methods

var url = ""

override func viewDidLoad() {

super.viewDidLoad()

setupUI()

setupNavItem()

let myURL = URL(string: url)

let myRequest = URLRequest(url: myURL!)

webView.load(myRequest)

}

override func viewWillAppear(_ animated: Bool) {

super.viewWillAppear(animated)

setupNavBar()

}

// MARK: - Actions

@objc func backAction() {

print("backAction")

self.dismiss(animated: true, completion: nil)

}

// MARK: - Properties

lazy var webView: WKWebView = {

let webConfiguration = WKWebViewConfiguration()

let webView = WKWebView(frame: .zero, configuration: webConfiguration)

webView.uiDelegate = self

webView.translatesAutoresizingMaskIntoConstraints = false

return webView

}()

}

extension WkWebviewController {

func setupUI() {

self.view.backgroundColor = .white

self.view.addSubview(webView)

NSLayoutConstraint.activate([

webView.topAnchor

.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),

webView.leftAnchor

.constraint(equalTo: self.view.safeAreaLayoutGuide.leftAnchor),

webView.bottomAnchor

.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),

webView.rightAnchor

.constraint(equalTo: self.view.safeAreaLayoutGuide.rightAnchor)

])

}

func setupNavItem() {

let backBarItem = UIBarButtonItem(title: "Close", style: .plain, target: self, action: #selector(backAction))

self.navigationItem.leftBarButtonItem = backBarItem

}

func setupNavBar() {

self.navigationController?.navigationBar

.barTintColor = .systemBlue

self.navigationController?.navigationBar

.tintColor = .white

}

Step 5: Now implement Webview code in Android end. Open WebviewPlugin.kt file from android folder and add code to handle API request.

class WebViewPlugin: FlutterPlugin, MethodCallHandler,ActivityAware {

  private lateinit var channel : MethodChannel
  private lateinit var activity : Activity
  private lateinit var context: Context

  override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
    channel = MethodChannel(flutterPluginBinding.binaryMessenger, "webView_plugin")
    channel.setMethodCallHandler(this)
    context = flutterPluginBinding.applicationContext

  }
  override fun onDetachedFromActivityForConfigChanges() {
  }
  override fun onReattachedToActivityForConfigChanges(binding: ActivityPluginBinding) {
    activity = binding.activity
  }


  override fun onDetachedFromActivity() {
  }
  override fun onAttachedToActivity(binding: ActivityPluginBinding) {
    activity = binding.activity


  }
  override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
    if (call.method == "openWebview") {
      val intent = Intent(context, WebViewActivity::class.java)
      intent.putExtra("URL",call.arguments.toString())
      activity.startActivity(intent)

    } else {
      result.notImplemented()
    }
  }

  override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) {
    channel.setMethodCallHandler(null)
  }
}

class WebViewPlugin: FlutterPlugin, MethodCallHandler,ActivityAware {

private lateinit var channel : MethodChannel

private lateinit var activity : Activity

private lateinit var context: Context

override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {

channel = MethodChannel(flutterPluginBinding.binaryMessenger, "webView_plugin")

channel.setMethodCallHandler(this)

context = flutterPluginBinding.applicationContext

}

override fun onDetachedFromActivityForConfigChanges() {

}

override fun onReattachedToActivityForConfigChanges(binding: ActivityPluginBinding) {

activity = binding.activity

}

override fun onDetachedFromActivity() {

}

override fun onAttachedToActivity(binding: ActivityPluginBinding) {

activity = binding.activity

}

override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {

if (call.method == "openWebview") {

val intent = Intent(context, WebViewActivity::class.java)

intent.putExtra("URL",call.arguments.toString())

activity.startActivity(intent)

} else {

result.notImplemented()

}

override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) {

channel.setMethodCallHandler(null)

}

Now add WebViewActivity code in the package

class WebViewActivity : Activity() {

    private var mWebView: WebView? = null
    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        actionBar?.setDisplayHomeAsUpEnabled(true);
        window.requestFeature(Window.FEATURE_NO_TITLE)
        mWebView = WebView(this)
        val extras = intent.extras

        mWebView!!.loadUrl(extras?.getString("URL")!!)
        mWebView!!.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
                view.loadUrl(url)
                return true
            }
        }
        this.setContentView(mWebView)
    }
   
    override fun onKeyDown(keyCode: Int, event: KeyEvent): Boolean {
        if (keyCode == KeyEvent.KEYCODE_BACK && mWebView!!.canGoBack()) {
            mWebView!!.goBack()
            return true
        }
        return super.onKeyDown(keyCode, event)
    }
}

class WebViewActivity : Activity() {

private var mWebView: WebView? = null

public override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

actionBar?.setDisplayHomeAsUpEnabled(true);

window.requestFeature(Window.FEATURE_NO_TITLE)

mWebView = WebView(this)

val extras = intent.extras

mWebView!!.loadUrl(extras?.getString("URL")!!)

mWebView!!.webViewClient = object : WebViewClient() {

override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {

view.loadUrl(url)

return true

}

this.setContentView(mWebView)

}

override fun onKeyDown(keyCode: Int, event: KeyEvent): Boolean {

if (keyCode == KeyEvent.KEYCODE_BACK && mWebView!!.canGoBack()) {

mWebView!!.goBack()

return true

}

return super.onKeyDown(keyCode, event)

}

webview.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </WebView>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

<WebView

android:id="@+id/webView"

android:layout_width="match_parent"

android:layout_height="match_parent">

</WebView>

</LinearLayout>

Step 6: Thats all for the implemention part, now call the openWebview method.

await WebviewPlugin.openPDF('https://www.google.com/');

1	await WebviewPlugin.openPDF('https://www.google.com/');

Step 7: Now publish the plugin.

Run the publish command in dry-run mode to see if everything passes analysis:

flutter pub publish --dry-run

1	flutter pub publish --dry-run

The next step is publishing to pub.dev:

flutter pub publish

1	flutter pub publish

I hope this code will help you better to understand Custom Plugin in Swift. If you feel any doubt or query please comment below.

Thanks for the read this blog and if you want to visit my other blog click here.

Debabrata Roy

28 Apr, 2023
Updated by - anchit
20 Mar, 2023
Updated by - anchit

. . .

4 comments

Avinash Jha 2 years ago

i cant find any swift file in android folder. (Step no 5) please update.

anchit (Moderator) 1 year ago

Hi, sorry for the typo.

It is WebviewPlugin.kt(kotlin file).

We have updated the blog now.

Reply

C Namita 9 months ago

Hi I have a query of where to create a WkWebviewController class as in ios folder now there a classes package and inside it SwiftWebviewPlugin.swift alone. So do we need to create a new class in that classes directory if so then how to import that component to SwiftWebviewPlugin.swift to use it.

C Namita 9 months ago

Leave a Comment Cancel Reply

4 comments

Message Sent!