Flutter Web 混合开发：构建跨平台 Web 应用

优质文章学习记录

— 8 min read

Flutter Web 混合开发：构建跨平台 Web 应用

代码如诗，Web 如画。让我们用 Flutter Web 的强大能力，构建出既美观又高性能的跨平台 Web 应用。

什么是 Flutter Web？

Flutter Web 是 Flutter 框架的 Web 支持，它允许开发者使用 Flutter 的 UI 框架和 Dart 语言来构建 Web 应用。Flutter Web 将 Dart 代码编译为 JavaScript，使其能够在浏览器中运行。

Flutter Web 的优势

  1. 单一代码库：一套代码可以同时构建 Web、移动端和桌面端应用。
  2. 高性能：Flutter Web 使用 Skia 渲染引擎，提供接近原生的性能。
  3. 丰富的 UI 组件：Flutter 提供了丰富的 Material Design 和 Cupertino 组件。
  4. 热重载：开发过程中可以快速看到代码更改的效果。
  5. 可访问性：Flutter Web 支持屏幕阅读器和键盘导航。

环境搭建

1. 启用 Flutter Web 支持

# 启用 Web 支持 flutter config --enable-web # 验证 Web 支持 flutter devices

2. 创建 Flutter Web 项目

# 创建新项目 flutter create my_web_app # 进入项目目录 cd my_web_app # 运行 Web 应用 flutter run -d chrome

3. 构建 Web 应用

# 构建 Web 应用（发布模式） flutter build web # 构建 Web 应用（调试模式） flutter build web --debug # 构建 Web 应用（指定基础路径） flutter build web --base-href "/my-app/"

Web 特定配置

1. web/index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="description" content="My Flutter Web App"> <!-- iOS meta tags & icons --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="My App"> <link rel="apple-touch-icon" href="icons/Icon-192.png"> <!-- Favicon --> <link rel="icon" type="image/png" href="favicon.png"/> <title>My Flutter Web App</title> <link rel="manifest" href="manifest.json"> <!-- 添加自定义样式 --> <style> body { margin: 0; padding: 0; overflow: hidden; } /* 加载指示器 */ .loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Arial, sans-serif; font-size: 18px; color: #667eea; } </style> </head> <body> <!-- 加载指示器 --> <div>加载中...</div> <script src="flutter.js" defer></script> <script> window.addEventListener('load', function(ev) { // 下载 main.dart.js _flutter.loader.loadEntrypoint({ serviceWorker: { serviceWorkerVersion: serviceWorkerVersion, }, onEntrypointLoaded: function(engineInitializer) { engineInitializer.initializeEngine().then(function(appRunner) { appRunner.runApp(); // 隐藏加载指示器 document.getElementById('loading').style.display = 'none'; }); } }); }); </script> </body> </html>

2. web/manifest.json

{ "name": "My Flutter Web App", "short_name": "My App", "start_url": ".", "display": "standalone", "background_color": "#667eea", "theme_color": "#667eea", "description": "A Flutter Web application", "orientation": "portrait-primary", "prefer_related_applications": false, "icons": [ { "src": "icons/Icon-192.png", "sizes": "192x192" }, { "src": "icons/Icon-512.png", "sizes": "512x512" } ] }

Web 特定功能

1. 响应式布局

import 'package:flutter/material.dart'; class ResponsiveLayout extends StatelessWidget { const ResponsiveLayout({super.key}); @override Widget build(BuildContext context) { return LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth < 600) { return const MobileLayout(); } else if (constraints.maxWidth < 1200) { return const TabletLayout(); } else { return const DesktopLayout(); } }, ); } } class MobileLayout extends StatelessWidget { const MobileLayout({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('移动端布局')), body: const Center(child: Text('这是移动端布局')), ); } } class TabletLayout extends StatelessWidget { const TabletLayout({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('平板布局')), body: const Center(child: Text('这是平板布局')), ); } } class DesktopLayout extends StatelessWidget { const DesktopLayout({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('桌面端布局')), body: const Center(child: Text('这是桌面端布局')), ); } }

2. 浏览器导航

