Flutter開發一個GitHub客戶端OpenGit及學習總結

Flutter開發一個GitHub客戶端OpenGit及學習總結

本項目爲我的Flutter的學習練習項目。

學習Flutter也有一陣子了。閒着沒事，用Github開放出來的API進行練手，編寫出來了一款Github客戶端。 固然本身也是邊查邊寫，也借鑑了許多Github上優秀的Flutter項目，例如UI上主要是參考gitme。如今開源出來，供你們交流學習。但願多多Star、Fork支持，有問題能夠Issue。

項目地址-OpenGit客戶端

編譯代碼

因爲涉及到子工程，clone代碼以下所示

//clone
git clone --recursive https://github.com/Yuzopro/opengit_flutter.git 
git checkout -b master origin/master 
cd flutter_common_lib 
git checkout -b master origin/master
//運行
cd ../
flutter build apk
flutter install
複製代碼

預覽

部分頁面效果以下：

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的升級；
複製代碼

1.1.0版本

1. 修改項目架構，採用BloC和Redux混合開發；
2. 優化趨勢項目列表不能展現的問題；
3. 細節優化以及bug修復；
複製代碼

1.2.0版本

1. 增長閃屏廣告邏輯；
2. 增長新手引導頁面；
3. 優化趨勢列表，支持項目和用戶的展現；
4. 優化網絡層代碼，增長緩存；
5. 公共代碼提取，並以子工程的形式關聯；
6. 增長升級紅點提示；
7. 其餘細節優化;
複製代碼

學習歷程

初識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。在1.1.0版本已經修改成bloc+redux架構，詳情可查看MVC、MVP、BloC、Redux四種架構在Flutter上的嘗試。

數據層

關於數據請求的配置、邏輯等不要在UI層去控制，而由數據層本身完成。這裏主要對http層進行了下封裝，緩存已在1.2.0版本加入，能夠在設置->緩存更改緩存時間。

UI渲染層

UI層咱們主要使用的是material組件庫，對Scaffold 、 AppBar 進行了統一的封裝。

路由

路由框架採用的是fluro。

開源庫

爲了儘量最少的造輪子，主要使用瞭如下第三方開源庫

庫	功能
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	權限申請
rxdart	rxdart
pull_to_refresh	下拉列表
fluttertoast	toast提示
sqflite	數據庫
path_provider	文件管理

Android版安裝包：

點擊下載

掃碼下載

IOS須要自行下載代碼運行。（效果是一致的）

項目環境

1. Flutter version 1.8.2

2. Dart version 2.5.0 (build 2.5.0-dev.0.0 b5aeaa6796)

3. Android SDK version 28.0.3

4. Android Studio version 3.4
複製代碼

TODO

已知問題：

1. 切換語言時，代碼中的中文暫未所有替換；
2. 路由還未所有替換；
3. markdown支持還不是很完善；
複製代碼

Thanks For

• flutter-go

• GSYGithubAppFlutter

• Flutter中文網

• Flutter 實戰

• Github Developer

• Github-trending-api

關於做者

• 我的博客

• Github

• 掘金

• 簡書

• CSDN

默認條款

此項目僅供你們交流溝通使用，不得用於任何商業以及利益活動。