Developing a Custom Plugin using Flutter
Tags: flutter, javascript, fluttersdk, android
Published: 2021-11-12 07:07:19

[Flutter](https://flutter.dev/) is Google's free and open-source UI application development toolkit. It is used to build high-quality native interfaces on Android and iOS using a single codebase. One interesting thing about Flutter is that it works with existing code and is used by developers and organizations worldwide. In this post, we will learn how to develop a custom plugin using Flutter.

As a part of our SDK roadmap at [RudderStack](https://rudderstack.com/), we wanted to develop a Flutter SDK. Our existing SDKs include features such as storing event details and persisting user details on the database, and much more. However, these features are already implemented in our Android and iOS SDKs.

The Flutter SDK that we intend to develop is also meant to run on either your Android or iOS devices. So, we wanted to develop a solution in which we can use our existing Android and iOS SDK and develop the Flutter SDK.

All the brainstorming finally led us to the idea of developing a custom plugin in Flutter. The custom plugin follows a basic mechanism based on Flutter's flexible system that allows calling platform-specific APIs available in Kotlin or Java on Android or Swift or Objective-C code on iOS.

Working of the Flutter SDK Across Different Channels
----------------------------------------------------

Flutter's built-in platform-specific API support does not rely on code generation but rather on a flexible message-passing style using a Platform Channel. To create a custom plugin, let us understand the Flutter architecture in detail:

-   The Flutter portion of the app sends messages to its *host* - the iOS or Android portion of the app, over a platform channel.
-   The *host* listens on the platform channel and receives the message. It then calls into any number of platform-specific APIs---using the native programming language---and sends a response back to the *client*, the app's Flutter portion, as shown below:

![image-3205a9439d543d60a426891702431e6baabbf11d-580x647-png](https://cdn.sanity.io/images/97bpcflt/production/3205a9439d543d60a426891702431e6baabbf11d-580x647.png)

Architectural Overview of how Platform Channels Work Between Different Platforms

Building a Custom Plugin Using Flutter
--------------------------------------

### Getting Started

The following example demonstrates how to call a platform-specific API to retrieve and display the current battery level. It uses the Android `BatteryManager` API and the iOS `device.batteryLevel` API, via a single platform message, `getBatteryLevel()`.

### Step 1: Create the Package

To create a plugin package,

-   Use the `--template=plugin` flag with the Flutter `create` command.
-   Use the `--platforms=` option followed by a comma-separated list to specify the plugin supports platforms. Available platforms are Android, iOS, web, Linux, macOS, and Windows.
-   Use the `--org` option to specify your organization, using reverse domain name notation. This value is used in various package and bundle identifiers in the generated plugin code.
-   Use the `-a` option to specify the language for Android or the -i option to specify the language for iOS.
-   Below is the example command to create a plugin package for Android, iOS platforms while using java for Android and Objective-C for iOS.

```java
flutter create
```

-   This command creates a plugin project in the `batteryLevel` folder with the specialized content given as follows:
    -   `lib/batteryLevel.dart -` The Dart API for the plugin.
    -   `android/src/main/java/com/rudderstack/batteryLevel/BatteryLevelPlugin.java` - The Android platform-specific implementation of the plugin API in Java.
    -   `ios/Classes/BatteryLevelPlugin.m` - The iOS-platform specific implementation of the plugin API in Objective-C.
    -   `example/` - A Flutter app that depends on the plugin and illustrates how to use it.

Check out how different dart values are received on the platform side and vice versa on the Flutter website.

### Step 2: Create the Flutter Platform Client

The app's `State` class holds the current app state. Extend that to hold the current battery state.

-   First, construct the channel by using `MethodChannel` with a single platform method that returns the battery level.
-   The client and host sides of a channel are connected through a channel name that's passed in the channel constructor.

Note: All channel names used in a single app must be unique.

-   Prefix the channel name with a unique *domain prefix*. For example, `org.rudderstack.dev/battery`.
-   Open the `batteryLevel.dart` file located in the `lib` folder.
-   Create the `method` channel object as shown below with the channel name as `org.rudderstack.dev/battery`.
-   Please ensure that you are initializing the channel object with the same name as in Flutter across both the Android and iOS platforms.

```java
import 'dart:async';
import 'package:flutter/services.dart';
class BatteryLevel {  static const MethodChannel _channel =      MethodChannel('org.rudderstack.dev/battery');
 // Get battery level.}
```

-   Next, invoke a method on the method channel, specifying the concrete method to call using the string identifier `getBatteryLevel`. For example, the call might fail if the platform does not support the platform API (such as when running in a simulator). So, wrap the `invokeMethod` call in a `try-catch` statement.
-   Once you get the battery level, return it using the following code:

```java
// Get battery level.  static Future<String> getBatteryLevel() async {    String batteryLevel;    try {      final int result = await _channel.invokeMethod('getBatteryLevel');      batteryLevel = 'Battery level: $result%.';    } on PlatformException {      batteryLevel = 'Failed to get battery level.';    }    return batteryLevel;  }}
```

-   Now, replace the `example/lib/main.dart` file to contain a small user interface that displays the battery state in a string and a button for refreshing the value:

```java
import 'package:flutter/material.dart';import 'dart:async';
import 'package:flutter/services.dart';import 'package:batteryLevel/batteryLevel.dart';
void main() {  runApp(MaterialApp(home: MyApp()));}
class MyApp extends StatefulWidget {  @override  _MyAppState createState() => _MyAppState();}
class _MyAppState extends State<MyApp> {  String _batteryLevel = 'Unknown';
  @override  void initState() {    super.initState();  }
  // Platform messages are asynchronous, so we initialize in an async method.  Future<void> _getBatteryLevel() async {    String batteryLevel;    // Platform messages may fail, so we use a try/catch PlatformException.    try {      batteryLevel = await BatteryLevel.getBatteryLevel();    } on PlatformException {      batteryLevel = 'Failed to get platform version.';    }
    // If the widget was removed from the tree while the asynchronous platform    // message was in flight, and we want to discard the reply rather than calling    // setState to update our non-existent appearance.    if (!mounted) return;
    setState(() {      _batteryLevel = batteryLevel;    });  }
  @override  Widget build(BuildContext context) {    return Material(      child: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.spaceEvenly,          children: [            ElevatedButton(              child: Text('Get Battery Level'),              onPressed: _getBatteryLevel,            ),            Text(_batteryLevel),          ],        ),      ),    );  }}
```

### Step 3: Add Android Platform-Specific Implementation

Open `BatteryLevelPlugin.java` within `android/src/main/java/com/rudderstack/batteryLevel/` and make the changes as follows:

-   First, change the channel name in the initialization of `MethodChannel` object to `org.rudderstack.dev/battery` as follows:

```java
@Override  public void onAttachedToEngine(    @NonNull FlutterPluginBinding flutterPluginBinding  ) {    channel =      new MethodChannel(        flutterPluginBinding.getBinaryMessenger(),        "org.rudderstack.dev/battery"      );    channel.setMethodCallHandler(this);  }
```

-   Now, replace `onMethodCall` with the definition shown below to handle the `getBatteryLevel` call and respond with `batteryLevel` as follows:

```java
@Override  public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) {    if (call.method.equals("getBatteryLevel")) {      result.success(99);    } else {      result.notImplemented();    }  }
```

### Step 4: Add iOS Platform-Specific Implementation

Open `BatteryLevelPlugin.m` under `ios/Classes/` and make the following changes:

-   First, change the channel name in the initialization of `FlutterMethodChannel` object to `org.rudderstack.dev/battery` as follows:

```java
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {  FlutterMethodChannel* channel = [FlutterMethodChannel      methodChannelWithName:@"org.rudderstack.dev/battery"            binaryMessenger:[registrar messenger]];  BatteryLevelPlugin* instance = [[BatteryLevelPlugin alloc] init];  [registrar addMethodCallDelegate:instance channel:channel];}
```

-   Next, replace the `handleMethodCall` method with the definition below to handle the `getBatteryLevel` call and respond with `batteryLevel` as follows:

```java
- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {  if ([@"getBatteryLevel" isEqualToString:call.method]) {    result(@(99));  } else {    result(FlutterMethodNotImplemented);  }}
```

With this, we have successfully developed a custom plugin. Now you can run the plugin across any two platforms (Android and iOS) and understand how it works.

Publishing the Custom Plugin
----------------------------

Let's quickly look at a few instructions that you need to keep in mind after developing the custom plugin:

-   After developing the custom plugin, you can publish the custom plugin at [pub.dev](https://pub.dev/) so that other developers can easily use it. However, before publishing, review the `pubspec.yaml`, `README.md`, `CHANGELOG.md`, and `LICENSE` files to ensure that the content is complete and correct.
-   Next, run the publish command in the `dry-run` mode to see if everything passes the analysis:

$ flutter pub publish --dry-run

-   The next step is publishing to pub.dev, but ensure that you are ready because publishing is a final step that cannot be reverted:

$ flutter pub publish

For more details on publishing, check out the [publishing docs](https://dart.dev/tools/pub/publishing) on dart.dev.

References:

-   <https://flutter.dev/docs/development/packages-and-plugins/developing-packages>
-   <https://flutter.dev/docs/development/platform-integration/platform-channels?tab=android-channel-java-tab>

You can also check out the following Github repositories:

-   [Sample App created in this post.](https://github.com/desusai7/flutter-custom-plugin)
-   [Rudderstack's Flutter SDK](https://github.com/rudderlabs/rudder-sdk-flutter)

You can download Rudderstack`s Flutter SDK as a dependency for your Flutter Apps from [pub.dev](http://pub.dev/).

If you're interested in app development, check out [this post from G2i](https://www.g2i.co/blog/hiring-a-react-native-developer) on React Native to learn more about the most important skills and attributes for React Native developers.

Sign up for Free and Start Sending Data
---------------------------------------

Test out our event stream, ELT, and reverse-ETL pipelines. Use our HTTP source to send data in less than 5 minutes, or install one of our 12 SDKs in your website or app. [Get started](https://app.rudderlabs.com/signup?type=freetrial).