前端技术：一文带你掌握Flutter插件开发新姿势

淡淡的烟草味﹌ 2022-12-28 13:00 150阅读 0赞

导语 | 随着Flutter生态的快速发展，越来越多的Flutter插件涌现出来，那么如何开发一个Flutter插件呢？本文以具体的native\_image\_view插件为例，带你快速掌握Flutter插件的开发。 文章作者：赵哲，腾讯游戏运营研发工程师

一、概述

随着开发技术的发展，几乎所有主流的开发语言都有自己的包管理工具。Node开发有npm、Android开发有Gradle，Flutter也有自己的Dart Packages仓库。 **插件的开发和复用能够提高开发效率，降低工程的耦合度 **，像网络请求(http)、用户授权(permission\_handler)等客户端开发常用的功能模块，我们只需要引入对应插件就可以为项目快速集成相关能力，从而专注于具体业务功能的实现。

除了使用仓库中的流行组件以外，在Flutter项目开发过程中面对通用业务逻辑拆分、或者需要对原生能力封装等场景时，开发者仍然需要开发新的组件。 本文以一个具体的native\_image\_view插件为例，将从Flutter组件的创建、开发、测试和发布等多个方面进行介绍，力图完整的展示整个Flutter组件的开发和发布流程。

二、Flutter与Native通信

在Flutter插件开发过程中，几乎都会需要进行Flutter与Native端的数据交互，因此在进行插件开发之前，我们先简单了解下 **Platform Channel机制** 。

Flutter与Native的通信是通过Platform Channel实现的，它是一种C/S模型，其中Flutter作为Client，iOS和Android平台作为Host，Flutter通过该机制向Native发送消息，Native在收到消息后调用平台自身的API进行实现，然后将处理结果再返回给Flutter页面。

![a48d6f052486b9ad556f1e98bab0f263.png][]

Flutter中的Platform Channel机制提供了三种交互方式：

*  BasicMessageChannel ：用于传递字符串和半结构化信息；
 *  MethodChannel ：用于传递方法调用和处理回调；
 *  EventChannel：用于数据流的监听与发送。

这三种channel虽然用途不同，但都包含了三个重要的成员变量：

（1）String name

表示channel的名字，在一个项目中可能会有很多的channel，每个channel都应该使用唯一的命名标识，否则可能会被覆盖。推荐的命名方式是组织名称加插件的名称，例如：com.tencent.game/native\_image\_view，如果一个插件中包含了多个channel可再根据功能模块进一步进行区分。

（2）BinaryMessager messager

作为Native与Flutter通信的载体，能够将codec转换后的二进制数据在Native与Flutter之间进行传递。每个channel在初始化时都要生成或提供对应的messager，如果channel注册了对应的handler，则messager会维护一个name与handler的映射关系。

Native平台在收到对方发来的消息后，meesager会将消息内容分发给对应的handler进行处理，在处理完成后还可以通过回调方法result将处理结果返回给Flutter。

![5adbb14686fb82a5a5d55df26f65f881.png][]

（3）MessageCodec/MethodCodec codec

用于Native与Flutter通信过程中的编解码，在发送方能够将Flutter（或Native）的基础类型编码为二进制进行数据传输，在接收方Native（或Flutter）将二进制转换为handler能够识别的基础类型。

注：本文实现的native\_image\_share插件仅用到了最为常用的MethodChannel通信，Flutter通过MethodChannel将远程图片地址或本地图片文件名传递给原生侧，iOS和Android平台获取到图片后转换为二进制并通过result返回。更多关于MessageChannel和EventChannel的示例可以文末提供参考扩展阅读。

三、插件创建

Flutter组件根据是否包含原生代码可分为两种：

*  Flutter Package（包） ：仅包含dart代码，一般是对flutter特定功能的封装实现，例如用于网络请求的http包。
 *  Flutter Plugin（插件） ：除了dart代码之外，还包含了Android和iOS平台的代码实现，常用于将客户端原生的能力进行封装，然后提供给flutter项目使用。例如用于判断键盘可见状态的flutter\_keyboard\_visibility插件，就是分别在iOS和Android端监听了键盘的打开和关闭事件，然后将对应事件通过Platform Channel传递给Flutter项目。

![e5e33a8b0f6b0abc88dba7f278e0387d.png][]

Flutter插件可以通过Android Studio创建（需要在Android Studio中先安装Dart和Flutter插件），或者使用命令行创建。

**1. 创建Dart包**

使用--template=package声明创建的是只包含dart代码的package。

flutter create --template=package hello

![b546492bd17de093b96274396ca9b8bb.png][]

