一统天下 flutter - 插件: flutter 使用 web 原生控件，并做数据通信-Toy模板网

这篇具有很好参考价值的文章主要介绍了一统天下 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]);
  }
}