Flutter Plugin is a package containing dart code and a wrapper around the native code. It provides a way to call platform-specific code to access native features and functionalities from Flutter like camera functionality, working with maps, integrating with payment gateways, and much more.
To know how the plugin works under the hood. Checkout Flutter platform Channels and Flutter: Communicating with the Native Platform
Developing Flutter Plugin
In this blog, we will learn to create a Flutter Plugin that will transcribe the audio spoken by the user.
To help us with some of the boilerplate while creating a plugin, we will use very_good_cli.
First, install very very_good_cli and type.
*very_good create flutter_plugin audio_transcribe — desc “My new Flutter plugin” — platforms android,ios*
While it’s entirely possible to create a plugin without this tool,
very_good_clioffers convenience by generating boilerplate code.
After running the command above, four folders are created inside audio_transcribe. You have generated a federated plugin. Federated plugins are a way of splitting support for different platforms into separate packages. This modular approach enhances the manageability and organization of your plugin.
Now open audio_transcribe_platform_interface in the editor and open audio_transcribe_platform_interface.dart. You will see an abstract class extending PlatformInterface. PlatformInterface is a base class for platform interfaces of federated flutter plugins.
Now let’s add our method. To transcribe, we need a method to start listening, get text, and stop listening.
abstract class AudioTranscribePlatform extends PlatformInterface {
/// Constructs a AudioTranscribePlatform.
AudioTranscribePlatform() : super(token: _token);
static final Object _token = Object();
static AudioTranscribePlatform _instance = MethodChannelAudioTranscribe();
/// The default instance of [AudioTranscribePlatform] to use.
///
/// Defaults to [MethodChannelAudioTranscribe].
static AudioTranscribePlatform get instance => _instance;
/// Platform-specific plugins should set this with their own platform-specific
/// class that extends [AudioTranscribePlatform] when they register themselves.
static set instance(AudioTranscribePlatform instance) {
PlatformInterface.verify(instance, _token);
_instance = instance;
}
/// Return the current platform name.
Future getPlatformName();
/// Return the current platform name.
Future getAudioText();
/// Return the current platform name.
Future startListening();
/// Return the current platform name.
Future stopListening();
}
Now open audio_transcribe_ios and audio_transcribe_android as well. You will see an error in the classes which has extended AudioTranscribePlatform. Now add the following implementation to all the class that extends AudioTranscribePlatform.
@override
Future getPlatformName() {
return methodChannel.invokeMethod('getPlatformName');
}
@override
Future getAudioText() {
return methodChannel.invokeMethod('getAudioText');
}
@override
Future startListening() async{
return methodChannel.invokeMethod('startListening');
}
@override
Future stopListening()async {
return methodChannel.invokeMethod('stopListening');
}
Here, we are simply calling native API using the platform channel. To learn more ,checkout Flutter platform Channels
Now, let’s jump to the native side. First, we will implement functionality in Android followed by iOS.
Android
Open the a*ndroid* folder inside *audio_transcribe_android* in Android Studio.
Now open *AudioTranscribePlutin.kt*, and you will see unresolved references. You will see the FlutterPlugin interface implemented which allows Flutter developers to interact with a host platform and MethodCallHandler, a handler of incoming method calls.
As Android Studio doesn't recognize them we cannot continue further development.
Sure, technically, we can write code without the magic of code editor. But let’s be real — who wants to traverse the coding wilderness without the reassuring companionship of autocomplete, intelligent suggestions, and syntax highlighting?
To make our editor recognize these interfaces and use the magic of our editor. Let’s go to Project View and create a directory named **tempLibs**
Now find the flutter.jar file in *flutter/bin/cache/artifacts/engine/android-x64* and copy flutter.jar to **tempLibs.** You can find the location of the flutter installed by running the command where flutterin terminal.
Now add compileOnly files(‘tempLibs/flutter.jar’) inside dependencies in the *build.gradle* file. You can also add other activities that you might require. Your dependencies should look like this in build.gradle.
dependencies {
implementation 'androidx.appcompat:appcompat:1.6.1' // Added For asking permission
compileOnly files('tempLibs/flutter.jar')
}
After that sync the project and you are ready to develop a plugin for Android.
Compose your code just as you would for any native Android project, and call them from onMethodCall obtained by implementing **MethodCallHandler** which can be called from the flutter side using MethodChannel.
Here, I have edited the *AudioTranscribePlutin.kt* to transcribe the audio.
Don’t change the name of the class, It will not work. If you really want to change name of class change in pluginClass: in pubspec.yaml file of audio_transcribe_android as well. It is use to generate plugin registry.
Some other interfaces that you might need are:
- PluginRegistry.ActivityResultListener: Delegate interface for handling activity results on behalf of the main
[Activity](https://developer.android.com/reference/android/app/Activity.html?is-external=true "class or interface in android.app"). - ActivityAware:
[FlutterPlugin](https://api.flutter.dev/javadoc/io/flutter/embedding/engine/plugins/FlutterPlugin.html "interface in io.flutter.embedding.engine.plugins")that is interested in[Activity](https://developer.android.com/reference/android/app/Activity.html?is-external=true "class or interface in android.app")lifecycle events related to a[FlutterEngine](https://api.flutter.dev/javadoc/io/flutter/embedding/engine/FlutterEngine.html "class in io.flutter.embedding.engine")running within the given[Activity](https://developer.android.com/reference/android/app/Activity.html?is-external=true "class or interface in android.app").
You can view the code for Android here.
iOS
Open *audio_transcribe_ios* in the code editor, where our iOS Plugin code resides. However, you can’t open it in Xcode since it’s not an Xcode project.
Now open the iOS in Xcode found inside *example* folder of *audio_transcribe*.
Now drag the AudioTranscribePlugin.swift in Xcode.
If you see the error live Cannot find type ‘FlutterPlugin’ in scope, Run command
pod installandpod updatefrom terminal in the ios folder.
Customize the code within AudioTranscribePlugin.swift as you need for your iOS plugin and call them from the flutter side using the method channel which can be handled in **handle** function. I’ve made the necessary edits to AudioTranscribePlugin.swift enable audio transcription.
You can view the code for iOS here.
Ive reached the section in my write-up where you’re now equipped to develop your own plugin. A foundational understanding of both Android and iOS is crucial for navigating the intricacies of the code ahead. If you’re interested in examining the code firsthand, feel free to check it out on my GitHub.
With this, we have learned to create a flutter plugin for Android and iOS. Let's see the final result of the audio_transcribe plugin.
Stay Curious and Follow to make sure to catch the next post. Happy Coding!
Previous Post
[Flutter Platform Channels
Let’s learn how Platform Channels (derived from binary messaging platform) are used to communicate between Flutter and…medium.com](https://medium.com/codingmountain-blog/flutter-platform-channels-6e78c2fc75dc "medium.com/codingmountain-blog/flutter-plat..")
[Publish and upgrade your Flutter Package on pub.dev
You are developing your awesome flutter app implementation awesome functionalities and awesome widgets. Now you want to…medium.com](https://medium.com/codingmountain-blog/publish-and-upgrade-your-flutter-package-on-pub-dev-1b8cd3b206e8 "medium.com/codingmountain-blog/publish-and-..")