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

收藏级｜小白也能上手！用魔搭+LLaMA Factory手把手实操大模型微调全流程

收藏级｜小白也能上手！用魔搭+LLaMA Factory手把手实操大模型微调全流程

本文用「教育孩子」类比「训练AI」的通俗方式，拆解大模型微调的完整流程，全程基于魔搭平台和LLaMA Factory工具，从环境搭建、模型下载、数据准备，到模型训练、本地测试、模型导出，每一步都附具体操作和代码，无多余冗余。无论是零基础小白，还是刚接触大模型的程序员，都能跟着步骤一步步实操，轻松吃透预训练、微调和RLHF三大核心阶段，成功训练出属于自己的第一个大模型，建议收藏备用，实操时直接对照步骤走！ 1、先搞懂：什么是大模型「微调」？ 在动手实操前，我们先花2分钟搞懂核心概念——微调。常规大语言模型的训练，就像培养一个孩子，整体分为3个关键阶段，一张图就能看明白： 用「养娃」做类比，小白也能秒懂三个阶段的区别，建议记好这个类比，后续理解流程更轻松： 1. 预训练（对应孩子的「通识教育」） * 模型层面：通过自监督学习，读取海量文本数据，掌握基础的语言规则、词汇逻辑，
2025最佳AI修图编辑工具全面对比：看完即选，拿来就用

2025最佳AI修图编辑工具全面对比：看完即选，拿来就用

修图总遇三重痛：新手不会调参数、专业修图耗时长、批量处理效率低，还常因设备限制没法随时操作。本文覆盖6款2025主流AI修图工具，适配手机/电脑/网页端，含具体操作步骤+精准选型指南，新手到专业用户都能找到匹配方案，看完直接落地。 一、测评了6款全网使用量高的工具 1、【Adobe Photoshop 2025】+ 专业级全能AI修图标杆 适用场景：商业摄影精修、复杂合成创作、印刷级色彩管理（适配专业设计师/摄影工作室） 核心亮点：AI内容感知填充成功率98%，支持5000+镜头畸变自动校正（修正1.2%桶形畸变），批量处理100张RAW格式照片仅需12分钟，保留16位色深细节，兼容Windows/macOS全系统。 操作步骤： 1. 打开图片→点击顶部「滤镜」→选择「Neural Filters」； 2. 勾选需使用的功能（如「Portrait Blur」
技术拆解：P2P组网如何一键远程AI

技术拆解：P2P组网如何一键远程AI

文章目录 * **远程访问AI服务的核心是什么？** * **从暴露服务到连接设备** * **核心组件与交互解析** * **安全架构深度剖析** * **一键安装脚本的技术实现** * **# Windows** * **#macOS** * **#Linux** * **与AI工作流的结合实践** 远程访问AI服务的核心是什么？ 你自己在电脑或者服务器上装了AI服务，比如大语言模型、Stable Diffusion这些，但是有个头疼的事儿：外面的人或者你在别的地方，怎么既安全又方便地连上这些本地的服务？以前的办法要么得有公网IP，还得敲一堆命令行用SSH隧道，要么就是直接开端口映射，等于把服务直接晾在公网上，太不安全了。 今天咱们就好好说说一种靠P2P虚拟组网的办法，还拿个叫节点小宝的工具举例子，看看它怎么做到不用改啥东西，点一下就装好，还能建个加密的通道，实现那种“服务藏得好好的，想连就能直接连上”的安全远程访问方式。 从暴露服务到连接设备 核心思路转变在于：不再尝试将内网服务端口暴露到公网（一个危险的攻击面），而是将外部访问设

照片级AI绘画！Z-Image-Turbo生成写实图像体验

照片级AI绘画！Z-Image-Turbo生成写实图像体验 1. 引言：从概念到高质量写实图像的飞跃 近年来，AI图像生成技术经历了从“抽象艺术”到“照片级真实感”的跨越式发展。阿里通义推出的 Z-Image-Turbo 模型，正是这一趋势下的代表性成果——它不仅具备强大的语义理解能力，还能在极短推理步数下生成高度逼真的写实图像。 本文将基于由开发者“科哥”二次开发构建的 Z-Image-Turbo WebUI 镜像，深入探讨其在写实图像生成方面的实际表现与使用技巧。我们将重点分析： - 如何通过提示词设计提升照片级细节 - 关键参数对图像质量的影响 - 实际应用场景中的优化策略 该镜像已在 ZEEKLOG 星图平台提供预置部署环境，支持一键启动，极大降低了本地运行门槛。 2. Z-Image-Turbo 核心特性解析 2.1 模型架构与性能优势 Z-Image-Turbo 基于扩散模型（Diffusion Model）架构进行优化，在保持高画质输出的同时显著提升了生成速度。其核心优势体现在： * 极速推理：