Flutter 与 Web 混合开发：跨平台的完美融合

优质文章学习记录

— 7 min read
Flutter 与 Web 混合开发：跨平台的完美融合

Flutter 与 Web 混合开发：跨平台的完美融合

写在前面

今天想和你聊聊一个让跨平台开发更具可能性的话题——Flutter 与 Web 混合开发。在我眼里，Flutter 就像一位多才多艺的艺术家，既能在移动平台上展现精彩，也能在 Web 世界中绽放光芒。

Flutter Web 的崛起

Flutter Web 是 Flutter 的一个重要方向，它允许我们使用同一套代码库构建运行在浏览器中的应用。随着 Flutter 3.0 的发布，Flutter Web 的性能和稳定性得到了显著提升，为混合开发开辟了新的可能。

Flutter Web 的优势

  1. 代码复用：使用同一套代码库构建移动应用和 Web 应用，减少开发和维护成本
  2. 一致的用户体验：在不同平台上提供一致的视觉和交互体验
  3. 高性能：Flutter Web 使用 CanvasKit 渲染器，提供接近原生的性能
  4. 丰富的组件库：使用 Flutter 丰富的组件库，快速构建美观的界面
  5. 热重载：支持热重载，提高开发效率

混合开发的方法

1. 嵌入式集成

将 Flutter Web 应用嵌入到现有的 Web 应用中，作为其中的一个组件或模块。

步骤 1：构建 Flutter Web 应用
# 构建 Flutter Web 应用 flutter build web
步骤 2：嵌入到 Web 应用
<!-- 在现有 Web 应用中嵌入 Flutter Web 应用 --> <div></div> <script> // 加载 Flutter Web 应用 window.addEventListener('load', function() { _flutter.loader.loadEntrypoint({ serviceWorker: { serviceWorkerVersion: null, }, entrypointUrl: 'flutter_app/main.dart.js', onEntrypointLoaded: async function(engineInitializer) { const appRunner = await engineInitializer.initializeEngine({ hostElement: document.querySelector('#flutter-container'), }); await appRunner.runApp(); } }); }); </script> <script src="flutter_app/flutter.js" defer></script>

2. 微前端架构

使用微前端架构，将 Flutter Web 应用作为独立的微前端应用集成到主应用中。

步骤 1：创建微前端配置
// micro-frontends.config.js module.exports = { apps: [ { name: 'flutter-app', entry: 'http://localhost:3001', // Flutter Web 应用的地址 container: '#flutter-container', activeWhen: '/flutter' } ] };
步骤 2：集成到主应用
<!-- 主应用 index.html --> <div></div> <script src="micro-frontends.js"></script>

3. 跨平台状态管理

使用状态管理库（如 Redux、MobX 或 Riverpod）在 Flutter 和 Web 之间共享状态。

步骤 1：创建共享状态
// Flutter 中的状态管理 final counterProvider = StateProvider((ref) => 0); class CounterWidget extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final counter = ref.watch(counterProvider); return Text('Counter: $counter'); } }
步骤 2：在 Web 中访问状态
// Web 中的状态管理 import { createStore } from 'redux'; const initialState = { counter: 0 }; function counterReducer(state = initialState, action) { switch (action.type) { case 'INCREMENT': return { counter: state.counter + 1 }; case 'DECREMENT': return { counter: state.counter - 1 }; default: return state; } } const store = createStore(counterReducer); // 订阅状态变化 store.subscribe(() => { document.getElementById('counter').textContent = store.getState().counter; });

实际案例：Flutter 与 React 混合开发

1. 项目结构

project/ ├── flutter_app/ # Flutter Web 应用 ├── react_app/ # React 应用 └── shared/ # 共享代码

2. Flutter 端实现

// flutter_app/lib/main.dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Web App', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; // 从 Web 接收消息 final _channel = MethodChannel('flutter_web_channel'); @override void initState() { super.initState(); _channel.setMethodCallHandler((call) async { if (call.method == 'incrementCounter') { setState(() { _counter++; }); } }); } // 向 Web 发送消息 void _sendMessageToWeb() { _channel.invokeMethod('messageFromFlutter', {'message': 'Hello from Flutter!'}); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Web App'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ElevatedButton( onPressed: _sendMessageToWeb, child: Text('Send Message to Web'), ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () { setState(() { _counter++; }); }, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

3. React 端实现

