[Flutter翻譯]我希望在構建Flutter應用程式之前知道的事情

Sunbreak發表於2021-07-16

原文地址:ma.ttias.ch/what-i-wish…

原文作者:ma.ttias.ch/

釋出時間:2021年6月30日

在過去的一週裡,我一直在用Flutter構建一個應用程式。我選擇Flutter是因為我喜歡它的承諾。即跨平臺的特性和開發過程中的快速過載。下面是我的第一印象。

主要見解

  • Flutter不是原生應用開發的替代品
  • Dart語言是非常嚴格的型別化
  • 學習Flutter感覺就像重新學習HTML
  • 在狀態方面,很容易讓自己陷入困境
  • Flutter是一個不完整的框架
  • 仔細檢查您的依賴性
  • 熱過載是驚人的
  • 超越材料設計

Flutter 不能替代本地應用程式的開發

Flutter給我帶來的第一個驚喜是,文件中推薦使用Android Studio或Visual Studio Code。這些都是你可能已經從你以前的應用開發經驗中知道的工具。我知道我已經知道了。

描述Flutter的另一種方式是,它使Dart能夠作為指令碼語言使用,併為不同平臺提供直譯器。這意味著你仍然在與任何本地應用程式的相同API對話。事實上,如果你想與任何裝置功能對接,除了顯示使用者介面和發出HTTP請求外,你還需要為這些功能編寫原生程式碼。

使用Flutter的好處是,pub.dev提供了一個包庫,由社群為你實現這些原生實現。

Dart語言是非常嚴格的型別化

我喜歡嚴格型別化的語言,所以對我來說Dart就像家一樣。不過嚴格程度是有範圍的,Dart傾向於非常嚴格。這很像我對Java的體驗。這是我在開發過程中最喜歡的螢幕截圖。

image.png

解決上述錯誤(由Android Studio顯示)的方法是在相關函式的第一個引數中新增動態關鍵字。

在最初的幾個小時裡,你應該已經遇到了大多數這樣的怪事,而且一旦你知道該怎麼找,它們就很容易解決。如果你像我一樣,在這之前你可能會覺得有一點點自卑。

學習Flutter感覺就像重新學習HTML

我所關注的文件側重於使用不同的UI元素。這是有道理的,一個應用程式所做的大部分事情都是在使用者介面和它的元素中。在大多數情況下,這些元素都是以樹形方式分類的。

MaterialApp
└── StartScreen
    └── Column
        ├── Padding
        │   └── DropdownButtonFormField
        ├── Padding
        │   └── Flexible
        │       └── Text
        └── ElevatedButton
複製程式碼

直觀地說,這種結構在我看來很像HTML(或XML),只是用Dart類代替了純文字。

不過,相似之處也就到此為止了。這些元素中的每一個都有自己的怪癖,你將不得不努力學習。舉例來說。

假設你想在載入過程中禁用一個文字輸入欄位的輸入。文字輸入有一個屬性可以實現這個目的。對一個下拉選單做同樣的事情則完全不同。該元素沒有相關的屬性。相反,你需要把null傳給onChanged屬性,以代替你的回撥。

就其本身而言,這些設計選擇並不壞。只是要注意,你必須學習所有這些細節,就像學習一門新語言的詞彙。

在狀態問題上,很容易使自己陷入困境

為狀態管理提供的解決方案乍一看似乎很簡單。任何Widget(大致相當於一個元件)都可以有它自己的狀態,或者是無狀態。這很容易讓人忘記從ReduxVuex學到的經驗。讓每個元件記住它自己的狀態,很容易演變成一個複雜的、相互關聯的狀態變化網路,使應用程式難以理解和除錯。

相反,你應該嘗試在結構的頂部附近保留一個主記錄--一個真理的來源。從那裡你可以向下傳遞數值,就像你在前面提到的解決方案中那樣。

Flutter是一個不完整的框架

起初,我對將Flutter稱為一個框架感到猶豫不決。它的主要目的是作為一個開發工具來實現互操作性和程式設計師的便利。但在構建我的應用程式的過程中,我遇到了許多開箱即用的功能,我認為它們是框架的一部分。

  • 路由(定義和導航)
  • 模板語言和元件
  • 除錯工具
  • 編碼
  • 國際化(i18n)支援
  • 狀態管理

這是一個很好的開始,但可能不是你需要的全部。如果你打算建立一個相當規模的應用程式,我建議你考慮在某些領域建立或尋找解決方案,因為開箱即用的解決方案並不存在或缺乏。

表格

當然,您可以用Flutter構建表單。不過,如何從每個元件中訪問資料,以及配置當前狀態,都是不同的。每個行也需要一些模板程式碼。由於這個原因,我建議研究某種formbuilder或控制器。

JSON序列化/反序列化

與你可能習慣的情況不同,處理JSON需要一些設定,將JSON轉換為本地物件。如果你不需要,很容易將JSON字串解析為String Maps。如果你有一個大專案,這可能不適合。

品牌風格

我把主題設計列為內建元件之一。這隻對了一半。一些Widget可以在全域性範圍內進行樣式設計,不需要額外的引數。對於其他的(例如文字),它們的風格需要每次都被設定為一個屬性。考慮設定一些Widgets的子類,或者是某種工廠,以避免手工設定每個物件的屬性樣式。

仔細檢查你的依賴性

如上所述,你安裝的軟體包將負責其功能的本地實現。對於我的應用程式,我在Android上測試,一切都很正常。出於好奇,我檢查了原始碼庫,發現iOS的實現基本上是個無用功。當然,版本號0.0.1也可以給我一個提示,但讓這成為我們所有人的一個教訓。在你全力以赴之前,請確保你的依賴在所有的目標平臺上都能正常工作。

熱過載是驚人的

在我看來,這是一堆功能中最好的。儲存你的變化並在一秒鐘內看到你的變化,這可以媲美JavaScript應用程式的反饋迴圈。我預計這個功能只在某些情況下起作用,但實際上,據我所知,只有少數情況下需要完全重新載入應用程式。這些情況主要是圍繞著狀態管理,特別是狀態初始化。

超越Material Design

我發現的每個例子都是基於谷歌的Material設計。如果你不希望你的應用程式採用Material Design的風格,會發生什麼?我做了一些研究,普遍的共識似乎是這樣的。

  1. 所有的Widget都可以完全定製,甚至到了不再具有Material設計的外觀。
  2. 對於像文字輸入、導航或類似的普通設計元素這樣的重要元件,重新發明車輪是沒有意義的。

你想怎麼做就怎麼做吧。在這種情況下,我沒有經驗可言。

結論

一個星期後,我的第一個應用程式完成了。這只是一個供我自己使用的工具,所以它看起來並不花哨。但它工作得非常好,而且在大多數情況下,幾乎所有的東西都是直觀使用的。一個更大的應用程式將需要按照我上面所說的思路進行更多的思考。這些絕不是什麼大問題,所以我只能建議你給Flutter一個嘗試。

謝謝您的閱讀

我希望您喜歡這篇文章,也許還能學到一些東西。如果您想保持聯絡,我有一個郵件列表,或者您可以通過社交媒體與我聯絡。


通過www.DeepL.com/Translator(免費版)翻譯

相關文章