当前位置：首页 > news >正文

Flutter Web 与桌面端开发实战：一套代码跑全平台！

news 2026/6/28 16:11:35

一、前言

很多人以为 Flutter 只能做移动端，其实从Flutter 2.0 起已正式支持 Web 和桌面端！本文将带你构建一个“跨五端”应用（Android、iOS、Web、Windows、macOS），并解决平台适配的关键问题。

二、启用多平台支持

在项目根目录执行：

bash

编辑

flutter create .

然后分别启用各平台：

bash

编辑

flutter config --enable-web flutter config --enable-windows-desktop flutter config --enable-macos-desktop flutter config --enable-linux-desktop

✅ 检查支持情况：flutter devices

三、实战：构建一个 Markdown 编辑器（五端运行）

功能需求：

左侧输入 Markdown
右侧实时预览 HTML
支持保存到本地（移动端用共享存储，桌面用文件系统）

1. 核心依赖

yaml

编辑

dependencies: flutter: sdk: flutter markdown: ^7.0.0 path_provider: ^2.1.0 # 移动端文件路径 file_selector: ^1.0.0 # 桌面端文件选择

2. 跨平台 UI 布局（响应式设计）

dart

编辑

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Markdown Editor')), body: LayoutBuilder( builder: (context, constraints) { // 在 Web/桌面宽屏下左右分栏，移动端上下布局 if (constraints.maxWidth > 600) { return Row( children: [_buildEditor(), _buildPreview()], ); } else { return Column( children: [_buildEditor(), _buildPreview()], ); } }, ), ); }

3. 跨平台文件保存（关键！）

dart

编辑

Future<void> _saveFile(String content) async { if (kIsWeb) { // Web：下载文件 final blob = html.Blob([content], 'text/markdown'); html.AnchorElement(href: html.Url.createObjectUrlFromBlob(blob)) ..setAttribute('download', 'note.md') ..click(); } else if (Platform.isAndroid || Platform.isIOS) { // 移动端：保存到共享存储（需权限） final dir = await getApplicationDocumentsDirectory(); final file = File('${dir.path}/note.md'); await file.writeAsString(content); ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: '已保存')); } else { // 桌面端：弹出文件选择器 final file = await FileSelector.saveFile( suggestedName: 'note.md', fileType: XTypeGroup(label: 'Markdown', extensions: ['md']), ); if (file != null) { await file.writeAsString(content); } } }

🔑 使用kIsWeb、Platform.isXXX进行平台判断。

四、各平台运行效果展示

平台	截图示意
Android
iOS
Web
Windows
macOS

💡 实际发布时替换为真实截图，可通过flutter run -d windows等命令本地测试。

五、性能与优化建议

Web 打包优化：

bash

编辑

flutter build web --web-renderer canvaskit # 高保真但体积大 flutter build web --web-renderer html # 轻量但功能受限

桌面端图标与窗口设置：
- 修改windows/runner/resources/app_icon.ico
- 设置窗口大小：WindowManager.instance.setSize(Size(1200, 800));
避免平台特定代码污染：封装为platform_service.dart