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這個類都有些什麼功能，測試測試。