如何在 Flutter 中为 Web 编写特定于平台的代码？

Posted 2023-02-15

【中文标题】如何在 Flutter 中为 Web 编写特定于平台的代码？

【英文标题】：How to write platform specific code for web in flutter?

【发布时间】：2021-09-28 00:11:26

【问题描述】：

在 Flutter 中，我们使用平台通道，允许我们调用特定于平台的 API，无论是 android 上的 Kotlin 或 Java 代码，还是 ios 上的 Swift 或 Objective-C 代码。

如何在 Flutter 中实现与 web 相同的功能？如何使用 npm 包并编写一些 javascript 代码并将结果发送到颤振？这甚至可能吗？有为 Android 和 iOS 编写平台特定代码的官方文档，但我找不到任何为 web 编写平台特定代码的文档。

另外，我尝试使用 js 包。如果这是必须用于这种情况的一个，如何使用它？

【参考方案1】：

这就是我在 Flutter Web 上显示 Hubspot 聊天的方法。 我有一个 Hubspot 文件夹：

index.html script.js style.css

然后是带有 webview_flutter_plus 插件的 Flutter Widget：

class HubspotWebview extends StatefulWidget 
  @override
  _HubspotWebviewState createState() => _HubspotWebviewState();


class _HubspotWebviewState extends State<HubspotWebview> 
  final _javascriptChannels = Set<JavascriptChannel>();
  bool loading = true;

  @override
  void initState() 
    super.initState();
    _javascriptChannels.add(JavascriptChannel(
        onMessageReceived: (JavascriptMessage message) 
          debugPrint('message: ' + message.message);
          _toggleLoading();
        ,
        name: 'Loading'));
  

  @override
  Widget build(BuildContext context) 
    final path = '$kIsWeb ? 'assets/' : ''assets/hubspot_web_page/index.html';
    final key = 'web_bot_key';
    if (kIsWeb) 
      ui.platformViewRegistry.registerViewFactory(
          key,
              (int viewId) => IFrameElement()
            ..width = '640'
            ..height = '360'
            ..src = path
            ..style.border = 'none'
            ..onLoadedData.listen((event) 
              _toggleLoading();
            ));
    
    return Scaffold(
      appBar: new AppBar(
          backgroundColor: MyColors.blue_business,
          title: MyText.subtitle(
            getText('business_help_chat', backUpText: 'Help Chat'),
            color: MyColors.white_rice,
          )),
      body: Stack(
        children: [
          kIsWeb
              ? HtmlElementView(viewType: key)
              : WebViewPlus(
            javascriptMode: JavascriptMode.unrestricted,
            initialUrl: path,
            javascriptChannels: _javascriptChannels,
          ),
          if (loading)
            Center(child: CircularProgressIndicator()),
        ],
      ),
    );
  

  void _toggleLoading() => setState(() => loading = !loading);

在 Javascript 文件上 Loading.postMessage('') 在 Flutter 上触发 toggleLoading()：

  function onConversationsAPIReady() 
    window.hsConversationsSettings = 
      inlineEmbedSelector: '#hubspot-conversations-inline-parent',
      enableWidgetCookieBanner: true,
      disableAttachment: true
    ;
    window.history.pushState(, 'bot', '?bot=true');
    window.HubSpotConversations.widget.refresh(openToNewThread: true);
    Loading.postMessage('');
  

  if (window.HubSpotConversations) 
    onConversationsAPIReady();
   else 
    window.hsConversationsOnReady = [onConversationsAPIReady];