使用Flutter重构斗鱼APP

矫情吗；* 2022-12-27 04:52 97阅读 0赞

flutter重构的斗鱼直播APP  
首页、娱乐为Material组件；直播间、鱼吧为纯自定义编写。  
另外整合各类优质的第三方开源库，打造出原生APP丝滑的用户体验  
尽可能接入更多功能，方法附带注释，帮助你在使用flutter进行开发新的应用提供实用的借鉴案例

包含功能：

*  启动页广告位
 *  开播列表上拉加载、下拉刷新、返回顶部
 *  列表图片缓存加载优化
 *  渐进式头部动画
 *  底部导航切换保存页面状态
 *  HTTP缓存、IO缓存
 *  直播间webSocket消息弹幕、礼物
 *  页面路由传值
 *  RxDart全局消息通信封装
 *  Bloc流式状态管理(启动页预加载首页数据)
 *  礼物横幅动画队列
 *  礼物全屏svga特效
 *  弹幕消息滚动
 *  静态视频流
 *  九宫格抽奖游戏
 *  照片选择器
 *  全屏、半屏webView
 *  鱼吧头部手势动画
 *  仿微信朋友圈图片控件
 *  登录注册弹窗
 *  国家区号列表(仿微信通讯录滑动首字母定位)
 *  二维码扫码
 *  本地通知推送
 *  ...
 *  持续增加中