lib目录用于存放package的代码实现，Flutter脚手架会自动生成一个与package同名的dart文件。

pubspec.yaml文件想必做过Flutter开发的同学都非常熟悉，我们开发package所依赖的package或者plugin都需要在该文件中声明。

**2. 创建Flutter插件**

*  使用--template=plugin声明创建的是同时包含了iOS和Android代码的plugin；
 *  使用--org选项指定组织，一般采用反向域名表示法；
 *  使用-i选项指定iOS平台开发语言，objc或者swift；
 *  使用-a选项指定Android平台开发语言，java或者kotlin。

flutter  create --template=plugin --org com.tencent.game -i objc -a java

native\_image\_view

![6417970e2cbaa0191c35a7728ef2cbea.png][]

相比Package，我们可以看到Plugin多出了一些目录，android目录用于Android平台的代码实现，ios目录用于iOS平台的代码实现，example目录用于该组件的调试。

注：Flutter脚手架在创建Plugin时默认实现了一个获取系统版本号的示例，该示例的原理是分别在iOS和Android平台获取到系统版本号，然后通过MethodChannel调用返回给Flutter平台显示。

四、插件开发

Plugin和Package的开发和发布流程基本一致，相比之下Plugin还涉及到iOS和Android的开发，实现起来要更加复杂一些。

在Flutter嵌入原生项目的场景中，比较常见的一个问题是：Flutter和原生项目中都使用了同一张图片时，两侧会分别进行存储，即该图片会被存储两次。不同于Weex、Hippy等基于JS的跨平台框架是依赖于原生进行图片的获取和显示，Flutter是自行进行图片的管理并直接通过Skia引擎直接进行绘制的。

针对这一问题，本文将开发一个Flutter插件(native\_image\_view)，把Flutter图片的下载和缓存工作交给Native实现，Flutter端则仅负责图片的绘制。此外，我们还可以定义一个特殊协议，用于处理本地图片的调用，同时解决Flutter无法复用原生项目本地图片的问题。

![1c589f8d0319ffaf79c3c3c2f560c4a4.png][]

注：本文开发的插件仅用于介绍插件的开发和发布流程，不建议在生成环境中直接使用，关于图片二次缓存问题还可以参考扩展阅读中关于Texture(外接纹理)的文章。

### **1. Flutter端开发** ###

我们首先在Flutter端声明了插件的MethodChannel，然后在initState方法中通过invokeMethod(方法名，参数)发起了对Native端的方法调用，在build方法中先显示图片的打底图，待图片数据返回后再调用setState，使用Image.memory方法将二进制数据绘制成图片显示。

native\_image\_view.dart：

class _NativeImageViewState extends State<NativeImageView> {
      Uint8List _data;
      static const MethodChannel _channel =
          const MethodChannel('com.tencent.game/native_image_view');
      @override
      void initState() {
        super.initState();
        loadImageData();
      }
     
      loadImageData() async {
        _data = await _channel.invokeMethod("getImage", {"url": widget.url});
        setState(() {});
      }
     
      @override
      Widget build(BuildContext context) {
        return _data == null
            ? Container(
                color: Colors.grey,
                width: widget.width,
                height: widget.height,
              )
            : Image.memory(
                _data,
                width: widget.width,
                height: widget.height,
                fit: BoxFit.cover,
              );
      }
    }

### **2. Native端开发** ###

（1）iOS开发

插件的iOS平台使用SDWebImage组件进行网络图片的下载和缓存，因此在native\_image\_view.podspec文件中声明依赖。

s.dependency 'Flutter'
    s.dependency 'SDWebImage'
    s.platform = :ios, '8.0'

Flutter脚手架自动为我们生成了NativeImageViewPlugin.m文件和registerWithRegistrar方法，该方法是组件执行的入口，会被Flutter的插件管理器自动调用。

我们在该方法中使用与Flutter端相同的name创建MethodChannel，并创建插件对象的实例，用于处理Flutter端的方法调用。handleMethodCall方法会在MethodChannel收到Flutter端的方法调用后被触发，开发者可以通过FlutterMethodCall获取方法名和参数，通过FlutterResult返回图片内容。

NativeImageViewPlugin.m：

//插件注册接口，Flutter自动调用
    + (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
      FlutterMethodChannel* channel = [FlutterMethodChannel
          methodChannelWithName:@"com.tencent.game/native_image_view"
                binaryMessenger:[registrar messenger]];
      NativeImageViewPlugin* instance = [[NativeImageViewPlugin alloc] init];
      [registrar addMethodCallDelegate:instance channel:channel];
    }
     
    - (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
      if ([@"getImage" isEqualToString:call.method]) {
          [self getImageHandler:call result:result];
      } else {
          result(FlutterMethodNotImplemented);
      }
    }

