如何将Flutter Web页面集成至现有HTML网站并实现调用？

完全可行！Flutter Web会将Dart代码编译为标准的HTML、CSS和JavaScript，能无缝嵌入到任何现有HTML网站中。下面是几种常用的集成方式：

1. 最简单的方式：嵌入iframe #

直接将部署好的Flutter Web页面通过iframe嵌入现有HTML，零修改Flutter代码就能快速实现集成。

示例代码：

<!-- 现有HTML页面中添加iframe -->
<iframe 
  src="https://your-deployed-flutter-web.com"
  width="100%" 
  height="800px"
  frameborder="0"
  title="Embedded Flutter Web Page"
></iframe>

• 优点：实现成本极低，无需改动现有Flutter项目
• 注意点：如果需要和主页面交互，得用postMessage API实现跨iframe通信

2. 紧密集成：Flutter Web与原生JS互调用 #

如果需要现有网站和Flutter页面深度交互，可以把Flutter Web构建产物直接嵌入现有HTML，通过Dart的dart:js包实现双向调用。

步骤： #

1. 构建Flutter Web项目：

flutter build web

2. 将build/web目录下的所有文件复制到现有网站的静态资源目录，然后在现有HTML中引入Flutter的JS文件：

<head>
  <!-- 引入Flutter的服务工作者和主JS文件 -->
  <script src="flutter_service_worker.js" defer></script>
  <script src="main.dart.js" defer></script>
</head>

3. 实现双向调用：

• Flutter调用现有网站的JS函数：

import 'dart:js' as js;

void triggerWebsiteFunction() {
  // 调用现有HTML中定义的JS函数
  js.context.callMethod('showNotification', ['Flutter says hello!']);
}

• 现有网站JS调用Flutter方法：

// 先在Flutter中注册全局方法
// Dart代码：
import 'dart:js' as js;

void main() {
  js.context['flutterGreet'] = (name) => print('Hello $name from Flutter!');
  runApp(MyApp());
}

// 现有HTML中的JS代码：
function callFlutterGreet() {
  window.flutterGreet('Website User');
}

3. 标准化复用：封装为Web Component #

把Flutter Web封装成标准的Web Component（自定义HTML元素），可以像使用普通HTML标签一样在现有网站中复用。

步骤： #

1. 在Flutter项目的pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  web_components: ^2.0.0

2. 修改main.dart封装为自定义元素：

import 'package:flutter/material.dart';
import 'package:web_components/web_components.dart';

void main() {
  // 注册自定义元素标签
  registerCustomElement('flutter-widget', () => FlutterWidgetElement());
}

class FlutterWidgetElement extends HtmlElement with CustomElementMixin {
  @override
  void connectedCallback() {
    // 当元素被添加到DOM时启动Flutter应用
    runApp(const MyFlutterWidget());
  }
}

class MyFlutterWidget extends StatelessWidget {
  const MyFlutterWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: Text('Flutter Web Component'))),
    );
  }
}

3. 构建后在现有HTML中使用：

<script src="main.dart.js"></script>
<!-- 直接使用自定义标签 -->
<flutter-widget style="width: 100%; height: 600px;"></flutter-widget>

总结 #

Flutter Web完全适配现有HTML生态，三种方案各有适用场景：

• iframe适合快速集成、无需交互的场景
• JS互调用适合需要深度交互的复杂场景
• Web Component适合需要多次复用Flutter组件的场景

内容的提问来源于stack exchange，提问作者Sugan Pandurengan