Flutter Plugin Development

SATURDAY OCTOBER 22 2022 - 3 MIN

FLUTTER PLUGIN DEVELOPMENT MOBILE APP DEVELOPMENT IOS ANDROID DART

One of the great things about Flutter is its extensibility through plugins. Even though I have been developing Flutter apps for about 4 years now, my first experience with building Flutter plugins was just last month. In this tutorial, lets walk you through the process of creating your own Flutter plugin.

What is a Flutter Plugin?

A Flutter plugin is a package that adds new functionality to the Flutter framework. Plugins can access platform-specific APIs (such as camera or location services) and expose them to Dart code in a way that's easy to use.

Getting Started

To get started with creating your own Flutter plugin, you'll need to have the following installed on your computer:

The latest version of Flutter
A text editor (such as VS Code)
A terminal or command prompt

Once you have these installed, open up your terminal or command prompt and navigate to the directory where you want to create your new plugin.

Creating a New Plugin

To create a new Flutter plugin, run the following command:

flutter create --template=plugin my_plugin

This will create a new directory called my_plugin with all the necessary files for creating a Flutter plugin.

Adding Platform-Specific Code

One of the main reasons for creating a Flutter plugin is to access platform-specific APIs. To do this, you'll need to add some native code (either Java/Kotlin for Android or Objective-C/Swift for iOS) to your plugin.

For example, let's say we want our plugin to access the device's camera. On Android, we would add some Java code like this:

// my_plugin/android/src/main/java/com/example/my_plugin/MyPlugin.java
package com.example.my_plugin;

import androidx.annotation.NonNull;
import io.flutter.embedding.engine.plugins.FlutterPlugin;
import io.flutter.plugin.common.MethodChannel;

public class MyPlugin implements FlutterPlugin {
  private static final String CHANNEL = "my_plugin";

  @Override
  public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) {
    MethodChannel channel = new MethodChannel(flutterPluginBinding.getBinaryMessenger(), CHANNEL);
    channel.setMethodCallHandler(
      (call, result) -> {
        if (call.method.equals("getCamera")) {
          // TODO: Access camera here
        } else {
          result.notImplemented();
        }
      }
    );
  }

  @Override
  public void onDetachedFromEngine(@NonNull FlutterPluginBinding binding) {}
}

On iOS, we would add some Objective-C code like this

// my_plugin/ios/Classes/SwiftMyPlugin.swift
import Foundation
import UIKit

public class SwiftMyPlugin: NSObject {
    public static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "my_plugin", binaryMessenger: registrar.messenger())
        let instance = SwiftMyPlugin()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    public func handle(_ call: FlutterMethodCall,
                       result: @escaping (Any?) -> Void) {
        if call.method == "getCamera" {
            // TODO: Access camera here
            result(nil)
        } else {
            result(FlutterMethodNotImplemented)
        }
    }
}

Once you’ve added your platform-specific code, you can expose it to Dart by adding some Dart code like this:

// my_plugin/lib/my_plugin.dart
import 'dart:async';

import 'package:flutter/services.dart';

class MyPlugin {
  static const MethodChannel _channel =
      const MethodChannel('my_plugin');

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

Testing Your Plugin

To test your plugin, you can create an example app within your my_plugin directory by running the following command:

cd example/
flutter run

This will launch an example app that uses your newly created plugin. You can then test out any functionality that you’ve added.

Publishing Your Plugin

Once you’re happy with your plugin and have tested it thoroughly, it’s time to publish it so others can use it! To do this, follow these steps:

Update the pubspec.yaml file in your my_plugin directory with information about your plugin (such as its name and description).
Run flutter packages pub publish from within your my_plugin directory.
Follow the prompts to publish your package.

Congratulations! You’ve now created and published your very own Flutter plugin!

Conclusion

In this tutorial, we walked through the process of creating a Flutter plugin from scratch. We covered everything from setting up our development environment to adding platform-specific code and publishing our finished product. We hope this tutorial has been helpful in getting you started with creating your own plugins for use in future projects

For suggestions and queries, just contact me.