19. Flutter与Web混合开发实践：打造跨平台的统一体验

优质文章学习记录

— 8 min read

19. Flutter与Web混合开发实践：打造跨平台的统一体验

引言

Flutter 是一种强大的跨平台开发框架，它不仅可以开发移动应用，还可以开发 Web 应用。随着 Flutter Web 的不断成熟，Flutter 与 Web 混合开发成为了一种新的趋势。作为一名把代码当散文写的 UI 匠人，我始终认为：好的技术应该是无缝的，它应该让开发者能够自由地在不同平台之间切换，而不需要为每个平台重新开发。Flutter 与 Web 混合开发，就是为了实现这种无缝的体验。

什么是 Flutter 与 Web 混合开发？

Flutter 与 Web 混合开发是指在同一个项目中，同时使用 Flutter 和 Web 技术（如 HTML、CSS、JavaScript）来开发应用。这种开发方式可以结合 Flutter 的跨平台能力和 Web 的灵活性，创造出更加丰富的用户体验。

混合开发的优势

  1. 代码复用：Flutter 代码可以在多个平台复用，减少开发工作量
  2. 跨平台一致性：确保在不同平台上的用户体验一致
  3. 灵活性：可以根据不同平台的特点，选择最适合的技术
  4. 性能优化：对于不同平台的性能特点，可以进行针对性优化
  5. 生态系统整合：可以利用 Web 生态系统的丰富资源

混合开发的实现方式

1. Flutter Web

Flutter Web 是 Flutter 的官方 Web 实现，它可以将 Flutter 代码编译成 Web 应用。

优点：

  • 完全使用 Flutter 代码，无需学习其他技术
  • 跨平台一致性好
  • 性能不断提升

缺点：

  • 生成的 JavaScript 代码体积较大
  • 某些 Flutter 特性在 Web 上可能不支持
  • 与现有 Web 技术的集成相对复杂

基本实现：

# 启用 Flutter Web flutter channel beta flutter upgrade flutter config --enable-web # 创建 Flutter 项目 flutter create my_app cd my_app # 运行 Web 应用 flutter run -d chrome # 构建 Web 应用 flutter build web

2. WebView 集成

在 Flutter 应用中嵌入 WebView，加载 Web 内容。

优点：

  • 可以直接使用现有的 Web 内容
  • 与 Web 技术的集成简单
  • 适合需要频繁更新的内容

缺点：

  • 性能不如纯 Flutter 实现
  • 与 Flutter 代码的交互相对复杂
  • 不同平台的 WebView 行为可能不同

基本实现：

import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class WebViewExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('WebView 示例'), backgroundColor: Color(0xFF667eea), ), body: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController controller) { // 控制器 }, onPageFinished: (String url) { // 页面加载完成 }, ), ); } }

3. 混合应用架构

使用 Flutter 开发核心功能，使用 Web 技术开发特定功能。

优点：

  • 充分发挥 Flutter 和 Web 的优势
  • 灵活性高
  • 可以根据需要选择最适合的技术

缺点：

  • 开发复杂度增加
  • 需要管理两种技术栈
  • 可能出现一致性问题

基本实现：

// Flutter 部分 import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class HybridApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '混合应用示例', home: HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('混合应用'), backgroundColor: Color(0xFF667eea), ), body: Column( children: [ // Flutter 部分 Container( height: 200, child: Center( child: Text( 'Flutter 部分', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), ), ), ), // Web 部分 Expanded( child: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, ), ), ], ), ); } }

实际应用案例

案例1：Flutter Web 应用

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Web 示例', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomePage(), ); } } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Web 示例'), backgroundColor: Color(0xFF667eea), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( '你已经点击了按钮多少次:', style: TextStyle(fontSize: 18), ), Text( '$_counter', style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold), ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: '增加', child: Icon(Icons.add), backgroundColor: Color(0xFF667eea), ), ); } }

案例2：Flutter 嵌入 WebView

import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class WebViewExample extends StatefulWidget { @override _WebViewExampleState createState() => _WebViewExampleState(); } class _WebViewExampleState extends State<WebViewExample> { late WebViewController _controller; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('WebView 示例'), backgroundColor: Color(0xFF667eea), actions: [ IconButton( icon: Icon(Icons.refresh), onPressed: () { _controller.reload(); }, ), IconButton( icon: Icon(Icons.arrow_back), onPressed: () async { if (await _controller.canGoBack()) { _controller.goBack(); } }, ), IconButton( icon: Icon(Icons.arrow_forward), onPressed: () async { if (await _controller.canGoForward()) { _controller.goForward(); } }, ), ], ), body: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController controller) { _controller = controller; }, onPageFinished: (String url) { print('页面加载完成: $url'); }, navigationDelegate: (NavigationRequest request) { print('导航到: ${request.url}'); return NavigationDecision.navigate; }, ), ); } }

案例3：Flutter 与 Web 交互