在处理Flutter端发起的图片调用时，首先判断Flutter请求的是本地还是网络图片，如果是本地图片则直接根据UIImage对象读取图片的二进制数据返回；如果是网络图片则先判断是否存在本地缓存，有缓存直接返回，无缓存则需要先下载图片然后再返回数据。

- (void)getImageHandler:(FlutterMethodCall*)call result:(FlutterResult)result{
      if(call.arguments != nil && call.arguments[@"url"] != nil){
          NSString *url = call.arguments[@"url"];
          if([url hasPrefix:@"localImage://"]){
            //获取本地图片
            NSString *imageName = [url stringByReplacingOccurrencesOfString:@"localImage://" withString:@""];
            UIImage *image = [UIImage imageNamed:imageName];
            if(image != nil){
                NSData *imgData = UIImageJPEGRepresentation(image,1.0);
                result(imgData);
            }else{
                result(nil);
            }
          }else {
            //获取网络图片
            UIImage *image = [[SDImageCache sharedImageCache] imageFromCacheForKey:url];
            if(!image){
              //本地无缓存，下载后返回图片
              [[SDWebImageDownloader sharedDownloader] 
                downloadImageWithURL:[[NSURL alloc] initWithString:url] 
                completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {
                  if(finished){
                    result(data);
                    [[SDImageCache sharedImageCache] storeImage:image forKey:url completion:nil];
                  }
                }];
            }else{
              //本地有缓存，直接返回图片
              NSData *imgData = UIImageJPEGRepresentation(image,1.0);
              result(imgData);
            }
          }
      }
    }

（2）Android开发

插件的Android平台使用Glide组件进行网络图片的下载和缓存，需要在build.gradle文件中声明依赖。

dependencies {
        implementation 'com.github.bumptech.glide:glide:4.11.0'
        annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
    }

为了兼容历史版本，Android端的插件需要在onAttachedToEngine和registerWith方法中实现相同的MethodChannel注册与监听的逻辑，onMethodCall用于处理Flutter中的方法调用，也提供了与iOS平台类似的MethodCall和Result对象。

android/src/main/xxxx/NativeImageViewPlugin.java：

//新的插件注册接口
    @Override
    public void onAttachedToEngine(FlutterPluginBinding flutterPluginBinding) {
      channel = new MethodChannel(flutterPluginBinding.getFlutterEngine().getDartExecutor(), "com.tencent.game/native_image_view");
      channel.setMethodCallHandler(this);
      setContext(flutterPluginBinding.getApplicationContext());
    }
     
    @Override
    public void onDetachedFromEngine(FlutterPluginBinding binding) {
      channel.setMethodCallHandler(null);
    }
     
    // Flutter-1.12之前的插件注册接口，功能与onAttachedToEngine一样
    public static void registerWith(Registrar registrar) {
      NativeImageViewPlugin plugin = new NativeImageViewPlugin();
      plugin.setContext(registrar.context());
      final MethodChannel channel = new MethodChannel(registrar.messenger(), "com.tencent.game/native_image_view");
      channel.setMethodCallHandler(plugin);
    }
     
    @Override
    public void onMethodCall(final MethodCall call,final Result result) {
      if (call.method.equals("getImage")) {
        getImageHandler(call,result);
      } else {
        result.notImplemented();
      }
    }

Android端的代码实现逻辑与iOS一致，也是先判断Flutter调用的是本地还是网络图片，对于本地图片先根据文件名获取到图片的Bitmap，然后转成byte数组返回；对于网络图片的缓存和下载基于Glide组件实现，在获取到文件缓存或下载路径后，再将文件读取为byte数组返回。

