Flutter 開發一個 GitHub 客戶端OpenGit及學習總結
前文
- 執行第一個Flutter App
- Flutter基礎Widgets-Text
- Flutter可滾動Widgets-ListView
- Flutter主題切換之flutter redux
- Flutter外掛開發之APK自動安裝
- Flutter 開發一個 GitHub 客戶端OpenGit及學習總結
本專案為個人Flutter的學習練習專案。
個人部落格
學習Flutter也有一陣子了。閒著沒事，用Github開放出來的API進行練手，編寫出來了一款Github客戶端。 當然自己也是邊查邊寫，也借鑑了許多Github上優秀的Flutter專案，例如UI上主要是參考gitme。現在開 源出來，供大家交流學習。希望多多Star、Fork支援，有問題可以Issue。
預覽
部分頁面效果如下：
|
|
|
|
|
|
|
|
|
|
|
|
1.0.0支援功能列表
1. 登入：支援github賬號登入和登出；
2. 主頁：登入後使用者可以檢視掘金flutter列表、自己github專案、動態、issue等資訊；
3. 搜尋：支援專案、使用者、issue的搜尋；
4. 專案：支援對專案進行star/unstar、watch/unwatch，可以檢視專案更新動態、分支原始碼、所屬語言趨勢等資訊；
5. 使用者：支援檢視使用者詳情；
6. issue：支援issue列表的檢視，以及編輯、評論issue；
7. 國際化：支援簡體中文與美國英語；
8. 個性化：支援多套主題的切換；
9. 功能介紹：支援每個版本迭代的詳情介紹；
10. 版本更新：支援app的升級；
複製程式碼學習歷程
初識Flutter
最初學習flutter的方式是通過學習Flutter中文網，在瞭解基本的flutter語法操作後，在通過學習wendux的《Flutter實踐》。由於dart好多語法和java比較類似，就沒進行系統的學習，遇到dart上的問題，都是上網查閱資料解決。
後續會對dart進行系統的學習。
學習一個月的感覺
學習flutter基本上都是空閒時間學習，最初每天花2-3個小時，學習flutter的最常用的基礎元件;當基礎元件掌握的差不多後，開始深入學flutter中的Widget，主要是參考flutter官方gallery demo, 並且跟著這個專案敲程式碼。 在敲了幾天之後，發現這個學習過程非常枯燥，並且經常性學了下個widget，就忘了上個widget，沒堅持多久，就考慮拿一個專案練手。學習這整個過程大概就花了一個月，總體感覺只要靜下心來學習還是很容易上手的。
OpenGit專案的誕生
OpenGit主要是一個Github客戶端。選擇以Github客戶端作為練手專案的主要原因有，第一因為最開始接觸的flutter開發的第一個app就是gitme，而這個專案也是一個Github客戶端，有現成的ui可以作為參考；第二可以參考戀貓de小郭開源了一個更強大的Github客戶端GSYGithubAppFlutte
實戰
UI
專案的UI部分前面提到過，主要是參考gitme，widget的實現主要是參考gallery demo。
資料來源
請求資料的相關API，主要是參GSYGithubAppFlutte和Github Developer。
這裡非常感覺下戀貓de小郭，GSYGithubAppFlutte 確實在我實踐過程中提供了很大的幫助，在查閱相關api封裝時，節省了不少的時間。
設計模式
OpenGit最初設計模式主要採用mvp模式，因為自身是android開發，採用mvp上手比較快。不過在開發過程中發現mvp模式不太合適。例如在實現下拉重新整理時，onRefresh方法必須要收到Future的返回型別，這種場景用mvp就不太合適。後面可能會程式重構，採用redux或者bloc。
架構
OpenGit主要是通過網路從github獲取資料，然後再渲染UI。我們可以在邏輯上對業務程式碼簡單分成兩層：底層資料IO+上層UI渲染。
資料層
關於資料請求的配置、邏輯等不要在UI層去控制，而由資料層自己完成。這裡主要對http層進行了下封裝，快取在1.0.0版本中還未實現，可能後續版本會加入。
UI渲染層
UI層我們主要使用的是material元件庫，對Scaffold 、 AppBar 進行了統一的封裝。
開源庫
為了儘可能最少的造輪子，主要使用了以下第三方開源庫
| 庫 | 功能 |
|---|---|
| dio | 網路框架 |
| shared_preferences | 本地資料快取 |
| connectivity | 網路連線 |
| json_annotation | json模版 |
| flutter_markdown | markdown解析 |
| cached_network_image | 圖片載入 |
| flutter_webview_plugin | 全屏的webview |
| photo_view | 圖片預覽 |
| flutter_spinkit | 載入框樣式 |
| flutter_redux | redux |
| fluro | 路由 |
| package_info | 版本資訊 |
| qr_flutter | 二維碼生成 |
| permission_handler | 許可權申請 |
Android版安裝包：
掃碼下載
IOS需要自行下載程式碼執行。（效果是一致的）
專案環境
1. Flutter version 1.6.3
2. Dart version 2.3.2 (build 2.3.2-dev.0.0 e3edfd36b2)
3. Android SDK version 28.0.3
4. Android Studio version 3.4
複製程式碼TODO
已知問題：
1. 切換語言時，程式碼中的中文暫未全部替換；
2. 路由還未全部替換；
3. markdown支援還不是很完善；
複製程式碼Thanks For
關於作者
預設條款
此專案僅供大家交流溝通使用，不得用於任何商業以及利益活動。