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

Windows 10/11 部署 OpenClaw 完全指南：从环境搭建到机器人互联

摘要：本文详细介绍了在 Windows x64 架构下部署开源机器人控制框架 OpenClaw 的完整流程。针对 Windows 平台特有的 C++ 编译环境难题（sharp 库依赖），提供了“一键脚本”与“手动安装”双重解决方案，并深入解析了云端大模型配置与局域网稳定连接的核心技巧，助您快速打造高性能的机器人控制中枢。 📋 前言：为什么选择 Windows 部署？ OpenClaw 是一个强大的开源机器人控制框架，支持语音交互、视觉感知与大模型决策。虽然 macOS 是开发者的首选，但 Windows 10/11 (x64) 凭借广泛的硬件兼容性和强大的 GPU 生态，同样是部署 OpenClaw 的优秀平台。 核心挑战： Windows 环境下最大的痛点在于 C++ 编译环境。OpenClaw 依赖的高性能图像处理库

CtfShow web入门——爆破21-28

1. web21 抓包发现用户名和密码被放到了Authorization: Basic YWRtaW46YWRtaW4=请求头里面，还被base64加密 这种爆破不太懂，看了一下官方提示里面：https://www.cnblogs.com/007NBqaq/p/13220297.html 使用的Burp Suite的Intruder的Custom iterator爆破模块。 BurpSuite 的 Custom Iterator（自定义迭代器） 模式可以灵活生成认证凭证组合，尤其适用于 Basic Auth 这种 用户名:密码 格式并经过 Base64 编码 的场景。 1.1. 选中payload： 1.2. 设置payloads，设置payload type为Custom interator；在设置Position1、2、3 1.3.
Web Crawling 网络爬虫全景：技术体系、反爬对抗与全链路成本分析

Web Crawling 网络爬虫全景：技术体系、反爬对抗与全链路成本分析

核心结论：爬虫生态数万个工具的繁荣不是技术丰富的标志，而是持续对抗中高损耗率的副产品。爬虫问题的本质不是"能不能爬到"，而是全链路成本函数——爬、存、ETL、维护——谁先扛不住。 一、爬虫技术体系全景 1.1 技术类别收敛图 工具数万，但底层技术类别高度收敛。整个爬虫技术栈可以压缩为以下几层： ┌──────────────────────────────────────────────────────┐ │ 应用层（目标适配） │ │ 针对特定网站的解析规则、登录流程、分页逻辑 │ ├──────────────────────────────────────────────────────┤ │ 解析层（数据提取） │ │ HTML解析、JSON提取、正则、XPath、CSS选择器 │ ├──────────────────────────────────────────────────────┤ │ 渲染层（页面执行） │ │ 静态请求（requests/httpx）vs 动态渲染（浏览器引擎） │ ├─────────────────────────────────

Qwen3-VL-WEBUI科研辅助实战：论文图表理解系统部署指南

Qwen3-VL-WEBUI科研辅助实战：论文图表理解系统部署指南 1. 引言 1.1 科研场景中的多模态需求 在现代科研工作中，尤其是计算机视觉、生物医学、工程设计等领域，研究者频繁面对包含复杂图表、示意图、流程图和数据可视化的学术论文。传统文本摘要工具难以有效解析这些非结构化视觉信息，导致知识提取效率低下。 随着大模型技术的发展，具备强大图文理解能力的视觉语言模型（VLM）成为解决这一痛点的关键。阿里云最新推出的 Qwen3-VL-WEBUI 正是为此类高阶科研任务量身打造的一站式交互平台。 1.2 Qwen3-VL-WEBUI 的核心价值 Qwen3-VL-WEBUI 是基于阿里开源项目构建的本地化 Web 推理界面，内置了 Qwen3-VL-4B-Instruct 模型，专为处理科研文献中的图像内容而优化。它不仅支持对论文插图进行语义级解读，还能实现： * 图表数据反向提取（如从折线图还原原始趋势） * 示意图逻辑结构分析 * 数学公式识别与推理链生成 * 多页PDF长文档上下文关联理解 该系统可在单张消费级显卡（如RTX 4090D）上高效运行，极大