public void getImageHandler(final MethodCall call,final Result result){
      HashMap map = (HashMap) call.arguments;
      String urlStr = map.get("url").toString();
      Uri uri = Uri.parse(urlStr);
      if("localImage".equals(uri.getScheme())){
        String imageName = uri.getHost();
        int lastIndex = imageName.lastIndexOf(".");
        if(lastIndex > 0){
          imageName = imageName.substring(0,lastIndex);
        }
        String imageUri = "@drawable/"+imageName;
        int imageResource = context.getResources().getIdentifier(imageUri, null, context.getPackageName());
        if(imageResource > 0){
          Bitmap bmp = BitmapFactory.decodeResource(context.getResources(),imageResource);
          ByteArrayOutputStream stream = new ByteArrayOutputStream();
          bmp.compress(Bitmap.CompressFormat.PNG, 100, stream);
          byte[] byteArray = stream.toByteArray();
          result.success(byteArray);
        }else{
          result.error("NOT_FOUND","file not found",call.arguments);
        }
      }else {
        Glide.with(context).download(urlStr).into(new CustomTarget<File>() {
          @Override
          public void onResourceReady(@NonNull File resource, @Nullable Transition<? super File> transition) {
            byte[] bytesArray = new byte[(int) resource.length()];
            try {
              FileInputStream fis = new FileInputStream(resource);
              fis.read(bytesArray);
              fis.close();
              result.success(bytesArray);
            } catch (IOException e) {
              e.printStackTrace();
              result.error("READ_FAIL",e.toString(),call.arguments);
            }
          }
          @Override
          public void onLoadFailed(@Nullable Drawable errorDrawable) {
            super.onLoadFailed(errorDrawable);
            result.error("LOAD_FAIL","image download fail",call.arguments);
          }
          @Override
          public void onLoadCleared(@Nullable Drawable placeholder) {
            result.error("LOAD_CLEARED","image load clear",call.arguments);
          }
        });
      }
    }

五、插件测试

Flutter脚手架在创建插件的时候自动生成了example项目，该项目通过指定插件path的方式引用了我们正在开发中的组件，让我们在发布插件之前可以进行充分的测试。

native\_image\_view :

path : ../

example项目除了开发调试之外，还是一种很好的插件使用示例。相比于文档，很多开发者更喜欢直接看插件example的代码实现。我们在main.dart中展示了网络图片的使用，本地图片需要原生项目中存在对应文件才可以。

main.dart：

String url = "https://iknow-pic.cdn.bcebos.com/79f0f736afc379313a380ef3e7c4b74542a91193";
    //String url = "localImage://wdqy.jpeg";
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('example'),
          ),
          body: Center(
          child: NativeImageView(
            url: url,
            width: 300,
            height: 200,
          ),
        ),
      ));
    }

六、插件发布

插件开发完成后就进入了发布环节，为了便于后续维护和用户反馈问题，我们将插件在github上进行维护，并在插件的pubspec.yaml文件中填写仓库地址。

name: native_image_view
    description: 该组件提供了一种方式，可以让flutter通过methodChannel调用原生的本地和网络图片的加载
    version: 0.0.1
    repository: https://github.com/qianshou/native_image_view

在提交仓库之前，我们需要先运行dry-run命令检查组件目前是否符合发布要求。

flutter pub publish --dry-run

如图所示，flutter脚手架为我们创建的pubspec.yaml文件中可能会包含author(或authors)字段，该字段已经废弃，需要删除该字段，如果要关联作者需要通过 *verified publisher **\[10\] *。

![78e8a5a9473cb2da61abced1c39031ab.png][]

Flutter脚手架为我们创建的LICENSE文件是空的，需要开发者自行填写插件的开源协议。如果不填写的话dry-run不会提示，但在仓库发布那一步还是会报错。

### **1. 公共仓库** ###

切记，发布在公共仓库中的插件将永久存在，flutter pub不允许开发者撤回已发布的插件，因为插件一旦发布就可能有项目依赖，而撤回组件将会破坏这种依赖关系。

直接使用publish命令，将插件发布到公共仓库：

flutter pub publish

在发布插件的过程中，可能会要求开发者登录谷歌账号进行验证，根据提示拷贝url地址在浏览器中打开，登录账户并授权即可。

![6daa68b8c194e369f2cd57926af9584b.png][]

在插件发布成功后，一般不能立即搜索到，需要等待pub仓库进行同步，大概15分钟左右，就可以在 *https://pub.dev/ *中搜索到刚刚发布的插件了。

![a3feef79db61aad1ebc2c24c46a878af.png][]

公共仓库插件的使用非常简单，在插件发布以后，任何一个项目都可以通过pubspec.yaml引用该插件。

dependencies :

native\_image\_view : ^0 .0 .1

### **2. 私有仓库** ###

Flutter默认发布到公共仓库，并且一旦发布就不能撤回。出于安全性考虑，在实际的业务开发中有一些组件我们暂时不想开源，而是仅限团队或公司内部使用。

这种业务场景中，一种选择是不发布组件，直接在pubspec.yaml中通过path指定本地路径、或者通过git指定仓库地址；另一种选择则是搭建内部pub仓库，将插件发布到私有仓库中。

（1）搭建私有仓库

