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

摘要： 全專案首頁概覽 Mar-10-2019 14-12-55.gif Mar-...

前言

終於，終於寫完了。這個專案是我從年前開始寫的，然後今年過年沒有回家，除了大年三十沒有提交程式碼，有空餘時間就一直在寫，過完年大年初一就開始寫了~~。功夫不負有心人，終於，現在來看是一個成熟度較為滿意的作品，才敢拿出來跟大家一起分享。

緣起

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

首先說一下，為啥仿豆瓣。因為，總體來看（個人感觸，勿噴），豆瓣APP中的UI涉及到的動畫、排版，互動等等都是十分優秀的，最重要的是涉及到各種各樣的UI，對於學習flutter是一個很好的平臺。（還有一點：豆瓣有一些公開的api，這個最重要）其實對於一個Widget的功能點，我們都可以娓娓道來，但是將眾多Widget糅合到一起還是有一定的挑戰的。挑戰意味著機會，意味著能力。

專案能學到什麼

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

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

• 整個專案涉及到Flutter 90%的基礎Widget ，以及各種情景的搭配組合。

某些flutter沒有的Widget，這就需要我自己去找了，但是網上沒有合適的輪子。我就直接改原始碼了。例如：

• 魔改原始碼實現首頁頭部特效

  

  header.gif

網上沒有類似的，不過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做設計稿，提交程式碼

• 這個分支供廣大Flutter開發者來學習Flutter
• 此分支囊括了Flutter 90%的元件的基本與組合使用 ，是初學者真正實踐的不錯選擇
• 在此豆芽APP的首頁實現與影片詳情的UI特效，基於魔改Flutter原始碼。有興趣可以看看
• 大家想實戰自己的Flutter能力，可以將某瓣APP作為設計稿，完成需求，並提交
• 每位開發者提交的程式碼，我都會在文件中進行備註

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

歡迎Flutter愛好者共同完成

涉及到UI，可參考豆瓣。

萌新TASK

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

進階TASK

• 優化程式碼
• 適當快取資料
• 解決卡頓(可參考：https://flutter-io.cn/docs/testing/ui-prformance )
• 優化路由（可參考鹹魚方案：https://www.yuque.com/xytech/flutter/vf1dpf ）

老手TASK

• 接入rxdart
• 使用Fish Redux 重構

時至今日，看到一個完整的Flutter專案在自己手中一點點打造出來，滿滿的成就感。當然，更多的是要分享與大家。來，大家一起學習Flutter，共同進步，提升自己的能力。謝謝大家~

豆芽apk體驗下載（30MB）

原始碼地址