使用Flutter開發Github客戶端及學習歷程的小結

本文已受權「玉剛說」微信公衆號獨家原創發佈前端

本文筆者將嘗試分享我的針對Flutter的學習並 搭建一個Flutter應用 的過程。android

在這一個月學習Flutter的過程當中，我不可避免的走了不少彎路，也許這並不是壞事，可是仍是但願將這些經歷表述出來，有兩個目的：git

1.爲本身作一個週期性的總結；
2.也但願能給想學習Flutter的讀者必定實質性的參考。

關於筆者總結的Flutter入門學習計劃，可直接跳轉文末的 Flutter入門學習計劃 小節進行查看。github

契機

上個月25號，任玉剛老師聯繫我，問我有沒有興趣翻譯一篇Flutter的技術博客。編程

當時我尚未接觸Flutter，以爲這是一個督促本身學習的機會，就嘗試接下了這個任務。截止今天爲止（6月25日）恰好一個月，在第一週保證翻譯任務完成以後，三週以後的今天，我基本實現了本身的另一個目標——搭建一個 Github客戶端。微信

這個項目運行以後，App總體效果是這樣的：markdown

我將代碼託管在了本身的Github上：架構

FlutterGitHubApp: Flutter開發的跨平臺Github客戶端.app

由於這是一個入門的項目，因此接下來也會從各方面深刻學習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天內翻譯完這篇博客：

Widget-Async-Bloc-Service: A Practical Architecture for Flutter Apps

坦白來講，第二週的開始，這篇文章我看不懂，所以我須要學習Flutter開發過程當中的架構思想。

正所謂窺一斑而知全豹，雖然尚未真正着手Flutter項目的開發，可是經過學習Flutter的核心——狀態管理，以及將 業務邏輯 和 UI的渲染 分開學習，再加上做爲一個Android開發者，理解這些概念自己就有很大的優點，學習效率天然很是的高。

學習Flutter中狀態管理的資料，我強烈推薦 Vadaski 的系列文章。

冒昧推薦這幾篇關於狀態管理的文章，實際上 Vadaski 老師關於Flutter還有不少優秀的博客，這裏不一一列舉了，有興趣的朋友能夠去拜讀一下。

若是讀者以前學習或者瞭解過Redux和ReactiveX相關的思想，狀態管理並非很是難理解的概念。

熟悉了一系列Flutter狀態管理的實現方式以後，翻譯文章時就順暢不少了，幸不辱命，最終在第十天的凌晨將文章翻譯完畢：

Flutter 移動端架構實踐：Widget-Async-Bloc-Service

完成以後，由於工做和私人的緣由，第二週接下來幾天就沒有什麼時間學習Flutter了。

第二週小結

第二週的學習成果實際上和第一週差很少，由於前三天全神貫注，同時天天晚上多學了一會，再加上吃了以前的老本（以前對於Redux的狀態管理和RxJava有必定的儲備），學習效率仍是比較高的。

這周的感受就是，雖然本身沒怎麼上手項目，可是看了一些文章，對Flutter有了一些初步的認識，總結以下：

1.由於Flutter自己採用的是React的思路，和咱們認知的 過程式開發 是不同的， 狀態管理 和 響應式編程 是很是重要的概念，若是以前有相關的知識儲備，這個關鍵的知識點基本不會有什麼難度，只須要關注API的使用就行了；固然，沒了解過也不要緊，本小節上方的幾篇關於狀態管理優秀的博客，也可以幫助開發者很是快的進入Flutter的節奏中去。
2.類比是一個很是好的學習方式，對於Flutter中的一些概念或者庫而言：

2.1 RxDart和Stream相關的API和RxJava很類似；
2.2 Future相關的API能夠參考Kotlin的協程，經過同步的方式編寫異步的代碼；
2.3 Provider其實也就是另外一種方式的依賴注入.
2.4 Redux就是參考前端的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客戶端敲了出來：

github.com/qingmei2/Fl…

階段性總結

在一個月的學習過程當中，我學習到了不少東西，也感受不少地方須要慢慢改進，也感受到有不少知識點須要去補。

可是令我振奮的一點是，我成功從溫馨區跳了出來，而且度過了學習新知識過程當中最痛苦的一段時間（畏難情緒+新領域的陌生感）；

如今面對諸如 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開源項目學習源碼；
1. 選擇一個感興趣的項目或者方向進行實戰練習。

這個學習計劃 必定是有改進空間 的，也誠摯的但願您能在評論區留下寶貴的想法和建議，這也可以爲讀者提供更多參考性的建議，感謝！

關於我

Hello，我是卻把清梅嗅，若是您以爲文章對您有價值，歡迎 ❤️，也歡迎關注個人博客或者Github。

若是您以爲文章還差了那麼點東西，也請經過關注督促我寫出更好的文章——萬一哪天我進步了呢？