Flutter官方提供了基于dart的pub\_server组件，可以快速搭建本地运行的私有仓库服务器。pub\_server没有提供类似公共仓库的web网站，但是在shelf\_pubserver.dart文件中定义了仓库组件的上传、下载和删除等接口，如果有需要也可以基于该接口快速搭建web服务。

（2）配置dart运行环境

brew tap dart-lang/dart

brew install dart

（3）安装并运行pub\_server

git clone https://github.com/dart-lang/pub_server.git
    cd pub_server
    pub get
    dart example/example.dart -d /tmp/package-db -h 192.168.1.3 -p 8081

（4）发布到私有仓库

发布到私有仓库需要在pubspec.yaml文件中新增一个publish\_to字段，指定私有仓库的地址。

publish\_to: http: //192.168.1.3:8081

在发布插件时需要在发布指令中指定私有仓库的地址。

flutter packages pub publish --server=http: //192.168.1.3:8081

通过pub\_server服务日志可以看到插件上传接口被调用，插件被成功上传到了私有仓库中。

![9aeab7593d645e04394ad2cc98c606ef.png][]

（5）引用私有仓库组件

不同于公共仓库，在引用私有仓库中的插件时需要在pubspec.yaml文件中，通过hosted参数指定私有仓库的地址。

native_image_view:
      version: 0.0.1
      hosted:
        name: native_image_view
        url: http://192.168.1.3:8081

七、结语

本文首先介绍了Platform Channel机制，然后根据具体的业务需求详细的介绍了native\_image\_view插件的创建、开发和测试的过程，最后介绍了公共仓库和私有仓库的发布与使用。

Flutter组件不仅可以提供dart功能，也可以是对原生功能的封装。为了提高项目的可扩展性，减少Flutter与原生项目的耦合，将通用功能封装Flutter组件是无疑一种更好的选择。

由于时间的关系，笔者的研究尚不深入，希望能够在大家开发Flutter插件时提供一些帮助，如有疏漏和错误，欢迎在评论区留言指正交流～

## 扩展阅读： ##

*\[1\] Flutter文档:*

https://dart.dev/tools/pub/publishing\#publishing-is-forever

*\[2\] Popular Licenses:*

https://opensource.org/licenses

*\[3\] 闲鱼Flutter图片框架架构演进:*

https://www.yuque.com/xytech/flutter/cvol6i

*\[4\] Flutter Pub私有仓库搭建:*

https://www.jianshu.com/p/9ee523958b23

*\[5\] Flutter公共仓库(native\_image\_view插件):*

https://pub.dev/packages/native\_image\_view

*\[6\] 有赞Flutter插件开发与发布:*

https://cloud.tencent.com/developer/article/1685575

*\[7\] Flutter实战图片组件演进之外接纹理解析:*

https://juejin.cn/post/6854573220054925320

*\[8\] Flutter插件开发需要了解的EventChannel与MethodChannel:*

https://cloud.tencent.com/developer/article/1568736

*\[9\] How to develop a platform channel in Flutter between Dart and Native Code:*

https://medium.com/47billion/creating-a-bridge-in-flutter-between-dart-and-native-code-in-java-or-objectivec-5f80fd0cd713

*\[10\]  verified publisher:*

*https://dart.dev/tools/pub/publishing\#verified-publisher*

[a48d6f052486b9ad556f1e98bab0f263.png]: /images/20221120/3be317e640bd4ebe8383bcf5cf62758a.png
[5adbb14686fb82a5a5d55df26f65f881.png]: /images/20221120/c1b9beb1142c4361b3211679920cd688.png
[e5e33a8b0f6b0abc88dba7f278e0387d.png]: /images/20221120/31a79d9383684235ad1d9cf851b8f36a.png
[b546492bd17de093b96274396ca9b8bb.png]: /images/20221120/803ab52e3af4402e9291d53feaf76b63.png
[6417970e2cbaa0191c35a7728ef2cbea.png]: /images/20221120/4da633062d884bb8aa994a7c230ffb26.png
[1c589f8d0319ffaf79c3c3c2f560c4a4.png]: /images/20221120/a58e0b7c686d487399e68fffc0f3618b.png
[78e8a5a9473cb2da61abced1c39031ab.png]: /images/20221120/43cb0f7b4dc44e34bcfdfcd288c0814c.png
[6daa68b8c194e369f2cd57926af9584b.png]: /images/20221120/dfbf216dd47a4d21b6b4a15237283b09.png
[a3feef79db61aad1ebc2c24c46a878af.png]: /images/20221120/c4e3df8f4fc847f0a8782f948bee3e6c.png
[9aeab7593d645e04394ad2cc98c606ef.png]: /images/20221120/fdd0fd189c764bc5ae0100273d17cc3b.png