APP截图：

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://camo.githubusercontent.com/ac0b66f64003348dc7c2bd68bff51e948e7165c1f4cb0327c22e4607c0ba6867/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f62715166567a35797272475953584d764b722e6371614267796f4c4d5537527146514d6a463145357242534e36392e2e4e5a68694f38392e797267586b53366d545577642a6362335a535449496977352e69595271424a5a4e646d4572566e6738337a6746795a77336641212f6226626f3d6741496b426141466b41734243624d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/840c16404b67fa2ada7ada7d8ca2e438.webp?x-oss-process=image/format,png"></a></td> 
   <td><a href="https://camo.githubusercontent.com/8577c45a1720d98f971c8c2d585f3189c22226d62df34e409827c437f3ea7832/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d517245412e7633434c65626d5a3562384c5248684f386e6e734f4c5957654c416b6c5761456b626e755045564763734f785766747374544249386d4e7946476c4966782a6c675a6f4e6b2a6b5442736f565a4830783443556b212f6226626f3d6741496b426141466b41734247614d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/038b0d1333dd5125de5068f3800ad23a.webp?x-oss-process=image/format,png"></a></td> 
   <td><a href="https://camo.githubusercontent.com/5adca84c094e58fbff27e2926924088057ae134435d4a96bce6a1abb9c8d0fb3/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d5172454356415273793066436259416a312a76556a712a6f535a6a503345577564796a494934664a4c6948732a356c74414a57745361626e527443484a48515836596b76702e7a7163426c355848614f397761676657333855212f6226626f3d6741496b426141466b41734247614d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/fb7d316799abc03169ab6a9e1068dc3a.webp?x-oss-process=image/format,png"></a></td> 
  </tr> 
  <tr> 
   <td><a href="https://camo.githubusercontent.com/2fa888afa7521809ae46a610f353482f52c2e7dd6731200b8aeec868f69f7d02/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d5172454b6949644c3346346e50655745587a31707a6430434452534f623864637a3739496b4957534a6e496f4d44514579317041784a386535646b6670513656416f646c57487453336554346270654d7739636e3667393830212f6226626f3d6741496b426141466b41734247614d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/fa4fba14245f8c6d38bf928008132080.webp?x-oss-process=image/format,png"></a></td> 
   <td><a href="https://camo.githubusercontent.com/cb968dd45416dcb4f549650a8d45b98d632e6f251f636d799241deb4ecb91109/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d517245483649706e586c643646475151486479767630644c414f675a4e372e396a7a4d704d5748656a6f47544557624d6b596252726b614e5643585054546e73692a342e6c4f50714b455a6164787779316e6a53432e624b6b212f6226626f3d6741496b426141466b4173424b5a4d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/2e05dd06fc5816b5d16591f569557f56.webp?x-oss-process=image/format,png"></a></td> 
   <td><a href="https://camo.githubusercontent.com/63982cbc04d55961b84e667d1e6498a1338ec6fff0f50c8f789bdc787fe2e2dc/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d517245442a7265484c6d6c44527a54343365366b69777a4d4e684f4d476a477a736c526c2e545953334d6b666e444b747a6f78624e6b6b6a75384977394e326f7735684d574e73544a4354785161655245416c4e7448774649212f6226626f3d6741496b426141466b41734247614d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/f16dc6bfffbb5077809434b8eaafde5d.webp?x-oss-process=image/format,png"></a></td> 
  </tr> 
  <tr> 
   <td><a href="https://camo.githubusercontent.com/e43161f7c8ccb57574fcb9570c4be41ab8f29e98a0178ebf8920cd0b07e6c0a6/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d517245422a6f43306a597234354e34584e6864724d3179414b39394d63727339326162484c387a4d574761725a33786b37632a63726444326545573173734d44515a4573483136686f736630726e70375044527049355a6e4d212f6226626f3d6741496b426141466b4173424b5a4d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/93ae6ae3345bb6f7e9b6fec9acc6c1df.webp?x-oss-process=image/format,png"></a></td> 
   <td><a href="https://camo.githubusercontent.com/775629ee610d73f3929e9052a83748f22c82598cfd15c4d871541807113d84d6/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d517245457059504a736f6b64687853385a4a50647079643468376a307577554569794458486852534b42316145396b30686636586d6c713539672e4d704d5a66756f6a736e3155546557442e385077657262467a5470625063212f6226626f3d6741496b426141466b4173424b5a4d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/0f851bca30bf86113737c816033f700b.png"></a></td> 
   <td><a href="https://camo.githubusercontent.com/8499f6dbcaa53d62728d3f4f172aa7ca7c9f759771bd21ff3ecad13d36ac5fb4/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d5172454f6838585a736939626d53743535513134624a426c625979417a4b663552624762655547576d464178466856647136374b6e636536323345515774556e34324f613971584933594d54455a635774757651734b346634212f6226626f3d6741496b426141466b41734247614d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/a8fe8a3484796d43e9706c726df4377a.webp?x-oss-process=image/format,png"></a></td> 
  </tr> 
  <tr> 
   <td><a href="https://camo.githubusercontent.com/3a1d9faae1a75cd93077bc83f53149b4e44cb4f4d0d2a2285f1bb0890a7f283d/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d517245445a6979534c424f6768756c4d4c61314a31536c41347954413336756130734a554b7964617959646f515a754431316b735266593571516d5a3662747734552a726e597832506a5a68393647576e2e386b6d416b4a6b212f6226626f3d6741496b426141466b41734247614d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/51821581c78ada0fc1c1a8539a645163.webp?x-oss-process=image/format,png"></a></td> 
   <td><a href="https://camo.githubusercontent.com/c98f076c0bb07ccf1a4f245bfaf41517b489bb1b5d2e2585d6c495ce6c2fb3e5/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f546d455567746a39454b362e375638616a6d5172454358375568516f4d4e626e2e7a616131515463746e7364524d45617a394148564d6e516b68564a4149584b314f736a573953436356795a4d356a6f354d462a72727253347777644d33772a5537774f38777466633355212f6226626f3d6741496b426141466b4173424b5a4d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/214f59b74a3a337ef21ae42348376b14.webp?x-oss-process=image/format,png"></a></td> 
   <td><a href="https://camo.githubusercontent.com/3131f1403a36fac887b6bf9b103097362229c9091c8ea5ad1de7502fb2bbece1/687474703a2f2f6d2e717069632e636e2f7073633f2f56313464414c794b34507248756a2f62715166567a35797272475953584d764b722e6371524775727457572e64774a6b42556c556169386e344d345273434f556a67485242363144523834373372764f7a3435436764326c446f74613962424e667231452a5669594b59366d447a3773734a47366242694f7155212f6226626f3d6741496b426141466b41734243624d212672663d7669657765725f3426743d35" rel="nofollow"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/0e44d6e40b6807ae74c963851fa14070.webp?x-oss-process=image/format,png"></a></td> 
  </tr> 
 </tbody> 
</table>

本地调试：

