今天记录下FlutterWeb插件的开发，网上教程其实蛮多的。
但我想的是既然做插件，把各个端的都放在一个工程里面多好，然后我就尝试写了下：
首先，用AndroidStudio新建一个Flutter 插件项目。然后我们使用Web Chrome运行一下看看，界面如下：
很明显，WebPlugin.platformVersion, 在Web上是没有实现的。
接下来我们仿照一些大神分享的做法：
在插件的pubspec.yaml里面，找到dependencies,添加如下代码：
flutter_web_plugins:
sdk: flutter
复制代码在platforms下面，macos下面添加上web依赖类
plugin:
platforms:
android:
package: com.test.web_plugin
pluginClass: WebPlugin
ios:
pluginClass: WebPlugin
macos:
pluginClass: WebPlugin
复制代码修改后：
plugin:
platforms:
android:
package: com.test.web_plugin
pluginClass: WebPlugin
ios:
pluginClass: WebPlugin
macos:
pluginClass: WebPlugin
web:
pluginClass: WebPlugin #对应web插件的类名
fileName: web/web_plugin.dart #对应web插件的目录
复制代码然后我们到lib下新建web/web_plugin.dart这个文件，写上对应插件的实现，代码如下：
import ‘package:flutter/services.dart’;
import ‘package:flutter_web_plugins/flutter_web_plugins.dart’;
class WebPlugin {
static void registerWith(Registrar registrar) { // 仿照安卓插件添加默认静态方法即可
final MethodChannel channel = new MethodChannel(“web_plugin”,
const StandardMethodCodec(), registrar.messenger); //通讯channel
final webPlugin = WebPlugin();
channel.setMethodCallHandler(webPlugin.handler);// 消息处理
}
Future handler(MethodCall call) {
if (call.method == ‘getPlatformVersion’) {
return Future.value(‘Chrome 11’);
}
return null;
}
}
复制代码然后我们重新启动一下web看一下，
果然得到了我们想要的结果，到此为止说明我们的web方法也实现了。
但现在是假数据，我们尝试返回个真实浏览器信息吧，看看怎么用dart来做：
首先我们导入import ‘dart:html’ as html;
然后我们就可以用html来获取一些信息，或者做一些事情啦，改后的代码：
Future handler(MethodCall call) {
if (call.method == ‘getPlatformVersion’) {
return Future.value(html.window.navigator.appVersion);
}
return null;
}
复制代码得到的结果：
到此为止，我们的插件基本已经做好了。
对web感性的同学，可以看看html这个类都有些什么功能，测试测试。
