使用Flutter重構鬥魚APP
- 2020 年 12 月 6 日
- 筆記
Github源碼地址://github.com/yukilzw/dy_flutter
鬥魚Flutter
flutter重構的鬥魚直播APP
首頁、娛樂為Material組件;直播間、魚吧為純自定義編寫。
另外整合各類優質的第三方開源庫,打造出原生APP絲滑的用戶體驗
儘可能接入更多功能,方法附帶注釋,幫助你在使用flutter進行開發新的應用提供實用的借鑒案例
包含功能:
- 啟動頁廣告位
- 開播列表上拉載入、下拉刷新、返回頂部
- 列表圖片快取載入優化
- 漸進式頭部動畫
- 底部導航切換保存頁面狀態
- HTTP快取、IO快取
- 直播間webSocket消息彈幕、禮物
- 頁面路由傳值
- RxDart全局消息通訊封裝
- Bloc流式狀態管理(啟動頁預載入首頁數據)
- 禮物橫幅動畫隊列
- 禮物全螢幕svga特效
- 彈幕消息滾動
- 靜態影片流
- 九宮格抽獎遊戲
- 照片選擇器
- 全螢幕、半屏webView
- 魚吧頭部手勢動畫
- 仿微信朋友圈圖片控制項
- 登錄註冊彈窗
- 國家區號列表(仿微信通訊錄滑動首字母定位)
- 二維碼掃碼
- 本地通知推送
- …
- 持續增加中
APP截圖:
本地調試:
flutter run --release
打包發布版本預覽
APP所有數據均來源Mock網路請求,服務端介面沒有上雲,可修改lib/base.dart
中DYBase.baseHost
為你的電腦IP,並確保手機與電腦在同一區域網且能訪問內網1236
埠
然後clone服務端倉庫,本地啟動伺服器
Mock服務為python tornado
,兩種簡單啟動方式可選(1.在py3.6+環境下pip依賴,2.使用Docker鏡像),具體參考其README
入門推薦:
Dart語法 – 語法中文教程
Flutter中文網 – 簡單易懂的入門教程
Flutter實戰 – 較為全面的進階教程
Dart SDK(EN) – flutter中可用的SDK
Flutter官網(EN) – 可查閱全部的API與SDK相關
Bloc(EN) – 全局狀態管理