Flutter開發初探

目前跨端開發比較熱門的就是 React Native 和 Flutter 了，到底該選哪門技術彷佛也快成了大前端圈的一個熱門話題。對於web前端來講，基於web生態的 React Native 應該是一個更加順暢而天然的選擇；但 Flutter 讓人動心的地方就是高性能和 跨端UI一致性。而React Native 發展不太明朗和 Flutter 愈加成熟的走勢對比促使我從觀望的心態轉爲加入 Flutter。

這裏主要就是記錄一下學習Flutter的一些感想和見解：

• 包管理
• 佈局和樣式
• json
• 狀態管理

包管理

pubspec.yaml 文件的做用相似於 npm 的 package.json ，而yaml格式也比json方便。可是不能用命令行自動安裝包卻讓習慣了npm的我以爲麻煩。由於Flutter 安裝依賴包是這麼一個流程：

1. 打開pub.dev網站；
2. 搜索須要的包，獲得包的名稱和版本；
3. 把包名稱和版本填入pubspec.yaml，最後纔開始下載包。

我以爲應該直接命令行安裝包，讓它幫咱們下載，名稱版本自動寫入pubspec.yaml。若是沒有指定版本就是默認下載最新版本，由於不少時候咱們並不想知道版本號，給我個能用的最新的版本號就ok了。

佈局和樣式

就和不少人想的同樣，爲何不使用 jsx 或者 xml 格式進行佈局，由於基於代碼的方式看起來太不直觀了，之因此這樣據說主要是能更方便的和Dart的hot reload特性配合使用，代碼改動能馬上反映佈局變化。但我仍是期待有適配轉化 DSL 的框架出現。

Flutter一切都是widget，可是連不少屬性都當成widget 這就讓人有些看不明白了，好比 Center，Align，Padding，爲何不把經常使用的樣式屬性都加入到佈局組件裏面呢？這致使出現了這麼一種狀況：嵌套嚴重，一個很簡單的功能須要層層嵌套才能實現，並且樣式也不能方便的複用。目前比較合理的建議就是適當抽取出子組件減小嵌套。

Json

Dart 做爲強類型的語言，一切皆是對象。Dart要方便操做json就得把json轉化爲對象，這就意味着每用到一個json，就須要定義一個對應的類，這也是強類型語言的通病了。這絕對讓人很懷念 js/ts 這種對json操做很是天然順暢的弱類型/函數式語言。固然也不是沒有妥協的解決方案，比較方便的就是 json_model，Flutter實戰做者寫的一個工具庫，步驟也簡單：

1. 在工程根目錄下建立一個名爲 "jsons" 的目錄;
2. 建立或拷貝Json文件到"jsons" 目錄中 ;
3. 運行 pub run json_model (Dart VM工程)or flutter packages pub run json_model(Flutter中) 命令生成Dart model類，生成的文件默認在"lib/models"目錄下

狀態管理

Flutter 使用initState，setState方法設置widget狀態，原理相似React。固然這只是widget內部控制狀態用的，跨組件通訊仍是須要其餘方案的。官方推薦是使用Provider，使用下來中規中矩吧，固然還可使用大名鼎鼎的 Redux 以及 mbox。不過Redux自己就以過多的樣板代碼而出名，寫React的時候就不喜歡用，hooks 出來後就果斷就放棄Redux了。hooks纔是真香啊，Flutter何時才支持相似的函數式狀態管理方案呢？

總結

說了這麼多，本質就是爲何 Flutter 不向以 React 爲表明的 web 生態看齊？更大的緣由是Flutter的不少理念和開發模式其實遠遠落後於 React 。這也是爲何習慣 react/vue 的 web前端 對於Flutter 感受很彆扭不順手的緣由了。