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

SpringBoot+Vue 学生评奖评优管理系统平台完整项目源码+SQL脚本+接口文档【Java Web毕设】

SpringBoot+Vue 学生评奖评优管理系统平台完整项目源码+SQL脚本+接口文档【Java Web毕设】

摘要 随着教育信息化的快速发展，高校学生评奖评优管理工作逐渐从传统纸质化向数字化、智能化转型。传统评奖评优流程中存在效率低、透明度不足、数据管理混乱等问题，亟需一套高效、公平、透明的管理系统来优化流程。学生评奖评优管理系统平台旨在通过信息化手段实现评奖评优全流程的在线化管理，包括学生信息录入、奖项设置、评审打分、结果公示等功能，从而提升管理效率，确保评审过程的公正性。该系统能够有效减少人为干预，实现数据的实时更新与共享，为高校学生管理工作提供强有力的技术支持。关键词：教育信息化、评奖评优、管理系统、流程优化、数据共享。 本系统基于SpringBoot和Vue技术栈开发，采用前后端分离架构，实现了高内聚低耦合的设计目标。后端使用SpringBoot框架提供RESTful API接口，结合MyBatis-Plus实现数据持久化操作；前端采用Vue.js框架，配合Element-UI组件库构建用户界面，确保系统具有良好的交互体验。系统功能模块包括用户管理、奖项管理、评审管理、数据统计等，支持多角色权限控制，满足管理员、教师、学生等不同用户的需求。数据库采用MySQL存储，通过SQL脚本实

nodejs： 能在线编辑 Markdown 文档的 Web 服务程序，更多扩展功能

承上一篇：nodejs： 能在线编辑 Markdown 文档的 Web 服务程序 如果需要更多 Markdown 扩展（如表格、数学公式）等功能，怎样编写？ 已经采用了移除服务端 mermaid 依赖的方案，现在想要为这个 Markdown 编辑器扩展表格、数学公式等功能，继续完善代码，添加这些常用的 Markdown 扩展能力，同时保持代码的简洁和可维护性。 实现思路 1. 表格支持：marked 本身已内置 GitHub 风格的表格解析，只需确保启用相关配置 2. 数学公式支持：集成 katex 或 mathjax 来渲染 LaTeX 格式的数学公式 3. 代码高亮：添加 highlight.js 增强代码块的语法高亮效果 4.

Flutter 三方库 bones_ui 的鸿蒙化适配指南 - 打造直观、响应式的 Web 风格 UI 交互体验

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 bones_ui 的鸿蒙化适配指南 - 打造直观、响应式的 Web 风格 UI 交互体验 Flutter for OpenHarmony 开发者在构建具有 Web 质感的跨平台应用时，UI 框架的选择至关重要。本文将带大家深度调研 Dart 三方库 bones_ui 在鸿蒙系统上的适配方案，探索如何利用其直观的组件架构，加速鸿蒙桌面级应用的开发效率。 前言 在移动端和桌面端融合的今天，开发者往往希望一套代码能同时适配多种屏幕形态。bones_ui 原生为 Dart Web 打造，但在 Flutter for OpenHarmony 的大前端生态中，其简洁的 UI 组件设计思想对我们构建鸿蒙跨平台应用具有极大的参考价值。

Windows家用电脑也能玩转Gemma3大模型？手把手教你用Ollama+Open WebUI搭建AI聊天室

家用Windows电脑变身AI工作站：零门槛部署Gemma3大模型实战指南 你是否也曾觉得，那些动辄需要数万甚至数十万专业设备的AI大模型，离普通人的生活太过遥远？看着科技新闻里各种模型“跑分”的新闻，心里痒痒的，却苦于没有合适的硬件去亲手尝试？今天，我想和你分享一个可能颠覆你认知的事实：你手边那台用来追剧、办公的Windows家用电脑，完全有能力成为一个功能完整的AI工作站。 没错，我说的不是那些需要专业显卡、昂贵服务器的“庞然大物”，而是谷歌最新开源的Gemma3系列模型。这个家族提供了从1B到27B不同参数规模的版本，特别是经过优化的轻量级版本，对硬件的要求已经降到了令人惊喜的程度。更重要的是，整个部署过程并不需要你具备多深的系统运维知识，更像是在安装一个功能强大的软件。 这篇文章，就是为你——那些对AI技术充满好奇，但预算有限、设备普通的个人开发者、学生或技术爱好者准备的。我们将彻底抛开那些复杂的云服务配置和命令行“黑话”，用最直观、最接地气的方式，一步步将Gemma3大模型“请”到你的Windows电脑里，并给它配上一个漂亮易用的网页聊天界面。你会发现，体验前沿AI技术