import 'package:flutter/material.dart'; import 'package:flutter_web_plugins/flutter_web_plugins.dart'; void main() { // 使用路径 URL 策略（移除 URL 中的 #） setUrlStrategy(PathUrlStrategy()); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Web', theme: ThemeData(primarySwatch: Colors.blue), initialRoute: '/', routes: { '/': (context) => const HomePage(), '/about': (context) => const AboutPage(), '/contact': (context) => const ContactPage(), }, ); } }

3. 与 JavaScript 交互

import 'dart:js' as js; import 'dart:html' as html; class JsInteropExample { // 调用 JavaScript 函数 static void callJsFunction() { js.context.callMethod('alert', ['Hello from Flutter!']); } // 获取 JavaScript 变量 static dynamic getJsVariable(String name) { return js.context[name]; } // 设置 JavaScript 变量 static void setJsVariable(String name, dynamic value) { js.context[name] = value; } // 调用 JavaScript 对象的方法 static void callJsObjectMethod() { final obj = js.JsObject.jsify({ 'name': 'Flutter', 'greet': (name) => 'Hello, $name!', }); final result = obj.callMethod('greet', ['World']); print(result); // Hello, World! } // 使用 HTML5 API static void useHtml5Api() { // 获取当前 URL final url = html.window.location.href; print('Current URL: $url'); // 跳转到新页面 html.window.location.href = 'https://flutter.dev'; // 获取本地存储 final storage = html.window.localStorage; storage['key'] = 'value'; final value = storage['key']; // 获取浏览器信息 final userAgent = html.window.navigator.userAgent; print('User Agent: $userAgent'); } }

4. PWA 支持

import 'dart:html' as html; class PwaService { // 检查是否支持 Service Worker static bool get isServiceWorkerSupported { return html.window.navigator.serviceWorker != null; } // 注册 Service Worker static Future<void> registerServiceWorker() async { if (isServiceWorkerSupported) { try { final registration = await html.window.navigator.serviceWorker! .register('flutter_service_worker.js'); print('Service Worker registered: ${registration.scope}'); } catch (e) { print('Service Worker registration failed: $e'); } } } // 检查是否已安装 PWA static bool get isPwaInstalled { return html.window.matchMedia('(display-mode: standalone)').matches; } // 请求安装 PWA static void requestPwaInstall() { // 需要在 beforeinstallprompt 事件中保存事件 // 然后在这里触发 } }

性能优化

1. 代码分割

// 使用 deferred 关键字延迟加载库 import 'package:my_app/heavy_feature.dart' deferred as heavy_feature; class LazyLoadedPage extends StatefulWidget { const LazyLoadedPage({super.key}); @override State<LazyLoadedPage> createState() => _LazyLoadedPageState(); } class _LazyLoadedPageState extends State<LazyLoadedPage> { bool _isLoaded = false; @override void initState() { super.initState(); _loadLibrary(); } Future<void> _loadLibrary() async { await heavy_feature.loadLibrary(); setState(() { _isLoaded = true; }); } @override Widget build(BuildContext context) { if (!_isLoaded) { return const Scaffold( body: Center(child: CircularProgressIndicator()), ); } return Scaffold( body: heavy_feature.HeavyFeatureWidget(), ); } }

2. 图片优化

import 'package:flutter/material.dart'; class OptimizedImage extends StatelessWidget { final String imageUrl; final double width; final double height; const OptimizedImage({ super.key, required this.imageUrl, required this.width, required this.height, }); @override Widget build(BuildContext context) { return Image.network( imageUrl, width: width, height: height, fit: BoxFit.cover, // 使用缓存 cacheWidth: width.toInt() * 2, cacheHeight: height.toInt() * 2, // 加载占位符 loadingBuilder: (context, child, loadingProgress) { if (loadingProgress == null) return child; return Container( width: width, height: height, color: Colors.grey[300], child: const Center(child: CircularProgressIndicator()), ); }, // 错误处理 errorBuilder: (context, error, stackTrace) { return Container( width: width, height: height, color: Colors.grey[300], child: const Icon(Icons.error), ); }, ); } }

3. 减少重绘

import 'package:flutter/material.dart'; class OptimizedWidget extends StatelessWidget { const OptimizedWidget({super.key}); @override Widget build(BuildContext context) { return const RepaintBoundary( child: ComplexWidget(), ); } } class ComplexWidget extends StatelessWidget { const ComplexWidget({super.key}); @override Widget build(BuildContext context) { return Container( // 复杂的内容 ); } }

实践案例：创建一个 Flutter Web 博客

import 'package:flutter/material.dart'; import 'package:flutter_web_plugins/flutter_web_plugins.dart'; void main() { setUrlStrategy(PathUrlStrategy()); runApp(const BlogApp()); } class BlogApp extends StatelessWidget { const BlogApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Web 博客', theme: ThemeData( primarySwatch: Colors.blue, useMaterial3: true, ), initialRoute: '/', routes: { '/': (context) => const HomePage(), '/post': (context) => const PostPage(), '/about': (context) => const AboutPage(), }, ); } } // 首页 class HomePage extends StatelessWidget { const HomePage({super.key}); final List<Map<String, String>> posts = const [ { 'title': 'Flutter Web 入门指南', 'excerpt': '学习如何使用 Flutter 构建 Web 应用...', 'date': '2024-03-31', }, { 'title': '响应式布局最佳实践', 'excerpt': '掌握 Flutter 中的响应式设计技巧...', 'date': '2024-03-30', }, { 'title': '性能优化技巧', 'excerpt': '提升 Flutter Web 应用性能的实用方法...', 'date': '2024-03-29', }, ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Web 博客'), actions: [ TextButton( onPressed: () => Navigator.pushNamed(context, '/about'), child: const Text('关于', style: TextStyle(color: Colors.white)), ), ], ), body: LayoutBuilder( builder: (context, constraints) { return SingleChildScrollView( child: Center( child: Container( constraints: const BoxConstraints(maxWidth: 800), padding: const EdgeInsets.all(24), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text( '最新文章', style: TextStyle( fontSize: 28, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 24), ...posts.map((post) => PostCard(post: post)), ], ), ), ), ); }, ), ); } } // 文章卡片 class PostCard extends StatelessWidget { final Map<String, String> post; const PostCard({super.key, required this.post}); @override Widget build(BuildContext context) { return Card( margin: const EdgeInsets.only(bottom: 16), child: InkWell( onTap: () => Navigator.pushNamed(context, '/post'), child: Padding( padding: const EdgeInsets.all(20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( post['title']!, style: const TextStyle( fontSize: 20, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 8), Text( post['excerpt']!, style: TextStyle( fontSize: 16, color: Colors.grey[600], ), ), const SizedBox(height: 12), Text( post['date']!, style: TextStyle( fontSize: 14, color: Colors.grey[500], ), ), ], ), ), ), ); } } // 文章详情页 class PostPage extends StatelessWidget { const PostPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('文章详情'), leading: IconButton( icon: const Icon(Icons.arrow_back), onPressed: () => Navigator.pop(context), ), ), body: SingleChildScrollView( child: Center( child: Container( constraints: const BoxConstraints(maxWidth: 800), padding: const EdgeInsets.all(24), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text( 'Flutter Web 入门指南', style: TextStyle( fontSize: 32, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 16), Text( '2024-03-31', style: TextStyle( fontSize: 14, color: Colors.grey[500], ), ), const SizedBox(height: 24), const Text( 'Flutter Web 是 Flutter 框架的 Web 支持，它允许开发者使用 Flutter 的 UI 框架和 Dart 语言来构建 Web 应用。', style: TextStyle( fontSize: 18, height: 1.6, ), ), const SizedBox(height: 16), const Text( '在本文中，我们将学习如何搭建 Flutter Web 开发环境，创建第一个 Web 应用，以及了解 Web 开发的最佳实践。', style: TextStyle( fontSize: 18, height: 1.6, ), ), ], ), ), ), ), ); } } // 关于页面 class AboutPage extends StatelessWidget { const AboutPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('关于'), leading: IconButton( icon: const Icon(Icons.arrow_back), onPressed: () => Navigator.pop(context), ), ), body: const Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Flutter Web 博客', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, ), ), SizedBox(height: 16), Text( '使用 Flutter Web 构建的现代化博客应用', style: TextStyle( fontSize: 16, color: Colors.grey, ), ), ], ), ), ); } }

部署

1. 构建 Web 应用

flutter build web --release

2. 部署到 Firebase Hosting

# 安装 Firebase CLI npm install -g firebase-tools # 登录 Firebase firebase login # 初始化项目 firebase init hosting # 部署 firebase deploy

3. 部署到 GitHub Pages

# 构建 Web 应用 flutter build web --release # 复制到 docs 目录 cp -r build/web docs # 提交并推送 git add docs git commit -m "Deploy to GitHub Pages" git push

4. 部署到 Netlify

# 构建 Web 应用 flutter build web --release # 部署到 Netlify netlify deploy --prod --dir=build/web

总结

Flutter Web 为开发者提供了一种强大的方式来构建跨平台 Web 应用。通过掌握 Flutter Web 的开发技巧和最佳实践，我们可以创建出既美观又高性能的 Web 应用。

Web 开发不仅仅是关于技术，更是关于用户体验。让我们用 Flutter Web 的强大能力，构建出令人惊叹的 Web 应用，展现前端技术的无限可能。

Read more

终极指南：5步掌握llama.cpp量化技术，让大模型内存占用直降70%

终极指南：5步掌握llama.cpp量化技术，让大模型内存占用直降70% 【免费下载链接】llama.cppPort of Facebook's LLaMA model in C/C++ 项目地址: https://gitcode.com/GitHub_Trending/ll/llama.cpp 还在为大模型推理时内存爆满而苦恼吗？作为C/C++实现的LLaMA模型移植项目，llama.cpp通过创新的量化（Quantization）技术，将模型参数量化为低精度格式，在保持推理质量的同时大幅降低内存需求。本文将为你揭秘量化技术的核心原理、实战配置和性能优化技巧，帮你轻松在消费级硬件上运行千亿参数模型。 量化技术：大模型部署的破局利器 传统FP32精度模型在推理时需要消耗大量内存，以70亿参数模型为例，仅权重就需要占用约28GB显存。量化技术通过将模型参数从32位浮点数压缩为4位、8位整数，就像把高清视频转为标清——虽然细节略有损失，但核心内容依然清晰可用。 llama.cpp的量化方案通过精度分级+
技术速递｜GitHub Copilot SDK 与云原生的完美融合

技术速递｜GitHub Copilot SDK 与云原生的完美融合

作者：卢建晖 - 微软高级云技术布道师 排版：Alan Wang 引言 在当今快速演进的 AI 技术格局中，我们已经见证了从简单聊天机器人到复杂智能体系统的转变。作为一名开发者和技术布道者，我观察到一个正在形成的趋势——重点不在于让 AI 无所不能，而在于让每一个 AI Agent 在特定领域做到极致、做到专业。 今天，我想分享一套令人兴奋的技术组合：GitHub Copilot SDK（将生产级智能体引擎嵌入任意应用的开发工具包） + Agent-to-Agent（A2A）Protocol（实现智能体标准化协作的通信规范） + 云原生部署（支撑生产系统的基础设施）。这三者结合在一起，使我们能够构建真正具备协作能力的多智能体系统。 从 AI 助手到智能体引擎：重新定义能力边界 传统的 AI 助手往往追求“全能”——试图回答你抛给它的任何问题。但在真实的生产环境中，这种方式会遇到严重挑战： * 质量不一致：一个模型同时写代码、做数据分析、

【工具】GitHub学生认证+PyCharm配置Copilot全流程指南

1. 为什么你需要GitHub学生认证和Copilot？ 如果你是一名在校学生，并且对编程、软件开发或者任何需要写代码的事情感兴趣，那你今天算是来对地方了。我猜你可能已经听说过GitHub Copilot这个“AI结对编程”神器，它能像一位经验丰富的搭档一样，在你写代码时实时给出建议，从补全一行代码到生成整个函数，甚至帮你写注释和测试用例。但它的订阅费用对于学生来说，可能是一笔不小的开销。 好消息是，GitHub为全球的学生提供了免费的Copilot Pro访问权限。是的，你没听错，完全免费。这不仅仅是试用，而是只要你保持学生身份，就可以持续享受的权益。我当年读书的时候可没这么好的事，现在看到学生们能免费用到这么强大的工具，真是既羡慕又欣慰。通过学生认证，你不仅能白嫖Copilot，还能解锁GitHub Pro账户、JetBrains全家桶的教育许可证、各种云服务商的免费额度等一大堆“学生包”福利，价值远超千元。 那么，整个流程到底麻不麻烦？实话说，如果你按部就班操作，顺利的话半小时内就能搞定。但我也见过不少同学因为一些细节没注意，卡在某个环节反复折腾。这篇文章，我就结合自己帮学

OpenAI Codex vs GitHub Copilot：哪个更适合你的开发需求？2025年深度对比

OpenAI Codex 与 GitHub Copilot：2025年开发者如何做出关键选择？ 在2025年的技术栈里，一个高效的AI编程伙伴不再是锦上添花，而是决定项目节奏与质量的核心生产力。面对市场上功能各异的选择，许多开发者，尤其是那些管理着复杂项目或带领团队的技术决策者，常常陷入一个两难的境地：是选择功能全面、能独立处理任务的“AI工程师”，还是选择无缝集成、提供实时灵感的“智能副驾驶”？这不仅仅是工具的选择，更是关于工作流重塑、团队协作模式乃至项目架构未来的战略决策。对于个人开发者、初创团队乃至大型企业的技术负责人而言，理解这两款主流工具——OpenAI Codex与GitHub Copilot——在本质定位、适用场景与成本效益上的深层差异，是避免资源错配、最大化技术投资回报的第一步。本文将深入它们的核心，帮助你根据真实的开发需求，找到那个最契合的“数字搭档”。 1. 核心理念与定位：从“辅助”到“执行”的范式差异 理解Codex和Copilot，首先要跳出“它们都是写代码的AI”这个笼统印象。它们的底层设计哲学决定了完全不同的应用边界。 OpenAI Codex