import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class WebViewInteractionExample extends StatefulWidget { @override _WebViewInteractionExampleState createState() => _WebViewInteractionExampleState(); } class _WebViewInteractionExampleState extends State<WebViewInteractionExample> { late WebViewController _controller; String; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter 与 Web 交互'), backgroundColor: Color(0xFF667eea), ), body: Column( children: [ Container( padding: EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text('Flutter 部分', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), SizedBox(height: 8), Text('从 Web 接收的消息: $_message'), SizedBox(height: 16), ElevatedButton( onPressed: () { _controller.evaluateJavascript('sendMessageToWeb("Hello from Flutter!")'); }, child: Text('发送消息到 Web'), style: ElevatedButton.styleFrom( primary: Color(0xFF667eea), ), ), ], ), ), Expanded( child: WebView( initialUrl: 'data:text/html;base64,${Uri.encodeComponent(''' <!DOCTYPE html> <html> <head> <title>Web 部分</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } h1 { color: #667eea; } #message { margin: 20px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } button { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; } button:hover { background: #5a6fd8; } </style> </head> <body> <h1>Web 部分</h1> <div>等待消息...</div> <button onclick="sendMessageToFlutter()">发送消息到 Flutter</button> <script> // 从 Flutter 接收消息 function sendMessageToWeb(message) { document.getElementById('message').textContent = '从 Flutter 接收: ' + message; } // 发送消息到 Flutter function sendMessageToFlutter() { if (window.flutter_inappwebview) { window.flutter_inappwebview.callHandler('message', 'Hello from Web!'); } } </script> </body> </html> ''')}', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController controller) { _controller = controller; }, javascriptChannels: Set.from([ JavascriptChannel( name: 'Flutter', onMessageReceived: (JavascriptMessage message) { setState(() { _message = message.message; }); }, ), ]), ), ), ], ), ); } }

性能优化技巧

  1. 代码分割：对于 Flutter Web 应用，使用代码分割减少初始加载时间
  2. 资源优化：优化图片、字体等资源，减少加载时间
  3. 懒加载：对于非关键内容，使用懒加载技术
  4. 缓存策略：合理使用缓存，减少重复请求
  5. WebView 优化：对于 WebView 集成，优化 Web 内容的性能
  6. 平台特定优化：根据不同平台的特点，进行针对性优化

最佳实践

  1. 合理选择技术栈：根据功能需求和性能要求，选择最适合的技术
  2. 保持一致性：确保在不同平台上的用户体验一致
  3. 模块化设计：将代码模块化，提高可维护性
  4. 测试：在不同平台上进行充分测试，确保功能正常
  5. 性能监控：监控应用性能，及时发现和解决问题
  6. 持续优化：不断优化应用性能和用户体验

工具推荐

  1. Flutter DevTools：用于调试和分析 Flutter 应用
  2. Chrome DevTools：用于调试和分析 Web 应用
  3. Firebase Performance Monitoring：用于监控应用性能
  4. Lighthouse：用于分析 Web 应用的性能和质量
  5. WebView Debugging：用于调试 WebView 内容

代码韵律

// Flutter 与 Web 混合开发的韵律感 // 1. Flutter Web 应用 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Web 示例', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomePage(), ); } } // 2. WebView 集成 class WebViewExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('WebView 示例'), backgroundColor: Color(0xFF667eea), ), body: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController controller) { // 控制器 }, ), ); } } // 3. Flutter 与 Web 交互 class WebViewInteractionExample extends StatefulWidget { @override _WebViewInteractionExampleState createState() => _WebViewInteractionExampleState(); } class _WebViewInteractionExampleState extends State<WebViewInteractionExample> { late WebViewController _controller; String; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter 与 Web 交互'), backgroundColor: Color(0xFF667eea), ), body: Column( children: [ // Flutter 部分 Container( padding: EdgeInsets.all(16), child: Text('从 Web 接收的消息: $_message'), ), // Web 部分 Expanded( child: WebView( initialUrl: 'https://www.example.com', javascriptMode: JavascriptMode.unrestricted, javascriptChannels: Set.from([ JavascriptChannel( name: 'Flutter', onMessageReceived: (JavascriptMessage message) { setState(() { _message = message.message; }); }, ), ]), ), ), ], ), ); } }

总结

Flutter 与 Web 混合开发是一种强大的开发方式，它结合了 Flutter 的跨平台能力和 Web 的灵活性，为开发者提供了更多的选择。作为一名文艺前端匠人，我始终相信：好的技术应该是无缝的，它应该让开发者能够自由地在不同平台之间切换，而不需要为每个平台重新开发。

在实现 Flutter 与 Web 混合开发时，我们要像对待艺术品一样，精心设计每一个细节，确保应用在不同平台上都能提供出色的用户体验。记住，像素不能偏差 1px，用户体验的一致性也不能偏差一分一毫。

CSS 是流动的韵律，JS 是叙事的节奏，而 Flutter 则是跨平台的桥梁。让我们用 Flutter 与 Web 混合开发，打造出更加出色的跨平台应用。

Read more

[前后端系统开发教程]第四节-前端多平台部署的终极解决方案

[前后端系统开发教程]第四节-前端多平台部署的终极解决方案

在上一节中我们已经制作了一个简单的用户管理后端系统，我们这节就来尝试制作一个对应的前端系统。那么，我们是要使用安卓开发者工具制作一个安卓app，或者部署为微信小程序，亦或部署为传统的html网页？ 答案是我全都要！通过DCloud生态，我们可以实现一份代码，多端部署。 第一部分：什么是DCloud生态? 众将士多端露难色，新面孔竟生好胆识 注：本节开始，教程的节奏会适当加快，希望各位可以跟上。 简单来说，DCloud生态的核心功能是，通过将项目按照不同的目标部署平台，二次编译为对应平台的代码，以实现“一份代码，多端部署”，以提高开发效率。详细介绍请参考uniapp官方文档：简介 - HBuilderX 文档。DCloud还提供云函数、云对象等工具，我们将在教程的后面去学习。 在这节教程中我们先学习如何在HBuilderX中调用上节中后端系统的API（即后端服务接口），编写一份前端代码，再将其打包为微信小程序、html网页和安卓app。 第二部分：怎么调用后端API接口？ 接口表叫那前端瞧，服务器知晓谁来还 我们先回顾一下上节教程中的接口类，将其整理为一份API接口说明

vLLM+Open-WebUI部署通义千问2.5-7B完整教程

vLLM + Open-WebUI 部署通义千问2.5-7B完整教程 1. 引言 1.1 学习目标 本文将详细介绍如何使用 vLLM 和 Open-WebUI 联合部署阿里云发布的开源大模型——通义千问2.5-7B-Instruct。通过本教程，你将掌握： * 如何在本地或服务器环境中部署 Qwen2.5-7B 模型 * 利用 vLLM 实现高性能推理（支持 Tensor Parallelism、PagedAttention） * 使用 Open-WebUI 提供类 ChatGPT 的可视化交互界面 * 完整的环境配置、服务启动与访问流程 * 常见问题排查与性能优化建议 最终实现：通过浏览器访问 http://localhost:7860，即可与通义千问进行流畅对话。 1.2 前置知识 为顺利执行本教程，请确保具备以下基础： * 熟悉 Linux
【DataX篇】DataX的两种部署方式以及DataX-Web可视化管理平台的搭建

【DataX篇】DataX的两种部署方式以及DataX-Web可视化管理平台的搭建

💫《博主主页》： 🔎 ZEEKLOG主页：奈斯DB 🔎 IF Club社区主页：奈斯、 🔎 微信公众号：奈斯DB 🔥《擅长领域》： 🗃️ 数据库：阿里云AnalyticDB(云原生分布式数据仓库)、Oracle、MySQL、SQLserver、NoSQL(Redis) 🛠️ 运维平台与工具：Prometheus监控、DataX离线异构同步工具 💖如果觉得文章对你有所帮助，欢迎点赞收藏加关注💖     这篇文章将系统的分享 DataX 的安装部署实践，详细拆解DataX的两种核心部署方式——二进制部署与源码编译部署，并深入探讨动态参数配置、并发度优化等关键调优技巧。🎯     在此基础上，也将进一步介绍如何集成 DataX-Web可视化管控平台 ，以构建一个具备 统一调度、实时监控与高效管理 能力的企业级数据同步运维体系。🚀     DataX二进制、源码安装部署的 Github 地址： https://github.com/alibaba/DataX/blob/master/userGuid.md     DataX-Web二进制、

百川2-13B-Chat WebUI v1.0 应用场景全解析：企业知识问答、编程辅导、多轮客服助手落地案例

百川2-13B-Chat WebUI v1.0 应用场景全解析：企业知识问答、编程辅导、多轮客服助手落地案例 1. 引言：当大模型走进企业，它能做什么？ 如果你是一家公司的技术负责人，最近是不是经常听到同事讨论大模型？大家可能都在问：这东西到底能干什么？是只能聊聊天，还是真能帮我们解决实际问题？ 今天，我们就来聊聊百川2-13B-Chat WebUI v1.0在实际工作中的应用。这不是一个简单的聊天机器人，而是一个经过4bit量化、显存占用仅10GB左右、能在消费级GPU上流畅运行的智能助手。更重要的是，它支持商用申请，这意味着你可以放心地把它用在企业环境中。 在过去几个月里，我们团队把这个模型部署在了多个实际场景中，从内部知识库问答到编程辅导，再到多轮客服对话。我发现，很多企业其实已经具备了使用这类工具的条件，只是不知道从哪里开始，或者担心效果不好。 这篇文章，我就来分享三个真实的落地案例，告诉你这个模型在实际工作中到底能发挥多大作用，以及具体怎么用。无论你是想提升团队效率，还是想探索AI在企业中的应用，相信都能从中获得启发。 2. 案例一：企业知识问答系统，让信息查