本文已授權「玉剛說」微信公眾號獨家原創釋出
本文筆者將嘗試分享個人針對Flutter的 學習 並 搭建一個Flutter應用 的過程。
在這一個月學習Flutter的過程中，我不可避免的走了很多彎路，也許這並非壞事，但是還是希望將這些經歷表述出來，有兩個目的：
- 1.為自己做一個週期性的總結；
- 2.也希望能給想學習
Flutter的讀者一定實質性的參考。
關於筆者總結的
Flutter入門學習計劃，可直接跳轉文末的 Flutter入門學習計劃 小節進行檢視。
契機
上個月25號，任玉剛老師聯絡我，問我有沒有興趣翻譯一篇Flutter的技術部落格。
當時我還沒有接觸Flutter，覺得這是一個督促自己學習的機會，就嘗試接下了這個任務。截止今天為止（6月25日）剛好一個月，在第一週保證翻譯任務 完成 之後，三週之後的今天，我基本實現了自己的另外一個目標——搭建一個 Github客戶端。
這個專案執行之後，App整體效果是這樣的：
我將程式碼託管在了自己的Github上：
FlutterGitHubApp: Flutter開發的跨平臺Github客戶端.
因為這是一個入門的專案，所以接下來也會從各方面深入學習Flutter，並反過來繼續完善和優化它。
第一週：初識Flutter
最初學習Flutter的方式是通過學習 wendux 老師的 《Flutter實戰》。
這是一本非常優秀的中文Flutter教程，對個人學習Flutter入門有非常大的幫助。
我根據這本小冊中的內容完成了第一個 計數器 的入門案例，並對最常用的一些控制元件進行了熟悉和了解：
正如讀者所見，我跟著《Flutter實戰》 寫了若干的demo程式碼，遺憾的是，效果並沒有想象的那麼好，原因也很明顯，那就是我還沒有完全熟悉Dart的語法。
磨刀不誤砍柴工
學習Flutter的最開始，語法並非是最大的阻礙因素，因為對於熟悉Java語法的我們來說，Dart有很多相似之處，但隨著Flutter學習的不斷深入，有時一些Dart獨有的語法特性會給我帶來困惑，比如 級聯操作符 、 var和dynamic關鍵字的區別 等等。
正如標題所言，我發現我走入了一個誤區，Dart語法的學習勢在必行。
我學習語法的方式是通過翻閱Dart中文網：
Dart中文社群：http://dart.goodev.org/
第一週的感受
因為是空閒時間學習，因此嚴格來說學習時間並沒有那麼多，最初的第一週，筆者花了幾個晚上，每天9點下班之後學2～3個小時，熟悉了Dart基本的語法和Flutter的最常用的基礎元件。
嚴格來說，此時個人依然處於小白水平，勉強摸到了入門的門檻。
私下裡也會偷偷吐槽一下Dart和Flutter，佈局寫著寫著下面連續十數行的 ）,）,）,）;）,）,},),},）;）,）,）,;）,},）; 真的令人不寒而慄......
第二週：狀態管理
因為當初接翻譯任務時，自己給自己設定了10天的期限（也是為了督促自己學習），因此第二週我需要在前3天內翻譯完這篇部落格：
坦白來說，第二週的開始，這篇文章我看不懂，因此我需要學習Flutter開發過程中的架構思想。
正所謂窺一斑而知全豹，雖然還沒有真正著手Flutter專案的開發，但是通過學習Flutter的核心——狀態管理，以及將 業務邏輯 和 UI的渲染 分開學習，再加上作為一個Android開發者，理解這些概念本身就有很大的優勢，學習效率自然非常的高。
學習Flutter中狀態管理的資料，我強烈推薦 Vadaski 的系列文章。
- Flutter | 狀態管理探索篇——Scoped Model（一）
- Flutter | 狀態管理探索篇——Redux（二）
- Flutter | 狀態管理探索篇——BLoC(三)
- Flutter | 狀態管理擴充篇——RxDart(四)
- Flutter | 狀態管理指南篇——Provider
冒昧推薦這幾篇關於狀態管理的文章，實際上 Vadaski 老師關於Flutter還有很多優秀的部落格，這裡不一一列舉了，有興趣的朋友可以去拜讀一下。
如果讀者之前學習或者瞭解過Redux和ReactiveX相關的思想，狀態管理並不是非常難理解的概念。
熟悉了一系列Flutter狀態管理的實現方式之後，翻譯文章時就順暢很多了，幸不辱命，最終在第十天的凌晨將文章翻譯完畢：
完成之後，因為工作和私人的原因，第二週接下來幾天就沒有什麼時間學習Flutter了。
第二週小結
第二週的學習成果實際上和第一週差不多，因為前三天全神貫注，同時每天晚上多學了一會，再加上吃了之前的老本（之前對於Redux的狀態管理和RxJava有一定的儲備），學習效率還是比較高的。
這周的感覺就是，雖然自己沒怎麼上手專案，但是看了一些文章，對Flutter有了一些初步的認識，總結如下：
- 1.因為
Flutter本身採用的是React的思路，和我們認知的 過程式開發 是不一樣的， 狀態管理 和 響應式程式設計 是非常重要的概念，如果之前有相關的知識儲備，這個關鍵的知識點基本不會有什麼難度，只需要關注API的使用就好了；當然，沒了解過也沒關係，本小節上方的幾篇關於狀態管理優秀的部落格，也能夠幫助開發者非常快的進入Flutter的節奏中去。 - 2.類比是一個非常好的學習方式，對於
Flutter中的一些概念或者庫而言：
2.1
RxDart和Stream相關的API和RxJava很相似；
2.2Future相關的API可以參考Kotlin的協程，通過同步的方式編寫非同步的程式碼；
2.3Provider其實也就是另一種方式的依賴注入.
2.4Redux就是參考前端的Redux引進的，沒有什麼變化......
第三週：學習Widget
從結果來看，第三週我走了不少彎路。
第三週的最初，我認為我需要開始深入學習Flutter中的Widget，因此我選擇fork了著名的 flutter-go, 並且開始嘗試跟著這個專案敲程式碼。
在敲了幾天之後，我發現一個嚴重的問題，那就是這個學習過程中非常枯燥無聊，知識點之間沒有關聯性，感覺自己學了一個新的Widget，就忘了上一個Widget，沒堅持多久，我就hold不住了......
這也難怪，這個專案本身的目的就是 常用元件的demo演示與中文文件, 我一個Widget一個Widget的用法跟著敲，這給了我一種 學習碎片沒有組織起來 的感覺，說白了就是不成系統，效果並不明顯。
因此我將 flutter-go 這個專案的定位變成了 工具書 ，接下來的學習過程中，每當我對一個Widget的使用有了疑問，就隨手開啟這個APP進行查閱這個Widget的用法，效果還不錯。
第四周：在實戰中學習
第四周我選擇了實戰開發，瞭解我的朋友應該知道，我曾經通過不同的開發模式（MVVM和MVI）開發過兩次Github的客戶端，這次我也不例外。
選擇以Github客戶端作為實戰的練手專案還有一個原因，那就是 戀貓de小郭 老師已經開源了一個更強大的Github客戶端可以作為參考：
GSYGithubAppFlutter: 超完整的Flutter專案
同時，戀貓de小郭 老師也有非常優秀的Flutter系列部落格，因為該系列文章太多了，就不一一列出了，強烈建議收藏閱讀。
所謂前人栽樹後人乘涼，GSYGithubAppFlutter 確實在我實踐過程中提供了很大的幫助，同時，因為第四周工作階段性告一段落，我有更多時間去學習Flutter，因此很快就把一個簡單的Github客戶端敲了出來：
階段性總結
在一個月的學習過程中，我學習到了很多東西，也感覺很多地方需要慢慢改進，也感覺到有很多知識點需要去補。
但是令我振奮的一點是，我成功從舒適區跳了出來，並且度過了學習新知識過程中最痛苦的一段時間（畏難情緒+新領域的陌生感）；
現在面對諸如 Kotlin和Flutter我學哪個比較好? 的問題，我也可以這樣回答了：
小孩子才做選擇，成年人當然是全都要啦！
最後，衷心感謝文中提到的各位老師對個人的幫助，其實在學習過程中，我還參考了更多Flutter先驅者們優秀的部落格和程式碼，實在難以一一列舉，在此深表感謝。
Flutter入門學習計劃？
如何入門Flutter？ 以個人經驗來看，入門學習Flutter可以參考下面步驟：
- 1.通過《Flutter實戰》電子書完成一個簡單的計時器示例；
- 2.通過 Dart中文社群 學習語法；
- 3.繼續學習《Flutter實戰》，瞭解
Flutter基本概念； - 4.下載
flutter-go,將App下載到手機中作為工具書隨時隨地查閱； - 5.1.學習一些優秀的
Flutter部落格系列，比如上文中 Vadaski 和 戀貓de小郭 兩位老師的文章； - 5.2 同時，下載優秀的
Flutter開源專案學習原始碼； -
- 選擇一個感興趣的專案或者方向進行實戰練習。
這個學習計劃 一定是有改進空間 的，也誠摯的希望您能在評論區留下寶貴的想法和建議，這也能夠為讀者提供更多參考性的建議，感謝！
關於我
Hello，我是卻把清梅嗅，如果您覺得文章對您有價值，歡迎 ❤️，也歡迎關注我的部落格或者Github。
如果您覺得文章還差了那麼點東西，也請通過關注督促我寫出更好的文章——萬一哪天我進步了呢？