原文地址：itnext.io/desktop-gui…

原文作者：achraf-feydi.medium.com/

发布时间：2021年5月17日 – 4分钟阅读

网站链接：www.fluttergui.com/

Github Repo: github.com/achreffaidi…

为什么是FlutterGUI？

作为Flutter 2的一部分，Flutter宣布Flutter的网络支持已经达到了稳定的里程碑。

这不仅意味着我终于可以不用再写HTML和CSS代码了，也意味着我现在可以拥有一个可以在几乎所有流行平台上运行的应用程序?。

我对Flutter Web的稳定版并没有什么期待，因为我已经试过了Beta版，而且对大多数插件的支持也不够。但两周前重新开始使用它，我对目前支持WEB的插件数量感到惊讶。

这促使我去尝试一些有挑战性的东西，用flutter web创建一个桌面GUI作为我的新的投资组合网站?。

坦率地说，这个项目本身并不是什么有用的东西??♂️；它没有解决一个问题，可能也不是我下一个十亿美元的想法。但是，这是发现在web项目中使用Flutter web的优势✅和限制⚠️的最好方法。说实话，我想我至少要花2个月的时间来发布它的第一个版本。

在花了2周的时间，每夜工作2小时左右后，我最终得到了一些真正值得发布的东西。

我很惊讶?，尽管我没有阅读任何文档，也没有像平时那样用谷歌搜索东西，但体验是如此简单和顺利。从使用Flutter手机开发到网络开发真的很简单，我在这个项目中没有使用任何我所学到的网络开发知识。

要看到所有的功能，请看这个演示视频。

www.youtube.com/watch?v=v6O…

技术概述

• 项目现在有8个应用程序在里面运行，而且你已经猜到了。它都是Widgets。
• 大部分的应用程序都是现有的flutter插件，它们被包裹在我创建的通用应用程序Widget中。
• 码头是从头开始建立的，因为我找不到一个现有的能满足我需求的码头。

-️ 这个项目没有后台，Flutter Web应用托管在Github页面上。
-️ 我使用Firebase Analytics来跟踪用户与应用程序的互动情况。

应用程序

• 文件管理器：是使用flutter_treeview和reorderables插件构建的。

文件管理器应用

• 视频播放器：使用video_player插件构建。

视频播放器

• 计算器：使用flutter_simple_calculator插件建立。

计算器

• 照片：使用photo_view插件建立。

图片

• 游戏：使用Maze插件建立。

游戏

• HTML阅读器：使用flutter_widget_from_html_core插件建立。

HTML阅读器

• PDF阅读器：使用native_pdf_view插件建立。

PDF阅读器

• 画家：使用painter插件构建。

下一步是什么？

在这一系列的文章中，我将解释我是如何在这个项目中实现一些复杂的小部件的。我希望它能帮助其他开发者做出很酷很有用的项目。

你可以在下面找到所有的链接。一旦文章准备好了，我就会更新它们。

• 使用Flutter WEB实现桌面GUI（第2部分：Dock）
• 使用 Flutter WEB 实现桌面 GUI（第 3 部分：可拖动和可调整的窗口）
• 使用Flutter WEB实现桌面GUI（第4部分：Windows XP崩溃）
• 使用Flutter WEB实现桌面图形用户界面 (第5部分：全屏动画）
• 使用Flutter WEB实现桌面GUI（第6部分：Github页面和自定义URL）

www.deepl.com 翻译