Flutter: How to make your own plugin

Alex Melnyk
Oct 19 · 5 min read
Image for post
Image for post

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.

Image for post
Image for post
pub.dev website

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.

Image for post
Image for post
pubspec.yaml file with flutter toolbar

ometimes 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:

  1. CLI (Command Line Interface)
  2. Android Studio
Image for post
Image for post
Android Studio “New Flutter Project”

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:

Image for post
Image for post
Create a plugin, Step #1
Image for post
Image for post
Create a plugin, Step #2

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.

Image for post
Image for post
Flutter plugin project (Android/iOS native projects are selected)
Image for post
Image for post
pubspec.yaml file content

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.

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post
Android | Flutter | iOS

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.

Image for post
Image for post
Example app in the plugin project

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

Image for post
Image for post
Image for post
Image for post
Android | iOS

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!

LITSLINK Mobile Development

LITSLINK’s team is sharing their experience regarding Mobile development

Alex Melnyk

Written by

A high skilled developer with 10+ years of development experience. Working at https://litslink.com/

LITSLINK Mobile Development

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.

Alex Melnyk

Written by

A high skilled developer with 10+ years of development experience. Working at https://litslink.com/

LITSLINK Mobile Development

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store