一統(tǒng)天下 flutter - 插件: flutter 使用 web 原生控件，并做數(shù)據(jù)通信

這篇具有很好參考價(jià)值的文章主要介紹了一統(tǒng)天下 flutter - 插件: flutter 使用 web 原生控件，并做數(shù)據(jù)通信。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

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

一統(tǒng)天下 flutter - 插件: flutter 使用 web 原生控件，并做數(shù)據(jù)通信

示例如下:

lib\plugin\plugin2.dart

/*
 * 插件
 * 本例用于演示 flutter 使用 android/ios/web 原生控件，并做數(shù)據(jù)通信
 *
 * 一、android 插件開發(fā)
 * 1、主 flutter 項(xiàng)目要先在 android 平臺(tái)中運(yùn)行一下
 * 2、在 android 文件夾上，使用右鍵菜單，然后選擇 Flutter -> Open Android module in Android Studio 即可開發(fā)插件
 * 3、參見 /android/app/src/main/kotlin/com/example/flutter_demo/MainActivity.kt
 *
 * 二、ios 插件開發(fā)
 * 1、主 flutter 項(xiàng)目要先在 ios 平臺(tái)中運(yùn)行一下
 * 2、在 android studio 或 visual studio code 中執(zhí)行如下邏輯
 *    cd ios
 *    pod install
 * 3、用 xcode 中打開 /ios/Runner.xcworkspace 即可開發(fā)插件
 * 4、參見 /ios/Runner/AppDelegate.swift
 *
 * 三、web 原生控件，以及 flutter 與 js 的通信
 * 1、參見 /lib/plugin/flutter_plugin_web2.dart
 *
 *
 * 注：插件中實(shí)現(xiàn)的功能（非 .dart 實(shí)現(xiàn)的）不支持 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';

/// 這里要注意，如果編譯的時(shí)候，目標(biāo)平臺(tái)不是 web 環(huán)境，那么如果項(xiàng)目中 import 了 dart:js, dart:ui, dart:html 之類的庫(kù)，則會(huì)報(bào)類似如下的錯(cuò)誤
/// FileSystemException(uri=org-dartlang-untranslatable-uri:dart%3Ahtml; message=StandardFileSystem only supports file:* and data:* URIs)
/// 此時(shí)，就需要用如下的方式 import
/// 下面的 import 的意思是：導(dǎo)入 flutter_plugin_web2_stub.dart，但是編譯為 web 時(shí)（即 dart.library.js 為真）則導(dǎo)入 flutter_plugin_web2.dart
/// flutter_plugin_web2_stub.dart 里的對(duì)外的方法定義與 flutter_plugin_web2.dart 是一樣的
/// 但是 flutter_plugin_web2_stub.dart 中沒有具體的邏輯，不會(huì)導(dǎo)入 dart:js, dart:ui, dart:html 之類的庫(kù)，這樣就保證了編譯為非 web 時(shí)不會(huì)報(bào)錯(cuò)
/// 而 flutter_plugin_web2.dart 有具體的邏輯，會(huì)導(dǎo)入 dart:js, dart:ui, dart:html 之類的庫(kù)，這樣就保證了編譯為 web 時(shí)會(huì)包括相關(guān)的邏輯
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 發(fā)送到 flutter 的數(shù)據(jù)
  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('發(fā)送數(shù)據(jù)給 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 環(huán)境要用 kIsWeb
    /// 如果在 web 環(huán)境使用 Platform.xxx 的話會(huì)報(bào)錯(cuò)的
    if (kIsWeb) {
      /// 嵌入到 flutter 中的 web 的 view（相關(guān)的插件在 /lib/plugin/flutter_plugin_web2.dart）
      /// 這是一個(gè) HtmlElementView 類型的組件
      return FlutterPluginWeb2().getHtmlElementView(widget.controller.jsToFlutter);
    }

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

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

    return const MyText("不支持當(dāng)前環(huán)境");
  }

  /// 對(duì)于 android 來說，這個(gè) id 是插件中 PlatformViewFactory 的 create() 中生成的 viewId
  /// 對(duì)于 ios 來說，這個(gè) 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 發(fā)送到 flutter 的數(shù)據(jù)
  void jsToFlutter(String message) {
    nativeToFlutterMessage = message;
    notifyListeners();
  }

  /// 接收從 android/ios 發(fā)送到 flutter 的數(shù)據(jù)
  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 發(fā)送數(shù)據(jù)到 android/ios/web
  Future<void> flutterToNative(String message) async {
    if (kIsWeb) {
      /// 從 flutter 發(fā)送數(shù)據(jù)到 web
      var result = FlutterPluginWeb2.flutterToJs(message);
    }
    else {
      /// 從 flutter 發(fā)送數(shù)據(jù)到 android/ios
      await _methodChannel.invokeMethod('flutterToNative', message);
    }
  }
}

lib\plugin\flutter_plugin_web2_stub.dart

/*
 * 此文件對(duì)外的方法定義與 flutter_plugin_web2.dart 是一致的，用于編譯非 web 時(shí)使用
 */

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 插件的開發(fā)（flutter 使用 web 原生控件，并做數(shù)據(jù)通信）
 *
 * 本例中用的 flutter 與 js 的通信方式實(shí)現(xiàn)起來比較簡(jiǎn)單，但是無法和 android/ios 插件的接口保持一致
 * 如果對(duì)于 flutter 的開發(fā)來說，其想要與 android/ios/web 通信的方法都是一樣的，則可以參見 flutter_plugin_web.dart 中的實(shí)現(xiàn)方式
 */

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 {

  /// 構(gòu)造一個(gè) HtmlElementView，其用于在 flutter 中顯示指定的 html（僅在 web 環(huán)境可用）
  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 調(diào)用 js
            function xxx_flutterToJs(message) {
              document.getElementById("txtMessage").innerHTML = "flutter to js: " + message;
            }
            
            // 用于演示 js 調(diào)用 flutter
            function send() {
              // 通過 xxx_jsToFlutter() 調(diào)用 flutter
              // 這個(gè) xxx_jsToFlutter() 是通過類似這樣注冊(cè)的 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("發(fā)送數(shù)據(jù)給 flutter")
          )
        )
        ..append(html.DivElement()
          ..setAttribute("style", "flex-grow: 0; color: black; font-size: 24px; margin-bottom: 12px")
          ..setInnerHtml("Web - View")
        )
      );

    /// 注冊(cè)一個(gè)名為 com.webabcd.flutter/myview 的 html
    /// 必須要有下面這行注釋，否則會(huì)報(bào)錯(cuò) 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 中注冊(cè) js 調(diào)用 flutter 的方法，并將其映射到 flutter 中指定的方法
    /// 本例的意思是，在 js 中注冊(cè)一個(gè)名為 xxx_jsToFlutter() 的方法，在 js 中調(diào)用此方法后，就會(huì)調(diào)用 flutter 中的 jsToFlutter() 方法
    js.context["xxx_jsToFlutter"] = jsToFlutter;

    /// 使用已注冊(cè)的名為 com.webabcd.flutter/myview 的 html
    return HtmlElementView(
      viewType: 'com.webabcd.flutter/myview',
      onPlatformViewCreated: _onPlatformViewCreated,  /// 需要嵌入的 view 創(chuàng)建后觸發(fā)的事件
    );
  }

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

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

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd文章來源地址http://www.zghlxwxcb.cn/news/detail-438570.html

到了這里，關(guān)于一統(tǒng)天下 flutter - 插件: flutter 使用 web 原生控件，并做數(shù)據(jù)通信的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！