一統天下 flutter - 插件: flutter 使用 web 原生控件，並做數據通信

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

一統天下 flutter - 插件: flutter 使用 web 原生控件，並做數據通信

示例如下:

lib\plugin\plugin2.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 原生控件，以及 flutter 與 js 的通信
 * 1、參見 /lib/plugin/flutter_plugin_web2.dart
 *
 *
 * 注：插件中實現的功能（非 .dart 實現的）不支持 flutter 的 hot reload
 */

import 'dart:async';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../helper.dart';

/// 這裏要注意，如果編譯的時候，目標平臺不是 web 環境，那麼如果項目中 import 了 dart:js, dart:ui, dart:html 之類的庫，則會報類似如下的錯誤
/// FileSystemException(uri=org-dartlang-untranslatable-uri:dart%3Ahtml; message=StandardFileSystem only supports file:* and data:* URIs)
/// 此時，就需要用如下的方式 import
/// 下面的 import 的意思是：導入 flutter_plugin_web2_stub.dart，但是編譯爲 web 時（即 dart.library.js 爲真）則導入 flutter_plugin_web2.dart
/// flutter_plugin_web2_stub.dart 裏的對外的方法定義與 flutter_plugin_web2.dart 是一樣的
/// 但是 flutter_plugin_web2_stub.dart 中沒有具體的邏輯，不會導入 dart:js, dart:ui, dart:html 之類的庫，這樣就保證了編譯爲非 web 時不會報錯
/// 而 flutter_plugin_web2.dart 有具體的邏輯，會導入 dart:js, dart:ui, dart:html 之類的庫，這樣就保證了編譯爲 web 時會包括相關的邏輯
import 'flutter_plugin_web2_stub.dart' if (dart.library.js) "flutter_plugin_web2.dart";

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

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

class _Plugin2DemoState extends State<Plugin2Demo> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('title'),
      ),
      body: const _MyWidget()
    );
  }
}


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

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

class _MyWidgetState extends State<_MyWidget> {

  /// 用於保存從 android/ios 發送到 flutter 的數據
  String _nativeToFlutterMessage = '';
  /// 用於控制 android/ios 和 flutter 通信的 controller
  final _controller = _MyViewController();

  @override
  void initState() {

    _controller.addListener(() {
      setState(() {
        _nativeToFlutterMessage = _controller.nativeToFlutterMessage;
      });
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: Container(
            color: Colors.red,
            child: _buildNativeView(),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.green,
            child: _buildFlutterView(),
          ),
        ),
      ],
    );
  }

  /// 嵌入到 flutter 中的 android/ios 的 view
  Widget _buildNativeView() {
    return _MyNativeView(
      controller: _controller,
    );
  }

  Widget _buildFlutterView() {
    return Stack(
      alignment: AlignmentDirectional.bottomCenter,
      children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("native to flutter: $_nativeToFlutterMessage"),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                _controller.flutterToNative("${DateTime.now().millisecondsSinceEpoch}");
              },
              child: const Text('發送數據給 Native'),
            ),
          ],
        ),
        const Padding(
          padding: EdgeInsets.only(bottom: 15),
          child: Text(
            'Flutter - View',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }
}


/// 嵌入到 flutter 中的 android/ios 的 view
class _MyNativeView extends StatefulWidget {
  final _MyViewController controller;

  const _MyNativeView({required this.controller, Key? key}) : super(key: key);

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

class _MyNativeViewState extends State<_MyNativeView> {

