實戰:使用 Flutter 仿開眼視訊App

wuht發表於2018-07-18

簡介

Eyepetizer 一直是我個人比較喜歡的app,之前有用原生模仿過開眼的一些效果,文章在這裡,本次實踐使用跨平臺框架 Flutter 開發,對開眼 v4.2.2進行模仿。

用到的開源庫

  • dio: ^0.0.10 --網路請求 地址
  • scoped_model: "^0.2.0" --狀態管理 地址

Apk下載

下載地址

預覽圖片

首頁 關注
實戰:使用 Flutter 仿開眼視訊App
實戰:使用 Flutter 仿開眼視訊App
詳情頁 通知
實戰:使用 Flutter 仿開眼視訊App
實戰:使用 Flutter 仿開眼視訊App
我的 搜尋
實戰:使用 Flutter 仿開眼視訊App
實戰:使用 Flutter 仿開眼視訊App
上拉載入更多 Tabbar處理
實戰:使用 Flutter 仿開眼視訊App
實戰:使用 Flutter 仿開眼視訊App
關注吸頂效果 最後
實戰:使用 Flutter 仿開眼視訊App
實戰:使用 Flutter 仿開眼視訊App

專案的地址

專案地址:https://github.com/wtus/flutter_kaiyan

心得體會

  • 巢狀太深了,前期一定要注意組織整理一下,其實本Demo做的也不太好,但有點懶的改了,下一個Demo 好好控制一下吧[笑哭]。

  • Hot Reload 可以很大程度上提高開發效率,但有時會失效。

  • 效能沒有刻意的和原生對比過,但是 release 之後執行速度的確是飛起。

  • 我用過 Weex ,做過H5混合開發,瞭解過RN,我覺得 Flutter 是十分優秀的。

  • 專案中早期有部分命名不規範的問題,危險動作,請勿學習。

一些說明

  • 視訊播放功能沒有做,試了幾個方案效果都是不是很理想,之後再說
  • api 來自網路 ,【開眼】是一款每日精選視訊應用的app,非官方版本,僅作學習交流之用,資料來源於開眼視訊視訊,資料介面均屬於非正常渠道獲取,請勿用於商業用途,原作公司擁有所有權利。

後語

之後會有一些教程講解,歡迎關注。

關於我

  • Email: hi54wht@163.com
  • 部落格: https://wuht.coding.me/
  • 掘金: https://juejin.im/user/5a3127da5188251c11409f0a
  • 簡書: https://www.jianshu.com/u/762002465748

相關文章