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

来源:https://www.cnblogs.com/webabcd/archive/2023/05/09/flutter_lib_plugin_plugin2.html
-Advertisement-
Play Games

源碼 https://github.com/webabcd/flutter_demo 作者 webabcd 一統天下 flutter - 插件: flutter 使用 web 原生控制項,並做數據通信 示例如下: lib\plugin\plugin2.dart /* * 插件 * 本例用於演示 flu ...


源碼 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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 隨著世界經濟由工業經濟向數字經濟轉型,數據逐步成為關鍵的生產要素,企業開始將數據作為一種戰略資產進行管理。數據從業務中產生,在IT系統中承載,要對數據進行有效治理,需要業務充分參與,IT系統確保遵從,這是一個非常複雜的系統工程。 數據治理架構 實踐證明,企業只有構築一套企業級的數據治理綜合體系,明確 ...
  • 開源之夏 2023 學生報名已經正式開啟!Apache DolphinScheduler 今年繼續參與開源之夏的活動,2023 年 4 月 29 日-6 月 3 日 15:00 UTC+8,同學們可以在開源之夏官網 https://summer-ospp.ac.cn/ 找到 Apache Dolph ...
  • 摘要:金山辦公攜手華為雲完成金山辦公自主研發的“WPS文檔中心系統”與華為雲GaussDB相互相容性測試認證,並獲得華為雲授予的《技術認證書》。 本文分享自華為雲社區《共築數字化未來 金山辦公攜手華為雲完成文檔中心和GaussDB適配》,作者:GaussDB 資料庫。 近日,金山辦公攜手華為雲完成金 ...
  • 更多技術交流、求職機會,歡迎關註位元組跳動數據平臺微信公眾號,回覆【1】進入官方交流群 近期,火山引擎 DataLeap 上線“動態探查”能力,為用戶提供全局數據視角、完善的抽樣策略,提高數據探查的靈活度以及響應速率。 傳統的數據探查是基於庫表的全量探查,由後端引擎執行,通過自動化檢查數據成分、關係、 ...
  • (Oracle 定時任務job實際應用) 一、Oracle定時任務簡介 Oracle定時任務是在oracle系統中一個非常重要的子系統,運用得當,可以大大提高我們系統運行和維護能力。oracle定時任務的功能,可以在指定的時間點自行執行任務。 那麼在實際工作中,什麼樣的場景會用到定時任務呢?下麵是在 ...
  • HUAWEI Health Kit為開發者提供用戶自定義的跑步課程導入介面,便於用戶在華為運動健康App和華為智能穿戴設備上查看來自生態應用的訓練課表,開啟科學、適度的運動訓練。 跑步課程導入能力支持生態應用在獲取用戶的華為帳號授權後,將跑步課程數據寫入至華為運動健康App,併在已有的華為智能穿戴設 ...
  • 京喜APP早期開發主要是快速原生化迭代替代原有H5,提高用戶體驗,在這期間也積累了不少性能問題。之後我們開始進行一些性能優化相關的工作,本文主要是介紹京喜圖片庫相關優化策略以及關於圖片相關的一些關聯知識。 ...
  • 廣告是App開發者最常用的流量變現方法之一,當App擁有一定數量用戶時,開發者就需要考慮如何進行流量變現,幫助App實現商業可持續增長。 鯨鴻動能流量變現服務是廣告服務依托華為終端強大的平臺與數據能力為開發者提供的App流量變現服務,開發者通過該服務可以在自己的App中獲取並向用戶展示精美的、高價值 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...