创建一个Flutter与iOS原生交互插件

实际上，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: https://www.jianshu.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