[Flutter翻譯]使用Flutter WEB實現桌面GUI(第一部分:介紹)

Sunbreak發表於2021-05-26

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

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

釋出時間:2021年5月17日 - 4分鐘閱讀

網站連結:www.fluttergui.com/

Github Repo: github.com/achreffaidi…

image.png

image.png

為什麼是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來跟蹤使用者與應用程式的互動情況。

應用程式

image.png

檔案管理器應用

image.png

視訊播放器

image.png

計算器

image.png

圖片

  • 遊戲:使用Maze外掛建立。

image.png

遊戲

image.png

HTML閱讀器

image.png

PDF閱讀器

  • 畫家:使用painter外掛構建。

image.png

下一步是什麼?

在這一系列的文章中,我將解釋我是如何在這個專案中實現一些複雜的小部件的。我希望它能幫助其他開發者做出很酷很有用的專案。

你可以在下面找到所有的連結。一旦文章準備好了,我就會更新它們。

  • 使用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 翻譯

相關文章