一统天下 flutter - 插件: flutter 使用 web 原生控件，并做数据通信
一统天下 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]);
}
}
