Flutter豆瓣客戶端(仿)，誠心開源

原做者：徐愛卿

終於，終於寫完了。這個項目是我從年前開始寫的，而後今年過年沒有回家，除了大年三十沒有提交代碼，有空餘時間就一直在寫，過完年大年初一就開始寫了~~。

功夫不負有心人，終於，如今來看是一個成熟度較爲滿意的做品，纔敢拿出來跟你們一塊兒分享。

效果圖湊合看吧...gif控制大小太難了...原文效果圖更多，更真實，文末有apk下載。

緣起

忘記關注哪一個公衆號了，真正接觸flutter是18年，算起來是比較晚的了。不過勤能補拙，如今也來的及，只要想學就不晚。若是學習一個知識點，就寫個demo就覺得掌握了，大錯特錯。咱們更多的是從實際出發利用知識點，完成實際任務。將衆多Widget靈活使用，不斷的碰壁，解決bug，最終就可以真正的理解這個Widget以及相關知識點。因此，我沒有寫個demo就完事了。我直接拿一個APP，盤它就行了。

首先說一下，爲啥仿豆瓣。

由於，整體來看（我的感觸，勿噴），豆瓣APP中的UI涉及到的動畫、排版，交互等等都是十分優秀的，最重要的是涉及到各類各樣的UI，對於學習flutter是一個很好的平臺。（還有一點：豆瓣有一些公開的api，這個最重要）其實對於一個Widget的功能點，咱們均可以娓娓道來，可是將衆多Widget糅合到一塊兒仍是有必定的挑戰的。挑戰意味着機會，意味着能力。

豆瓣API說明：

https://www.jianshu.com/p/a7e...

項目能學到什麼

定了一個小目標：看到的UI,100%還原。我就以這個爲基本線，最終達到了差很少90%的還原吧。

仿了豆瓣APP的90%的頁面，UI的樣式、頁面搭配等等，爭取到了90%還原。

整個項目涉及到Flutter 90%的基礎Widget，以及各類情景的搭配組合。

某些flutter沒有的Widget，這就須要我本身去找了，可是網上沒有合適的輪子。我就直接改源碼了。例如：

魔改源碼實現首頁頭部特效

網上沒有相似的，不過flutter原生有相似的。因此就翻源碼改。最終實現了同樣的效果。這番改動，使得我對flutter的AppBar以及flutter的動畫有了更深的認識。

打造100%抽屜

flutter中是沒有相似的Widget。因此，我只能本身幹。爲了實現100%還原這個頁面，耗費了我好幾個晚上的時間，最終成功了。通過這個洗禮，加深了我對Animation,ScrollNotificationListener,GestureRecognizer等的理解。

影視詳情動態背景色

在豆瓣APP中，最吸引我之一的就是豆瓣APP的影視詳情的背景色是動態的。每一個背景色均是不一樣的。固然，我這裏也實現了。

詳情的顏色根據海報的主題變更。

關於這些，我就是舉個簡單的例子。有些東西，要強迫本身一下。或許收穫到更多驚喜。這兩個比較難的組件，我在源碼中關於思路以及方法都有註釋，你們能夠去看下。

目的

我寫這個項目的初衷，就是跟你們分享知識的。因此，今天我會將GitHub上的項目設置爲公開。是時候展現真正的技術了哈~

這個項目中，90%的flutter基礎Widget都有使用到，各類百搭情景都有涉及。基本上每一個文件都有相關注釋。部分方法也有想對應的註釋。畢竟是爲了分享麼。目前的最新分支是master-new，你們能夠pull下來後直接在master-new上編譯。

開源

最重要的是，你們能夠提交代碼~~，目前新建了一個dev-open分支。因爲本豆芽APP還沒徹底寫完，想鍛鍊本身的能夠向這個分支提交代碼。

你們能夠向這個分支根據豆瓣UI作設計稿，提交代碼

1. 這個分支供廣大Flutter開發者來學習Flutter
2. 此分支囊括了Flutter 90%的組件的基本與組合使用，是初學者真正實踐的不錯選擇
3. 在此豆芽APP的首頁實現與影片詳情的UI特效，基於魔改Flutter源碼。有興趣能夠看看
4. 你們想實戰本身的Flutter能力，能夠將某瓣APP做爲設計稿，完成需求，並提交
5. 每位開發者提交的代碼，我都會在文檔中進行備註

將來版本計劃(歡迎Flutter愛好者前來認領)

歡迎Flutter愛好者共同完成，涉及到UI，可參考豆瓣。

萌新TASK

• 完成任意一個未實現的按鈕
• 完成任意一個未實現的頁面
• 優化原有Widget
• 愛好者想實現可是未能實現的需求
• More …

進階TASK

• 優化代碼
• 適當緩存數據
• 解決卡頓(可參考：https://flutter-io.cn/docs/te...)
• 優化路由（可參考鹹魚方案：https://www.yuque.com/xytech/...）

老手TASK

• 接入rxdart

  https://github.com/ReactiveX/...

• 使用Fish Redux 重構

  https://www.yuque.com/xytech/...

時至今日，看到一個完整的Flutter項目在本身手中一點點打造出來，滿滿的成就感。固然，更多的是要分享與你們。來，你們一塊兒學習Flutter，共同進步，提高本身的能力。謝謝你們~

apk體驗地址（30M）

https://img.xuvip.top/douya.apk

備用地址：

https://pan.baidu.com/s/1jtWg... 

提取碼: iw64 

源碼地址

https://github.com/kaina404/F...

免費獲取更多安卓開發架構的資料（包括Fultter、高級UI、性能優化、架構師課程、 NDK、Kotlin、混合式開發（ReactNative+Weex）和一線互聯網公司關於android面試的題目彙總能夠加入【騰訊@安卓中高級進階】