实际上，Flutter plugin跟Flutter工程里直接与原生交互的创建方式差不多，只是为了使功能模块更为清晰，实现组件化设计，我们需要自己动手创建
开始Flugin之前，我们简单介绍一下Flutter
图片.png
1.Flutter框架介绍
- Flutter框架包括:
Framework和Engine,他们运行在各自的Platform上。 -
Framework是Dart语言开发的,包括Material Design风格的Widgets和Cupertino(iOS-style)风格的Widgets,以及文本、图片、按钮等基础Widgets;还包括渲染、动画、绘制、手势等基础能力。 -
Engine是C++实现的,包括Skia(二维图形库);Dart VM(Dart Runtime);Text(文本渲染) -
Plugin其实就是一个特殊的Package。Flutter Plugin提供Android或者iOS的底层封装。在Flutter层提供组件功能,使Flutter可以较 方便的调取Native的模块
2. 创建一个Flugin
-
File-New-New Flutter Project-Flutter Flugin
1.png
- Android Studio： ⚠️命名为下划线分割，非驼峰，否则不能创建
- 终端创建：
flutter create --template=plugin 包名(flutter_package)
- 指定平台和语言：
flutter create --template=plugin -i swift -a kotlin 包名(flutter_package)
-
pubspec.yaml配置
name: flutter_cos#(插件名字 ，自动生成，与flugin命名一致)
description: 图片上传到Tencent cos插件 #(插件描述)
version: 0.0.1 #(插件版本)
homepage: //www.greatytc.com/u/008b37980d86#(你的主页，不写也行)
3. lib/plugin_name.dart下对MethodChannel的处理
以命名flutter_cos为例，lib路径下系统会自动帮我们创建一个flutter_cos.dart的文件
以及创建了以驼峰为命名的类，FlutterCos
我们在Flutter端使用MethodChannel的invokeMethod方法发起一次方法调用，invokeMethod方法会将其入参message和arguments封装成一个MethodCall对象，并使用MethodCodec将其编码为二进制格式数据，再通过 BinaryMessages将消息发出
-
MethodChannel：用于传递方法调用（method invocation） -
uploadImage：Flutter调用插件函数
class FlutterCos {
static const MethodChannel _channel =
const MethodChannel("com.carrot.cos/method");
///支持上传图片、文件，
///filePath：文件路径
///data ：接口返回的临时凭证
static Future<String> uploadImage(String filePath, Map data) async {
try {
return await _channel.invokeMethod(
"upload", <String, dynamic>{"filePath": filePath, "data": data});
} on PlatformException catch (e) {
print(e);
return null;
}
}
}
4. 与iOS原生交互部分
-
flutter_cose/ios/Classes/路径下自动生成FlutterCosPlugin.h,FlutterCosPlugin.m文件
代码部分
- 注册
registrar，组件通过实现registerWithRegistrar拿到FlutterPluginRegistrar进而拿到FlutterBinaryMessenger对象，设置消息回调代理。
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
FlutterCosPlugin* instance = [[CosPlugin alloc] init];
FlutterMethodChannel* channel =
[FlutterMethodChannel methodChannelWithName:@"com.carrot.cos/method"
binaryMessenger:[registrar messenger]];
[registrar addMethodCallDelegate:instance channel:channel];
}
- 收到消息的处理及回调。
upload是我们之前在lib/flutter_dart文件里定义的方法名 ，通过call.arguments获取到flutter传递过来的参数，收到具体实现类抛出的回调之后，通过FlutterResult传回给Flutter。
- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
if ([@"upload" isEqualToString:call.method]) {
NSString *filePath = call.arguments[@"filePath"];
NSDictionary *data = call.arguments[@"data"];
LNCOSUploader *loader = [[LNCOSUploader alloc]initWithFilePath:filePath];
[loader doStartWithData:data success:^(NSString * _Nonnull imageUrl) {
result(imageUrl);
} failure:^{
result(FlutterMethodNotImplemented);
}];
}
}
-
LNCOSUploader里具体实现初始化、上传图片
说句题外话
我们可以在示例代码里example/ios/Runner/下找到GeneratedPluginRegistrant文件，这是个系统生成的文件，他会帮你注册所有你引入flutter的插件，包括我们的FlutterCosPlugin。
-GeneratedPluginRegistrant文件在AppDelegate被调用注册
GeneratedPluginRegistrant.register(with: self)
5. 发布
- 当插件开发完毕，可以将插件发布让其他人使用，在发布之前，确保
pubspec.yaml、README.md以及CHANGELOG.md文件的内容都正确填写完毕。可以通过dry-run命令来看准备是否就绪。
flutter packages pub publish --dry-run
- 如果是第一次发布插件，需要填写你的 google账号及邮箱 ，另外需要标注版本号
sudo flutter packages pub publish
6. 如何引用
pubspec.yaml文件
- 如果是私有库
#cos插件
cos:
git:
url: https://git.code.XXXX.com/smart-retail-mobile/Flutter-lib/flutter_cos
ref: master
- 如果发布到pub.dev
#图片裁剪
image_crop: ^0.3.4
