Build your own Plugin for Flutter

Hi everyone, we are gonna learn “How to make a custom plug-in for flutter?”

Let’s say you are developing a flutter application for a company you work or yourself and ran into a problem i.e., need to interact with native platform and perform some task.

There is no plugin available for flutter to perform task needed and no developer is free to write code for you.

So, here’s how we can build a custom Flutter Plugin.

Let’s start

I am using Intellij for creating project and building the plugin, you can also use other IDE like vscode, so on..

Let’s create an application which prints log messages

Log.d, Log.e, Log.w

create a new project first

create a new project of type plugin

In the command line write,

flutter create --org io.github.ponnamkarthik --template=plugin flutter_native_log

Once project is created you will find this below code in your lib folder

import 'dart:async';

import 'package:flutter/services.dart';

class FlutterNativeLog {
  static const MethodChannel _channel =
      const MethodChannel('flutter_native_log');

  static Future<String> get platformVersion async {
    final String version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }
}

This will be your main dart for interacting with the native code

Inside your android src folder you will find skotlin file

package io.github.ponnamkarthik.flutternativelog

import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.PluginRegistry.Registrar

class FlutterNativeLogPlugin(): MethodCallHandler {
  companion object {
    @JvmStatic
    fun registerWith(registrar: Registrar): Unit {
      val channel = MethodChannel(registrar.messenger(), "flutter_native_log")
      channel.setMethodCallHandler(FlutterNativeLogPlugin())
    }
  }

  override fun onMethodCall(call: MethodCall, result: Result): Unit {
    if (call.method.equals("getPlatformVersion")) {
      result.success("Android ${android.os.Build.VERSION.RELEASE}")
    } else {
      result.notImplemented()
    }
  }
}

Inside your iOS directory you will find FlutterNativeLog.m file

#import "FlutterNativeLogPlugin.h"

@implementation FlutterNativeLogPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  FlutterMethodChannel* channel = [FlutterMethodChannel
      methodChannelWithName:@"flutter_native_log"
            binaryMessenger:[registrar messenger]];
  FlutterNativeLogPlugin* instance = [[FlutterNativeLogPlugin alloc] init];
  [registrar addMethodCallDelegate:instance channel:channel];
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
  if ([@"getPlatformVersion" isEqualToString:call.method]) {
    result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]);
  } else {
    result(FlutterMethodNotImplemented);
  }
}

@end

This is a sample plugin which will interact with your native device and revert back the version of android/iOS you are on.

Now Let’s code our plugin

In lib/flutter_native_log.dart file let’s create a new function

In the above code you can check the printLog function which takes there values

1. logtype which is an enum

enum Log {
  DEBUG,
  WARNING,
  ERROR
}

We will use to determine whether user is trying to print Debug , Warning or Error message.

2. tag which is String

3. msg the message to be printed

final String result = await _channel.invokeMethod('printLog', params);

In this line of code we pass a unique method name and arguments

invokeMethod method - MethodChannel class - services library - Dart API

The code below is written at android/src location

In line 23 of the above code you will identify our method i.e., printLog

call.method — gives the method from which it is called

call.argument(“tag”) — gives the arguments we passed from dart code to the native code

This is our iOS code in ObjC

In order to test the code copy and paste in example/lib folder.

Here is main.dart code

If we run the code, we get the output as below:

log output

This is how we can create our own plugin for flutter

Publish your Plugin:

If you want to publish your plugin, open terminal in the root project folder and run the following command to check if the plugin is ready to publish

Developing Packages & Plugins - Flutter

flutter packages pub publish --dry-run

After everything is fixed run the below command to publish it

flutter packages pub publish

That’s it your plugin will be live in one or two minutes.

Thanks for your time.

Hope you got a good advice, if yes clap & share.