一統天下 flutter - 插件: flutter 與 web 原生之間的數據通信

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd

一統天下 flutter - 插件: flutter 與 web 原生之間的數據通信

示例如下:

lib\plugin\plugin.dart

/*
 * 插件
 * 本例用於演示 flutter 與 android/ios/web 原生之間的數據通信
 *
 * 一、android 插件開發
 * 1、主 flutter 項目要先在 android 平臺中運行一下
 * 2、在 android 文件夾上，使用右鍵菜單，然後選擇 Flutter -> Open Android module in Android Studio 即可開發插件
 * 3、參見 /android/app/src/main/kotlin/com/example/flutter_demo/MainActivity.kt
 *
 * 二、ios 插件開發
 * 1、主 flutter 項目要先在 ios 平臺中運行一下
 * 2、在 android studio 或 visual studio code 中執行如下邏輯
 *    cd ios
 *    pod install
 * 3、用 xcode 中打開 /ios/Runner.xcworkspace 即可開發插件
 * 4、參見 /ios/Runner/AppDelegate.swift
 *
 * 三、web 插件開發
 * 1、爲了在 flutter 中調用 js，需要在 pubspec.yaml 中做如下配置
 * dependencies:
 *   flutter_web_plugins:
 *     sdk: flutter
 *   js: ^0.6.5
 * 2、爲了開發 web 插件，需要在 pubspec.yaml 中做如下配置
 * flutter:
 *   plugin:
 *     platforms:
 *       web:
 *         fileName: plugin/flutter_plugin_web.dart      # 實現了 web 插件的文件的文件名
 *         pluginClass: FlutterPluginWeb                 # 實現了 web 插件的類名
 * 3、在 /web/index.html 中開發具體的 js 邏輯
 * 4、在 plugin/flutter_plugin_web.dart 開發 web 插件邏輯，包括 flutter 與 js 之間的方法映射等
 *
 *
 * 注：插件中實現的功能（非 .dart 實現的）不支持 flutter 的 hot reload
 */

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_demo/helper.dart';

class PluginDemo extends StatefulWidget {
  const PluginDemo({Key? key}) : super(key: key);

  @override
  _PluginDemoState createState() => _PluginDemoState();
}

class _PluginDemoState extends State<PluginDemo> {

  String text = "";

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('title'),
      ),
      backgroundColor: Colors.orange,
      body: Center(
        child: MyText(text),
      ),
      persistentFooterButtons: [
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method1();
            setState(() {
              text = result;
            });
          },
          child: const Text("method1"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method2();
            setState(() {
              text = result;
            });
          },
          child: const Text("method2"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method3();
            setState(() {
              text = result;
            });
          },
          child: const Text("method3"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method4();
            setState(() {
              text = result;
            });
          },
          child: const Text("method4"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method5();
            setState(() {
              text = result;
            });
          },
          child: const Text("method5"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method6();
            setState(() {
              text = result;
            });
          },
          child: const Text("method6"),
        ),
      ],
    );
  }
}


/// 使用插件
class MyPlugin {
  /// 獲取指定名稱的 MethodChannel（其用於 flutter 和插件之間的通信）
  static final MethodChannel _methodChannel = const MethodChannel("com.webabcd.flutter/channel1")
    ..setMethodCallHandler(_callHandler); /// 插件調用 flutter 時會執行這裏

  /// 用於演示如何接收插件調用 flutter 時的方法名和參數值
  static Future<dynamic> _callHandler(MethodCall call) async {
    log("method:${call.method}, arguments:${call.arguments}");
  }

  static Future<String> method1() async {
    /// flutter 調用插件中的方法
    return await _methodChannel.invokeMethod("method1");
  }

  static Future<String> method2() async {
    /// flutter 調用插件中的方法，並傳遞一個字符串類型的參數
    return await _methodChannel.invokeMethod("method2", "abc");
  }

