Flutter插件创建流程2(增加web支持)

在上一篇我介绍了支持安卓和IOS插件的开发，在这一节将会增加对web插件的支持

1.Add support for platforms in an existing plugin project

• 创建 flutter_plugin5_web ,和flutter_plugin5目录平级

• flutter create --template=plugin --platforms=web .

  
  image.png

2.web插件代码分析

web插件生成了一个method channel,这点相当于原生插件部分，然后根据接收到的信息进行相关处理，注意 static void registerWith(Registrar registrar) 方法，
提供注册调用

import 'dart:async';
// In order to *not* need this ignore, consider extracting the "web" version
// of your plugin as a separate package, instead of inlining it in the same
// package as the core of your plugin.
// ignore: avoid_web_libraries_in_flutter
import 'dart:html' as html show window;

import 'package:flutter/services.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

/// A web implementation of the FlutterPlugin5Web plugin.
class FlutterPlugin5WebWeb {
  static void registerWith(Registrar registrar) {
    final MethodChannel channel = MethodChannel(
      'flutter_plugin5',
      const StandardMethodCodec(),
      registrar,
    );

    final pluginInstance = FlutterPlugin5WebWeb();
    channel.setMethodCallHandler(pluginInstance.handleMethodCall);
  }

  /// Handles method calls over the MethodChannel of this plugin.
  /// Note: Check the "federated" architecture for a new way of doing this:
  /// https://flutter.dev/go/federated-plugins
  Future<dynamic> handleMethodCall(MethodCall call) async {
    switch (call.method) {
      case 'getPlatformVersion':
        return getPlatformVersion();
        break;
      default:
        throw PlatformException(
          code: 'Unimplemented',
          details: 'flutter_plugin5_web for web doesn\'t implement \'${call.method}\'',
        );
    }
  }

  /// Returns a [String] containing the version of the platform.
  Future<String> getPlatformVersion() {
    final version = html.window.navigator.userAgent;
    return Future.value(version);
  }
}

  plugin:
    platforms:
      web:
        pluginClass: FlutterPlugin5WebWeb
        fileName: flutter_plugin5_web_web.dart

3.Web插件在Example中使用

这种方式增加引入了flutter_plugin5_web模块，接收methondChannel的调用

在example中对于web模式下，会自动生成 generated_plugin_registrant.dart，做完插件注册的入口

import 'package:flutter_plugin5_web/flutter_plugin5_web_web.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
// ignore: public_member_api_docs
void registerPlugins(Registrar registrar) {
  FlutterPlugin5WebWeb.registerWith(registrar);
  registrar.registerMessageHandler();
}

dependencies:
  flutter:
    sdk: flutter
flutter_plugin5:
   path: ../
flutter_plugin5_web:
    path: ../../flutter_plugin5_web

4.优化引入方式

上面的引入需要在Example中增加引入flutter_plugin5_web，这一点不好，下面做一些调整.
在flutter_plugin5的pubspec.yaml中增加配置
default_package: flutter_plugin5_web和 flutter_plugin5_web的模块引入
其中default_package含义是指定具体的插件实现包是哪个(https://flutter.dev/go/federated-plugins)

在example中我们就不再需要单独引入flutter_plugin5_web了

 plugin:
    implements: flutter_plugin5
    platforms:
      android:
        package: com.kidswant.flutter_plugin5
        pluginClass: FlutterPlugin5Plugin
      ios:
        pluginClass: FlutterPlugin5Plugin
      web:
        default_package: flutter_plugin5_web
dependencies:
  flutter:
    sdk: flutter
  flutter_plugin5_web:
    path: ../flutter_plugin5_web

参考地址:
1.官方文档
2.How to Write a Flutter Web Plugin, Part 1
3.dart:html library