preface

When developing applications with Flutter, we introduce tripartit plug-ins that can be found on pub.dartlang.org/flutter to enable functions such as loading web pages with a WebView, implementing video controls, etc. Then configure the pubspec.yaml file in the FLUTTER project to import. So, what if we need to implement the function of the corresponding plug-in does not exist on the site, this time we need to develop our own specific plug-in. In this article, we’ll show you how to develop your own plug-ins and how to use them in your projects.

Develop Flutter plugins

Creating a plug-in project

First, we create a folder named demo_0414, and then create a plugin project based on the plugin template using the following FLUTTER command under that folder on the terminal command line

flutter create -t plugin flutter_plugin_demo
Copy the code

After execution, a Flutter Plugin project will be generated under the demo_0414 directory. Open the project directory structure using Android Studio as follows

This is the example project of the corresponding plugin. It is a Flutter Application project. After the function development of our plugin project is completed, The example project can be used to write some specific use examples of the Plugin API, so that readers can learn how to use the plug-in more quickly through example.

FlutterPluginDemo is a plugin class, which implements a method to obtain the Platform system version. The method obtains the version information through the implemented Platform Channel. The android and ios directories in the plugin project do have the corresponding Platform Channel implementation.

Plug-in function development

The plug-in project has implemented a plug-in class to obtain the platform system version number for us. Then, how to write the corresponding code if we want to achieve the function we need?

Android platform code added

Before adding android platform code, it is important to make sure that the plug-in code has been built once through the Example project, by executing the following command

// Execute firstcdFlutter_plugin_demo /example then execute flutter build apkCopy the code

After building the Android APK package in the Example project, you can open the Android project in the Example project through Android Studio. The project structure in the editor is as follows

We can see in the android project directory structure shows the corresponding Java plug-in class code in flutter_plugin_demo/Java/com. Example. Flutter_plugin_demo/directory, at this time we will be able to edit the file add the plug-in functionality.

IOS platform code added

Before adding the iOS platform code, make sure that the plug-in code has been built once through the Example project, as with Android, by executing the following command

// Execute firstcdFlutter_plugin_demo /example then execute flutter build ios --no-codesignCopy the code

After building, we can use Xcode to open the iOS project in The Example project, find Runner. Xcworkspace in the iOS directory and open it. The structure of the project in the editor is as follows

We can see that the plugin code is located at Pods/Development Pods/flutter_plugin_demo/.. /.. / example/ios /. Symlinks/plugins/directory, at this time we will be able to edit FlutterPluginDemoPlugin class to add the plug-in functionality.

Dart API code added

Adding the DART API code is much easier by directly adding it to the Dart file in the lib of the plug-in project

Use of plug-ins

How to use your own plug-in after development, there are three ways to reference it

  1. If you publish a plugin to the PUB, you can reference it in the normal way (publish it to the pub, everyone can use it, don’t do this if it is private).
Dependencies: dio: 2.1 xCopy the code
  1. Upload the plug-in project to the Git library, which can be referenced by specifying the Git address.
dependencies:
  dio:
    git:
      url: git://github.com/flutterchina/dio.git
Copy the code
  1. Local plug-ins can be introduced in a relative path;
< span style = "color: RGB (74, 74, 74); font-family: arial, helveda, Helveda, helveda, helveda, helveda. < span style = "font-size: 14px! Important; font-family:" Flutter_plugin_demo: path:.. /flutter_plugin_demoCopy the code

Once the plugin is introduced, we can use the functionality developed by the plugin through the Dart API in our Own Flutter project.

conclusion

The development process of the Flutter Plugin is quite simple. It is important to build the platform code using the Example project before adding the plugin code. This will display the plugin file in the Example project directory for editing.

The above steps can be used to create a Flutter plug-in project and add its functions. If a tripartite plugin is required to implement its functions, the tripartite plugin can also be introduced into the flutter project through pubspec.yaml. If we can’t find a good sharing plug-in when developing the sharing function, we can realize it ourselves. If you want to open it for everyone to use, you can also publish it to the pub to share it.

Description:

This article is reprinted from the corresponding “Flutter Programming Guide” wechat official account. For more Flutter related articles, open our wechat and scan our QR code to follow our wechat official account.