  static Future<String> method3() async {
    /// flutter 調用插件中的方法，並傳遞一個字典表類型的參數
    var map = {"name": "webabcd", "age": 43};
    return await _methodChannel.invokeMethod("method3", map);
  }

  static Future<String> method4() async {
    /// flutter 調用插件中的方法，並傳遞一個列表類型的參數
    var list = [1, 2, 3];
    return await _methodChannel.invokeMethod("method4", list);
  }

  static Future<String> method5() async {
    /// flutter 調用插件中的方法，並捕獲異常
    try {
      return await _methodChannel.invokeMethod("method5");
    } on PlatformException catch(e) {
      return "調用 method5 異常 code:${e.code}, message:${e.message}, details:${e.details}";
    }
  }

  static Future<String> method6() async {
    /// flutter 調用插件中的方法，但是插件中沒有這個方法
    try {
      return await _methodChannel.invokeMethod("method6");
    } on MissingPluginException catch(e) {
      return "調用 method6 異常 ${e.toString()}";
    }
  }
}

lib\plugin\flutter_plugin_web.dart

/*
 * 本例用於演示 web 插件的開發（flutter 與 web 原生之間的數據通信）
 * 這裏用於註冊插件，以及配置 flutter 與 js 之間的方法映射等
 * 具體的插件邏輯請參見 /web/index.html
 *
 * web 插件的開發與 android/ios 插件的開發不太一樣
 * android/ios 的插件註冊和插件邏輯，完全是在 android 端和 ios 端實現的
 * web 的插件註冊，以及 flutter 與 js 之間的方法映射是在 flutter 端實現的，具體的插件邏輯是在 web 端實現的
 *
 *
 * 在 pubspec.yaml 中做如下配置，然後 flutter pub get
 * # 爲了在 flutter 中調用 js
 * dependencies:
 *   flutter_web_plugins:
 *     sdk: flutter
 *   js: ^0.6.5
 * flutter:
 *   # 爲了開發 web 插件
 *   plugin:
 *     platforms:
 *       web:
 *         fileName: plugin/flutter_plugin_web.dart      # 實現了 web 插件的文件的文件名
 *         pluginClass: FlutterPluginWeb                 # 實現了 web 插件的類名
 *
 *
 * 注：
 * 本例介紹的 flutter 與 js 通信的方法有一些麻煩，但是可以和 android/ios 插件的接口保持一致，這樣對於 flutter 的開發來說，其與 android/ios/web 通信的方法都是一樣的
 * 如果沒有上述要求，則可以用更簡單的通信方式，參見 flutter_plugin_web2.dart
 */

import 'dart:async';

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

/// 在 flutter 中調用 xxx() 後，就會調用 js 中的 window.alert()
@JS('window.alert')
external void xxx(Object obj);

/// 在 js 中調用 webabcd_jsToFlutter() 後，就會調用 flutter 中的 jsToFlutter()
@JS('webabcd_jsToFlutter')
external set jsToFlutter(void Function(String method, dynamic arguments) f);

/// 在 flutter 中調用 flutterToJs() 後，就會調用 js 中的 webabcd_flutterToJs()
@JS("webabcd_flutterToJs")
external dynamic flutterToJs(String method, dynamic arguments);

/// 這個類名就是在 pubspec.yaml 中配置的 web 插件的類名
class FlutterPluginWeb {