// react_app/src/App.js import React, { useState, useEffect } from 'react'; import './App.css'; function App() { const [counter, setCounter] = useState(0); const [message, setMessage] = useState(''); // 初始化 Flutter useEffect(() => { if (window.flutterInApp) { // Flutter 已经加载 setupFlutterCommunication(); } else { // 监听 Flutter 加载完成 window.addEventListener('flutterInAppReady', setupFlutterCommunication); } return () => { window.removeEventListener('flutterInAppReady', setupFlutterCommunication); }; }, []); // 设置与 Flutter 的通信 const setupFlutterCommunication = () => { // 向 Flutter 发送消息 window.flutterInApp.postMessage({ method: 'incrementCounter' }); // 接收来自 Flutter 的消息 window.flutterInApp.addEventListener('message', (event) => { const data = JSON.parse(event.data); if (data.message) { setMessage(data.message); } }); }; // 向 Flutter 发送消息 const sendMessageToFlutter = () => { if (window.flutterInApp) { window.flutterInApp.postMessage({ method: 'incrementCounter' }); setCounter(counter + 1); } }; return ( <div className="App"> <header className="App-header"> <h1>React App</h1> <p>Counter: {counter}</p> <p>Message from Flutter: {message}</p> <button onClick={sendMessageToFlutter}> Increment Counter in Flutter </button> </header> <div></div> </div> ); } export default App;

4. 集成配置

