使用Flutter重構鬥魚APP

  • 2020 年 12 月 6 日
  • 筆記

Github源碼地址://github.com/yukilzw/dy_flutter

鬥魚APP

flutter-1.22
android✔
ios✔

鬥魚Flutter

flutter重構的鬥魚直播APP
首頁、娛樂為Material組件;直播間、魚吧為純自定義編寫。
另外整合各類優質的第三方開源庫,打造出原生APP絲滑的用戶體驗
儘可能接入更多功能,方法附帶注釋,幫助你在使用flutter進行開發新的應用提供實用的借鑒案例

包含功能:

  • 啟動頁廣告位
  • 開播列表上拉載入、下拉刷新、返回頂部
  • 列表圖片快取載入優化
  • 漸進式頭部動畫
  • 底部導航切換保存頁面狀態
  • HTTP快取、IO快取
  • 直播間webSocket消息彈幕、禮物
  • 頁面路由傳值
  • RxDart全局消息通訊封裝
  • Bloc流式狀態管理(啟動頁預載入首頁數據)
  • 禮物橫幅動畫隊列
  • 禮物全螢幕svga特效
  • 彈幕消息滾動
  • 靜態影片流
  • 九宮格抽獎遊戲
  • 照片選擇器
  • 全螢幕、半屏webView
  • 魚吧頭部手勢動畫
  • 仿微信朋友圈圖片控制項
  • 登錄註冊彈窗
  • 國家區號列表(仿微信通訊錄滑動首字母定位)
  • 二維碼掃碼
  • 本地通知推送
  • 持續增加中

APP截圖:

本地調試:

flutter run --release打包發布版本預覽
APP所有數據均來源Mock網路請求,服務端介面沒有上雲,可修改lib/base.dartDYBase.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) – 全局狀態管理

dy_flutter為個人開源項目,僅用作學習實踐