原始碼 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/552175.html
標籤：其他
下一篇：返回列表