<!-- react_app/public/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div></div> <!-- 嵌入 Flutter Web 应用 --> <script> window.flutterInApp = { postMessage: function(message) { // 向 Flutter 发送消息 if (window._flutter && window._flutter.loader) { window._flutter.loader.loadEntrypoint({ serviceWorker: { serviceWorkerVersion: null, }, entrypointUrl: 'flutter_app/main.dart.js', onEntrypointLoaded: async function(engineInitializer) { const appRunner = await engineInitializer.initializeEngine({ hostElement: document.querySelector('#flutter-container'), }); await appRunner.runApp(); // 发送消息 window.flutterChannel.invokeMethod('incrementCounter'); } }); } }, addEventListener: function(event, callback) { // 监听来自 Flutter 的消息 window.addEventListener('flutterMessage', callback); } }; // 通知 Flutter 准备就绪 window.dispatchEvent(new Event('flutterInAppReady')); </script> <script src="flutter_app/flutter.js" defer></script> </body> </html>

性能优化：Flutter Web 的性能考虑

1. 选择合适的渲染器

Flutter Web 提供了两种渲染器：

  • CanvasKit：使用 WebAssembly 渲染，性能更好，但初始加载较大
  • HTML：使用 DOM 渲染，初始加载较小，但性能稍差
# 使用 CanvasKit 渲染器 flutter build web --web-renderer canvaskit # 使用 HTML 渲染器 flutter build web --web-renderer html

2. 代码分割

使用代码分割减少初始加载时间：

// 使用 deferred loading import 'package:flutter/foundation.dart' show kIsWeb; Future<void> loadHeavyModule() async { if (kIsWeb) { await import('package:my_app/heavy_module.dart'); } }

3. 资源优化

  • 压缩图片和资源
  • 使用适当的图片格式（WebP 或 SVG）
  • 延迟加载非关键资源

4. 网络优化

  • 使用 CDN 分发静态资源
  • 启用 HTTP/2 或 HTTP/3
  • 实现缓存策略

常见问题和解决方案

1. 跨域问题

问题：Flutter Web 应用与主应用之间的跨域请求被阻止。

解决方案：在主应用的服务器上配置 CORS 头：

// Express 服务器配置 app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); });

2. 性能问题

问题：Flutter Web 应用在某些设备上运行缓慢。

解决方案：

  • 使用 HTML 渲染器
  • 减少 Widget 树的复杂度
  • 使用 const 构造函数
  • 避免频繁的重建

3. 通信问题

问题：Flutter 与 Web 之间的通信失败。

解决方案：

  • 使用统一的通信协议
  • 处理异步通信
  • 添加错误处理

4. 响应式设计

问题：Flutter Web 应用在不同屏幕尺寸上显示不正确。

解决方案：

  • 使用 MediaQuery 适配不同屏幕尺寸
  • 使用 LayoutBuilder 构建响应式布局
  • 为 Web 平台添加特定的布局逻辑

最佳实践

1. 代码组织

  • 将平台特定的代码分离到不同的文件中
  • 使用抽象层处理平台差异
  • 保持共享代码的平台无关性

2. 状态管理

  • 使用跨平台的状态管理库
  • 实现状态的同步机制
  • 考虑使用本地存储或云存储持久化状态

3. 测试

  • 在不同平台上测试应用
  • 测试响应式布局
  • 测试性能和加载时间

4. 部署

  • 使用 CI/CD 自动化部署
  • 为不同平台配置不同的部署策略
  • 监控应用性能和用户体验

写在最后

Flutter 与 Web 的混合开发为我们开辟了新的可能性，让我们能够使用同一套代码库构建跨平台的应用。正如我常说的：「CSS 是流动的韵律，JS 是叙事的节奏。」而 Flutter 则是将这两者融合的交响乐。

掌握 Flutter 与 Web 混合开发的技巧，不仅能提高开发效率，还能为用户提供一致的跨平台体验。记住，像素不能偏差 1px，体验不能在任何平台上打折扣。

Read more

【保姆级】TrendRadar本地部署：告别算法推荐，打造个人专属AI热点情报局

【保姆级】TrendRadar本地部署：告别算法推荐，打造个人专属AI热点情报局

【保姆级】TrendRadar本地部署：告别算法推荐，打造个人专属AI热点情报局 摘要 本文基于 TrendRadar 项目，详细拆解如何通过 Docker 本地部署一套个人专属的 AI 热点情报系统。涵盖从环境准备、Docker 镜像拉取、局域网访问配置、飞书推送修复到 Cherry Studio MCP 服务对接的全流程。通过 Nvidia 免费模型 API，实现零成本的深度热点分析与趋势追踪。 关键词： TrendRadar, Docker部署, AI热点分析, MCP服务, Cherry Studio 1. 背景与需求：为什么我们需要 TrendRadar？ 在这个大数据算法横行的时代，我们每天被头条、抖音等平台“投喂”大量信息，不仅容易陷入信息茧房，还浪费了大量时间筛选有效资讯。 我的核心需求很简单： 1. 拒绝算法绑架：需要一个个人定制化的新闻推送服务。 2.
开源vs闭源AI工具大比较：成本、性能、生态的全方位对比

开源vs闭源AI工具大比较：成本、性能、生态的全方位对比

开源vs闭源AI工具大比较：成本、性能、生态的全方位对比 🌟 Hello，我是摘星！ 🌈 在彩虹般绚烂的技术栈中，我是那个永不停歇的色彩收集者。 🦋 每一个优化都是我培育的花朵，每一个特性都是我放飞的蝴蝶。 🔬 每一次代码审查都是我的显微镜观察，每一次重构都是我的化学实验。 🎵 在编程的交响乐中，我既是指挥家也是演奏者。让我们一起，在技术的音乐厅里，奏响属于程序员的华美乐章。 目录 开源vs闭源AI工具大比较：成本、性能、生态的全方位对比 摘要 1. AI工具选择的战略意义 1.1 技术选型的重要性 1.2 市场趋势分析 2. 成本维度深度对比 2.1 直接成本分析 2.2 隐性成本分析 3. 性能维度全面评测 3.1 基准测试对比 3.2 性能优化策略 4. 生态系统建设对比 4.
多模态检索新突破！Qwen3-VL-Embedding/Reranker AI 真正“看懂“你在搜什么，从图片到视频全拿下！

多模态检索新突破！Qwen3-VL-Embedding/Reranker AI 真正“看懂“你在搜什么，从图片到视频全拿下！

Qwen3-VL-Embedding 和 Qwen3-VL-Reranker：统一多模态表征与排序 摘要 2025年6月，Qwen 团队开源了面向文本的 Qwen3-Embedding 和 Qwen3-ReRanker 模型系列，在多语言文本检索、聚类和分类等多项下游任务中取得了业界领先的性能。 2026年1月，该团队推出了 Qwen 家族的最新成员：Qwen3-VL-Embedding 和 Qwen3-VL-Reranker 模型系列。这些模型基于开源的 Qwen3-VL 模型构建，专为多模态信息检索和跨模态理解场景设计，能够将文本、图像、文档图像和视频等多种模态映射到统一的表示空间中。 Qwen3-VL-Embedding 模型采用多阶段训练范式，从大规模对比预训练逐步发展到重排序模型蒸馏，以生成语义丰富的高维向量。该模型支持 Matryoshka 表示学习（MRL），可灵活选择嵌入维度，并能处理最多 32K tokens 的输入。作为补充，Qwen3-VL-Reranker 采用交叉编码器架构和交叉注意力机制，对查询-文档对进行细粒度的相关性评估。 两个模型系列继承了
AI 自动化测试：接口测试全流程自动化的实现方法

AI 自动化测试：接口测试全流程自动化的实现方法

在 AI 技术飞速渗透各行各业的当下，我们早已告别 “谈 AI 色变” 的观望阶段，迈入 “用 AI 提效” 的实战时代 💡。无论是代码编写时的智能辅助 💻、数据处理中的自动化流程 📊，还是行业场景里的精准解决方案 ，AI 正以润物细无声的方式，重构着我们的工作逻辑与行业生态 🌱。曾几何时，我们需要花费数小时查阅文档 📚、反复调试代码 ⚙️，或是在海量数据中手动筛选关键信息 ，而如今，一个智能工具 🧰、一次模型调用 ⚡，就能将这些繁琐工作的效率提升数倍 📈。正是在这样的变革中，AI 相关技术与工具逐渐走进我们的工作场景，成为破解效率瓶颈、推动创新的关键力量 。今天，我想结合自身实战经验，带你深入探索 AI 技术如何打破传统工作壁垒 🧱，让 AI 真正从 “概念” 变为 “实用工具” ，为你的工作与行业发展注入新动能 ✨。 文章目录 * AI 自动化测试：接口测试全流程自动化的实现方法 🤖 * 为什么传统自动化测试“卡壳”