Flutter Web 插件开发小记

今天记录下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<dynamic> handler(MethodCall call) {
    if (call.method == 'getPlatformVersion') {
      return Future.value('Chrome 11');
    }
    return null;
  }
}

然后我们重新启动一下web看一下，

果然得到了我们想要的结果，到此为止说明我们的web方法也实现了。

但现在是假数据，我们尝试返回个真实浏览器信息吧，看看怎么用dart来做：

首先我们导入import 'dart:html' as html; 然后我们就可以用html来获取一些信息，或者做一些事情啦，改后的代码：

Future<dynamic> handler(MethodCall call) {
    if (call.method == 'getPlatformVersion') {
      return Future.value(html.window.navigator.appVersion);
    }
    return null;
  }

得到的结果：

到此为止，我们的插件基本已经做好了。

对web感兴趣的同学，可以看看html这个类都有些什么功能，测试测试。

---

本人一直在做Flutter相关开发，为了更好地互相交流相关问题，刚刚搞了个群，欢迎大家加入呀，一起学习交流Flutter知识。