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

无人机数据集汇总无人机航拍各个方面检测分割数据集合集

本数据集集合了面向无人机视觉任务的大规模、多场景、多目标标注数据资源，涵盖了地理环境、智慧城市、基础设施巡检、农业生产、公共安全与灾害监测等多个关键领域。数据主要以两种主流格式提供：适用于目标检测的VOC/YOLO格式与适用于像素级语义分割的LabelMe格式，为算法开发与模型训练提供了高度结构化的标注支持。 在地理与农业监测方面，包含田地、道路、森林、水体等地理要素的分割数据集，以及作物病害、杂草识别、农田农机、牛羊牲畜等农业目标的检测数据，支持精准农业与生态研究。智慧城市与交通领域提供了丰富的城市街道场景数据，涵盖行人、车辆、交通标志、占道经营、消防通道、广告牌等目标的检测与分割，助力城市智能化管理。基础设施巡检是另一重点，覆盖电力线、光伏板、桥梁、铁路、风力发电机等设备的缺陷与异常检测，以及工地车辆、施工人员、物料垃圾的识别，满足工业自动化巡检需求。在灾害与安全监控中，包含滑坡、洪水、火灾烟雾、河道垃圾、违规建筑等应急场景的检测与分割数据，同时提供了溺水人员、海上救援、军事目标等特殊任务的专项数据集。此外，
企业微信智能化办公机器人部署与大语言模型集成实操深度指南

企业微信智能化办公机器人部署与大语言模型集成实操深度指南

第一章 企业微信智能机器人生态架构与入口配置 在当前数字化协同办公的环境中，企业微信已不再仅仅是一个即时通讯工具，而是演变为企业内部流程自动化与智能化交互的核心终端。通过引入人工智能助手，企业能够实现从琐碎信息处理到复杂业务决策的支持。部署这一体系的第一步，在于正确配置企业微信端的机器人协议入口。 1.1 管理员视角下的系统级配置 对于拥有管理权限的人员，配置过程从全局管理后台开始。这涉及到对企业内部工具链的直接授权。 在企业微信管理后台的“管理工具”模块中，存在“智能机器人”这一核心功能入口。点击创建机器人后，系统会呈现多种对接方式。为了确保机器人具备实时双向通讯能力以及更强的指令执行权限，必须放弃基础的Webhook模式，转而选择“API模式创建”。这一选择决定了机器人将具备更深层次的API调用能力，能够参与到群组管理、文档读写等高级逻辑处理中。 在配置细节中，通过“长连接配置”是目前实现低延迟响应的最优路径。长连接技术能够保持服务器与企业微信网关之间的持续会话，避免了频繁握手带来的网络开销，确保了在复杂群聊环境中，AI助手能够秒级响应成员的指令。 1.2 企业成员视角
【征文计划】AR健身教练：形随心动 - 基于Rokid CXR-M SDK的实践落地

【征文计划】AR健身教练：形随心动 - 基于Rokid CXR-M SDK的实践落地

一、项目背景与创意起源 在当今快节奏的都市生活中，健身已成为许多人保持健康的重要方式。然而，居家健身面临一个普遍痛点：缺乏专业指导，容易因动作不规范导致运动损伤，同时低头看手机或平板的体验也大大降低了健身的沉浸感和效率。 根据《2024年中国健身行业白皮书》显示，超过65%的居家健身用户表示"缺乏专业指导"是他们放弃健身的主要原因。而Rokid Glasses作为一款轻量级AR眼镜，其独特的"抬头即见"交互方式，为解决这一问题提供了绝佳的硬件基础。 "形随心动"创意的诞生源于一个简单但关键的观察：如果能将专业教练"投射"到用户视野中，实时指导动作，同时提供直观的数据反馈，那么居家健身体验将发生质的飞跃。通过Rokid CXR-M SDK的AI场景、自定义页面和提词器功能，我们能够实现这一愿景。 二、Rokid CXR-M SDK 相关 1. Rokid

强力解锁VR视频转换新体验：从全景到平面的智能转换指南

强力解锁VR视频转换新体验：从全景到平面的智能转换指南 【免费下载链接】VR-reversalVR-Reversal - Player for conversion of 3D video to 2D with optional saving of head tracking data and rendering out of 2D copies. 项目地址: https://gitcode.com/gh_mirrors/vr/VR-reversal 还在为那些只能在VR头盔里欣赏的360度视频感到遗憾吗？想要把这些沉浸式体验转换成普通设备也能播放的2D格式吗？这款强大的VR视频转换工具正是你需要的解决方案！它能将复杂的3D全景视频轻松转换为2D格式，还能记录你的头部运动轨迹，制作出独一无二的观影体验。 为什么你需要这个转换神器？ 想象一下：你拍摄了一段精彩的360度旅游视频，里面有壮丽的风景和有趣的细节，但朋友们没有VR设备就无法欣赏。或者你在VR游戏中发现了隐藏彩蛋，却无法分享给其他人观看。这就是VR视频转换工具的价值所在！ 这张动态图片完美展示了工具的实际效果——