`flutter run --release`打包发布版本预览  
APP所有数据均来源Mock网络请求，服务端接口没有上云，可修改`lib/base.dart`中`DYBase.baseHost`为你的电脑IP，并确保手机与电脑在同一局域网且能访问内网`1236`端口  
然后clone[服务端仓库][Link 1]，本地启动服务器  
Mock服务为`python tornado`，两种简单启动方式可选(1.在py3.6+环境下pip依赖，2.使用Docker镜像)，具体参考其README

入门推荐：

[Dart语法][Dart] - 语法中文教程  
[Flutter中文网][Flutter] - 简单易懂的入门教程  
[Flutter实战][Flutter 1] - 较为全面的进阶教程  
[Dart SDK（EN）][Dart SDK_EN] - flutter中可用的SDK  
[Flutter官网（EN）][Flutter_EN] - 可查阅全部的API与SDK相关  
[Bloc（EN）][Bloc_EN] - 全局状态管理

[Link 1]: https://github.com/yukilzw/factory
[Dart]: https://www.dartcn.com/guides/get-started
[Flutter]: https://flutterchina.club/get-started/install/
[Flutter 1]: https://book.flutterchina.club/
[Dart SDK_EN]: https://api.dartlang.org/stable/2.4.0/index.html
[Flutter_EN]: https://flutter.dev/docs
[Bloc_EN]: https://felangel.github.io/bloc/#/gettingstarted

发表评论取消回复

表情：

评论列表（有 0 条评论，97人围观）

还没有评论，来说两句吧...

相关阅读

相关 23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮：

/ 一、Flutter FloatingActionButton介绍 FloatingActionButton简称FAB,可以实现浮动按钮，也可以实现类

冷不防/ 2023年08月17日 15:59/ 0 赞/ 60 阅读

相关 Flutter 实现虎牙/斗鱼弹幕效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdr

超、凢脫俗/ 2023年07月25日 09:07/ 0 赞/ 54 阅读

相关使用Flutter重构斗鱼APP

flutter重构的斗鱼直播APP 首页、娱乐为Material组件；直播间、鱼吧为纯自定义编写。另外整合各类优质的第三方开源库，打造出原生APP丝滑的用户体验

矫情吗；*/ 2022年12月27日 04:52/ 0 赞/ 98 阅读

相关再见，斗鱼！再见，虎牙！

点击上方“五分钟学算法”，选择“星标”公众号重磅干货，第一时间送达![format_png][] ![format_png 1][] 作者 l 孤桐来源 l Hol

本是古典何须时尚/ 2022年12月19日 01:23/ 0 赞/ 133 阅读

相关最新斗鱼JS逆向分析

> 目标网址：[https://www.douyu.com/][https_www.douyu.com] > > 重要说明：文章教程仅供参考学习，请勿用于非法用途，否则后果

左手的ㄟ右手/ 2022年09月13日 15:22/ 0 赞/ 141 阅读

相关通过websocket抓取斗鱼弹幕和礼物消息

1.斗鱼弹幕协议到斗鱼官方开放平台看斗鱼通讯协议，网址“[斗鱼开放平台][Link 1]”，登录后可查看 ![d49b87191062cf54028e43ce7

小鱼儿/ 2022年09月12日 01:55/ 0 赞/ 296 阅读

相关 scrapy抓斗鱼主播的图片

1.该项目通过此网站获取信息 http://capi.douyucdn.cn/api/v1/getVerticalRoom?limit=20&offset=0 打开

矫情吗；*/ 2022年05月18日 11:05/ 0 赞/ 154 阅读

相关案例_使用Selenium与PhantomJS爬取斗鱼房间信息

1.爬取之前的准备 -------------------- > 在爬取之前,现有安装好2个东西:Selenium和PhantomJS,安装方法见我之前的博客

墨蓝/ 2022年05月13日 05:22/ 0 赞/ 142 阅读

相关【Python3爬虫】斗鱼弹幕爬虫

在网上找到了一份[斗鱼弹幕服务器第三方接入协议v1.6.2][v1.6.2]，有了第三方接口，做起来就容易多了。一、协议分析斗鱼后台协议头设计如下： ![145

「爱情、让人受尽委屈。」/ 2022年03月28日 04:40/ 0 赞/ 297 阅读

相关斗鱼TV API

首先是不需要登录的API 获取当前全部直播请求地址: http://capi.douyucdn.cn/api/v1/live?limit=20&offs

亦凉/ 2022年02月02日 02:41/ 0 赞/ 294 阅读