  /// 註冊自定義插件，用於演示 flutter 與 web 原生之間的數據通信
  static void registerWith(Registrar registrar) {
    /// 創建一個 MethodChannel 並指定其名稱，它用於 flutter 和 web 插件之間的通信（在 flutter 中通過名稱獲取此 channel 後就可以通信了）
    final MethodChannel methodChannel = MethodChannel(
      'com.webabcd.flutter/channel1',
      const StandardMethodCodec(),
      registrar,
    );

    /// flutter 調用 web 插件中的方法時，會執行到這裏
    final flutterPluginWeb = FlutterPluginWeb();
    methodChannel.setMethodCallHandler(flutterPluginWeb._methodCallHandler);

    /// 在 js 中調用 webabcd_jsToFlutter() 後，會執行到這裏
    jsToFlutter = allowInterop((String method, dynamic arguments) {
      /// 用於演示 web 插件調用 flutter
      /// 對於本例來說，調用這句後，就會在 plugin.dart 中的 MyPlugin 的 _callHandler() 中接收到此回調
      methodChannel.invokeMethod(method, arguments);
    });

    /// flutter 調用 js
    xxx("插件註冊完成");
  }

  /// flutter 調用 web 插件中的方法時
  Future<dynamic> _methodCallHandler(MethodCall call) async {
    switch (call.method) {
      case 'method1':
        /// 調用 js 中的 webabcd_flutterToJs()
        /// 本例演示的是如何調用 js 中的 Promise，如果 js 中不用 Promise 的話則把這裏的 promiseToFuture() 去掉即可
        /// 對於本例來說，這裏的返回值，會在 plugin.dart 中的 MyPlugin 的 method1() 中收到
        return promiseToFuture(flutterToJs(call.method, call.arguments));
      case 'method2':
        return promiseToFuture(flutterToJs(call.method, call.arguments));
      case 'method3':
        return promiseToFuture(flutterToJs(call.method, call.arguments));
      case 'method4':
        return promiseToFuture(flutterToJs(call.method, call.arguments));
      case 'method5':
        return promiseToFuture(flutterToJs(call.method, call.arguments));

        /// 可以用如下方式返回給 flutter 一個自定義異常信息（flutter 中可以通過 try/catch 捕獲到一個 PlatformException 類型的異常）
        /*
        throw PlatformException(
          code: 'errorCode',
          message: "errorMessage",
          details: "errorDetails",
        );
        */
      case 'method6':
        /// 如果 web 插件中沒有 flutter 調用的方法，則可以返回如下異常（flutter 中可以通過 try/catch 捕獲到一個 MissingPluginException 類型的異常）
        throw MissingPluginException();
      default:
        return "unimplemented";
    }
  }
}

web\index.html

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="flutter_demo">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>flutter_demo</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });

    // flutter 的 web 插件的具體邏輯
    // 在 flutter 中調用 flutterToJs() 後，就會調用 js 中的 webabcd_flutterToJs()
    window.webabcd_flutterToJs = async (method, arguments) => {
      const promise = new Promise((resolve, reject) => {
        if (method == "method1" ) {
          let returnValue = method1();
          // 返回給 flutter 的結果
          resolve(returnValue);

          // 用於演示 js 調用 flutter
          // 在 js 中調用 webabcd_jsToFlutter() 後，就會調用 flutter 中的 jsToFlutter()
          window.webabcd_jsToFlutter('js to flutter', "param");
        }

        else if (method == "method2" ) {
          let returnValue = method2(arguments);
          resolve(returnValue);
        }

        else if (method == "method3" ) {
          let name = arguments._get("name");
          let age = arguments._get("age");
          let returnValue = method3(name, age);
          resolve(returnValue);
        }

        else if (method == "method4" ) {
          let returnValue = method4(arguments);
          resolve(returnValue);
        }

        else if (method == "method5" ) {
          // 通過 Promise 的 reject() 返回一個異常信息，在 flutter 中可以通過 try/catch 捕獲到一個 PlatformException 類型的異常
          reject("errorMessage");
        }
      });
      return promise;
    }

    function method1() {
      return "調用 method1 成功";
    }

    function method2(param) {
      return `調用 method2 成功 param:${param}`;
    }

    function method3(name, age) {
      return `調用 method3 成功 name:${name}, age:${age}`;
    }

    function method4(params) {
      return `調用 method4 成功 ${params.join(',')}`;
    }

  </script>
</body>
</html>

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd