Flutter: How to make your own plugin

Flutter it’s a fresh platform that can be used to develop applications like with ReactNative. There are so many plugins that you can easily use to solve any kind of task. Most of them have multi-platform support like iOS, Android, Web, and Desktop you can check it on pub.dev, just put the string into search and it will find for you something. Of course, you can filter search results, for example, we wanna find a plugin maps support in our project with iOS & Android platform support.

As you can see there are several variants you can try to use. All plugins have some score, short description, platform support, etc. Choose some plugin and add a line to the “pubspec.yaml” file in your project then press the “Pub get” button at the top bar or simply enter “flutter pub get” in the terminal to add a plugin to your project and start using it.

Sometimes you can get a request from a customer to develop some specific functionality that can’t be done with the plugins list on pub.dev or a customer wants a plugin with custom implementation that can be shared between several projects. In this case, you will need to develop your own plugin.
Make a Flutter plugin first step
Of course, to develop a plugin with native support you will need to know one or more programming languages to write native code currently you can use Java/Kotlin for Android and Objective-C/Swift for iOS development.
Ways to create a plugin project
So, you have two ways to do that:

We have three different options to create a plugin project:
Plugin
This option creates a Flutter project with iOS and Android sub-projects. You can develop native functionality and expose API written on Dart.
Package
This option can be used if you wanna develop functionality just using Dart without native support, for example, it can be a widget, widget library, or some utility functions that you plan to use in several projects, etc.
Module
This option creates a solution that you can integrate into an existing Android or iOS project.
The Plugin
The customer asks me to integrate a native library into our project, after some research I decided to develop a flutter plugin, so let’s look at how to do that.
First of all, let’s create a plugin project:


There is you can enter a (package/bundle) for the native projects, also you can turn on language support for native projects, for example, Kotlin/Swift, those languages are selected by default in case you are using CLI.
flutter create --template=plugin --platforms=android,ios hello
After you press the Finish button Android Studio creates a project structure and opens it.


There are we have some details of a project like a name, description, etc. Under the flutter node, we have the plugin node that describes native classes of a plugin, that be linked to dart class FlutterExtPlugin in the flutter_ext_plugin.dart file.

Development
Let’s generate colors using native code, keep in mind when you start to develop:
- The Android version - open example/android in Android Studio
- The iOS version - open example/ios and run the “pod install” command


We have a class with the name FlutterExtPlugin it implements two interfaces FlutterPlugin and MethodCallHandler.
FlutterPlugin allows us to listen when the plugin state when it is attached or detached from the flutter engine. There is we have to create a MethodChannel that brings us to the MethodCallHandler that allows us to listen when some method calling from the flutter side (Dart code).
In the onMethodCall we have to handle the “call.method” value that is the name of the method called from flutter, also we can handle “call.arguments” if the plugin waits for some arguments to process. After processing, we need to call “result.success” to provide a result to the flutter side.
Using the example app project you can easily test your plugin before attaching it to the main project it’s like a sandbox, also if you thinking about publishing it will be used as an example of your plugin usage that helps other developers.

There is we can see that every press on FAB generates a new random color and applies to the background.


So nothing to worry about, it’s easy to do. Let’s make good things for our customers!
As usual, all sources are open and available on my GitHub repository so good luck!
Please help me if you want to improve this article, so don’t shy — write down your comments!