  @override
  Widget build(BuildContext context) {

    /// 判斷是否爲 web 環境要用 kIsWeb
    /// 如果在 web 環境使用 Platform.xxx 的話會報錯的
    if (kIsWeb) {
      /// 嵌入到 flutter 中的 web 的 view（相關的插件在 /lib/plugin/flutter_plugin_web2.dart）
      /// 這是一個 HtmlElementView 類型的組件
      return FlutterPluginWeb2().getHtmlElementView(widget.controller.jsToFlutter);
    }

    if (Platform.isAndroid) {
      /// 嵌入到 flutter 中的 android 的 view（相關的插件在 android/app/src/main/kotlin/com/example/flutter_demo/MyFlutterPlugin2.kt）
      return AndroidView(
        viewType: 'com.webabcd.flutter/myview',                           /// 需要嵌入的 view 的標識（這是在插件中定義的）
        onPlatformViewCreated: _onPlatformViewCreated,                    /// 傳給插件的初始參數
        creationParams: const <String, dynamic>{'k1': 'p1', 'k2': 'p2'},  /// 傳給插件的初始參數的編碼方式
        creationParamsCodec: const StandardMessageCodec(),                /// 需要嵌入的 view 創建後觸發的事件
      );
    }

    if (Platform.isIOS) {
      /// 嵌入到 flutter 中的 ios 的 view（相關的插件在 ios/Runner/MyFlutterPlugin2.swift）
      return UiKitView(
        viewType: 'com.webabcd.flutter/myview',                           /// 需要嵌入的 view 的標識（這是在插件中定義的）
        creationParams: const <String, dynamic>{'k1': 'p1', 'k2': 'p2'},  /// 傳給插件的初始參數
        creationParamsCodec: const StandardMessageCodec(),                /// 傳給插件的初始參數的編碼方式
        onPlatformViewCreated: _onPlatformViewCreated,                    /// 需要嵌入的 view 創建後觸發的事件
      );
    }

    return const MyText("不支持當前環境");
  }

  /// 對於 android 來說，這個 id 是插件中 PlatformViewFactory 的 create() 中生成的 viewId
  /// 對於 ios 來說，這個 id 是插件中 FlutterPlatformViewFactory 的 create() 中生成的 viewId
  void _onPlatformViewCreated(int id) {
    var methodChannel = MethodChannel('com.webabcd.flutter/channel2_view$id');
    widget.controller.setMethodChannel(methodChannel);
  }
}

/// 用於控制 android/ios 和 flutter 通信的 controller
class _MyViewController extends ChangeNotifier {

  late MethodChannel _methodChannel;

  String nativeToFlutterMessage = "";

  /// 接收從 web 發送到 flutter 的數據
  void jsToFlutter(String message) {
    nativeToFlutterMessage = message;
    notifyListeners();
  }

  /// 接收從 android/ios 發送到 flutter 的數據
  void setMethodChannel(MethodChannel methodChannel) {
    _methodChannel = methodChannel;
    _methodChannel.setMethodCallHandler((call) async {
      switch (call.method) {
        case 'nativeToFlutter':
          final result = call.arguments as String;
          nativeToFlutterMessage = result;
          notifyListeners();
          break;
      }
    });
  }

  /// 從 flutter 發送數據到 android/ios/web
  Future<void> flutterToNative(String message) async {
    if (kIsWeb) {
      /// 從 flutter 發送數據到 web
      var result = FlutterPluginWeb2.flutterToJs(message);
    }
    else {
      /// 從 flutter 發送數據到 android/ios
      await _methodChannel.invokeMethod('flutterToNative', message);
    }
  }
}

lib\plugin\flutter_plugin_web2_stub.dart

/*
 * 此文件對外的方法定義與 flutter_plugin_web2.dart 是一致的，用於編譯非 web 時使用
 */

import 'package:flutter/material.dart';

class FlutterPluginWeb2 {

  Widget getHtmlElementView(dynamic jsToFlutter) {
    return const Text("不可能到這裏");
  }

  static dynamic flutterToJs(String message) {
    return "不可能到這裏";
  }
}

lib\plugin\flutter_plugin_web2.dart

/*
 * 本例用於演示 web 插件的開發（flutter 使用 web 原生控件，並做數據通信）
 *
 * 本例中用的 flutter 與 js 的通信方式實現起來比較簡單，但是無法和 android/ios 插件的接口保持一致
 * 如果對於 flutter 的開發來說，其想要與 android/ios/web 通信的方法都是一樣的，則可以參見 flutter_plugin_web.dart 中的實現方式
 */

import 'dart:html' as html;
import 'dart:ui' as ui;
import 'dart:js' as js;

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

class FlutterPluginWeb2 {

  /// 構造一個 HtmlElementView，其用於在 flutter 中顯示指定的 html（僅在 web 環境可用）
  HtmlElementView getHtmlElementView(dynamic jsToFlutter) {
    var view = html.DivElement()
      ..append(html.StyleElement()
        ..text = """
            #myDiv {
              height: 100%;
              font-size: 14px
              color: white;
              display: flex;
              flex-direction: column;
              align-items: center;
            }
          """
      )
      ..append(html.ScriptElement()
        ..text = """
            // 用於演示 flutter 調用 js
            function xxx_flutterToJs(message) {
              document.getElementById("txtMessage").innerHTML = "flutter to js: " + message;
            }
            
            // 用於演示 js 調用 flutter
            function send() {
              // 通過 xxx_jsToFlutter() 調用 flutter
              // 這個 xxx_jsToFlutter() 是通過類似這樣註冊的 js.context["xxx_jsToFlutter"] = jsToFlutter;
              window.xxx_jsToFlutter(new Date().getTime().toString());
            }
          """
      )
      ..append(html.DivElement()
        ..id = 'myDiv'
        ..append(html.DivElement()
          ..id = 'txtMessage'
          ..setAttribute("style", "flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; color: black; margin-bottom: 12px")
        )
        ..append(html.DivElement()
          ..setAttribute("style", "flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start;")
          ..setAttribute("onclick", "send();")
          ..append(html.ButtonElement()
            ..setAttribute("style", "padding: 12px")
            ..setInnerHtml("發送數據給 flutter")
          )
        )
        ..append(html.DivElement()
          ..setAttribute("style", "flex-grow: 0; color: black; font-size: 24px; margin-bottom: 12px")
          ..setInnerHtml("Web - View")
        )
      );

    /// 註冊一個名爲 com.webabcd.flutter/myview 的 html
    /// 必須要有下面這行註釋，否則會報錯 The name 'platformViewRegistry' is being referenced through the prefix 'ui', but it isn't defined in any of the libraries imported using that prefix.
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory('com.webabcd.flutter/myview', (int viewId) => view);

    /// 通過 js.context[] 在 js 中註冊 js 調用 flutter 的方法，並將其映射到 flutter 中指定的方法
    /// 本例的意思是，在 js 中註冊一個名爲 xxx_jsToFlutter() 的方法，在 js 中調用此方法後，就會調用 flutter 中的 jsToFlutter() 方法
    js.context["xxx_jsToFlutter"] = jsToFlutter;

    /// 使用已註冊的名爲 com.webabcd.flutter/myview 的 html
    return HtmlElementView(
      viewType: 'com.webabcd.flutter/myview',
      onPlatformViewCreated: _onPlatformViewCreated,  /// 需要嵌入的 view 創建後觸發的事件
    );
  }

  void _onPlatformViewCreated(int id) {
    /// 這裏的 id 就是上面 (int viewId) => view 中的 viewId
    /// 一般在這裏構造一個 MethodChannel 用於 flutter 和 web 之間的數據通信
    /// 這種方式可以讓 flutter 和 web 之間的數據通信接口與 android/ios 插件的接口保持一致，從而對於 flutter 的開發來說，保證它與 android/ios/web 通信的方法都是一樣的
    /// 具體如何實現可以參看 flutter_plugin_web.dart 中的說明，本例不用這種方式實現，而是用另一種簡單的方式實現 flutter 與 js 的通信（但是無法和 android/ios 插件的接口保持一致）
    var methodChannel = MethodChannel('com.webabcd.flutter/channel2_view$id');
  }

  static dynamic flutterToJs(String message) {
    /// 通過 js.context.callMethod() 調用指定的 js 方法，並允許傳遞參數
    return js.context.callMethod('xxx_flutterToJs', [message]);
  }
}

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