123资源网

Flutter 仿网易云音乐App(基础版)

广告也精彩

image

image

image

歌曲播放和卡片切换

如正版一样,歌曲播放进度在播放/暂停 按钮的边框显示(页面下方,由黑变红)

Flutter 仿网易云音乐App(基础版)

没登录的话,一般只能听12秒 目前只做了 模块(‘超带感的说唱精选’)的点播功能, 其他地方可以直接套用(1、2行代码即可),控制台已经写好 

image

卡片(音乐日历)切换动画也是仿照正版来

image

个人中心和抽屉(未登录)

image

云村

image

视频(未登录)

视频模块需要登录才能看到

波纹动画依然是仿照正版的 

image

登录

image

image

视频(已登录)

image

image

登录前后页面变化

我们看一下,我的、抽屉页面的前后差异

image

再退出一下

‘切换账号’有退出的功能 

image

Flutter 仿网易云音乐App(基础版)

搜索页面

image

image

image

所用接口

接口为大佬们开源的网易云API,在此感谢

开源网易云api

我花了90多买了个云服务把接口clone下来后,开发使用。

各位clone我项目时,可以用我的接口也可以自己搭一个 一年90多的云服务器,你们用时轻点儿... 

Tip:
接口返回的数据不太稳定,有的时候还会变形,对于移动端开发来说,造成了一些麻烦,各位开发时要注意。

另外,如果你运行这个demo发现出错了,那大概率时接口废了或者数据变形了,看日志吧 

开发框架 Bedrock

此项目基于Bedrock 快速开发框架开发

MVVM + Provider 设计模式 

Bedrock 快速开发框架

初衷

开发这个demo并不是为了对flutter进行练习,而是因为前些日子对flutter路由模块的封装,并应用于Bedrock框架。

在重构了原项目的demo以及添加了针对性演示demo后,觉得有必要再在一个复杂一些的项目里测试一下,因此便有了这个:

仿网易云音乐(基础版) 

也算是给我的框架增加了一个绘声绘色的大Demo吧 :)。

与此同时,既然是Demo,在项目开发时尽量做到点到为止,避免开发者阅读过多的冗余的页面代码,而无法了解框架的工作原理。

由于没有设计图,页面全凭感觉来,加之接口的不稳定(类型/结果),开发起来确实费劲... 所以叫基础版 

路由封装的简介

此次路由封装,不但减少了开发时的代码书写,并且对外暴露出state,可以做到任何粒度的刷新。

Flutter 仿网易云音乐App(基础版)

但这并不意味着可以抛弃provider 

在兼容静态路由的优势同时,对于静态路由的 map 传值,取而代之的是构造函数传值,这样避免了key的输错。

更多介绍可以看下面的文章:

关于这次flutter路由封装的架构介绍

Demo功能概览

大家可以clone下项目后,挑拣未实现的功能来实现以熟悉框架 

登录(注册未实现,没有空号了)

我的页面:登录/非登录状态(不含子级页面)

发现页面: 点歌 (不含子级页面)

云村页面:广场&关注子页(不含其它子级页面)

视频页面:登录/非登录状态,各tab子页面,视频播放(不含其它子级页面)

我的抽屉:登录/非登录状态(不含子级页面)

搜索页面:支持搜索历史本地化、清理缓存,搜索及搜索建议,(不含搜索结果和其它子级页面)

底部音乐bar:后台音乐功能模块,支持单点播放,(未实现底部控制台点击后弹出的播放历史记录和歌单,这个可能后期要做,蛮有意思的)

项目地址

仿网易云音乐

感谢

再次感谢开源网易云音乐api的大佬们。

同时欢迎各位提issue,谢谢 :)

Demo代码可能有些随意和bug,还请见谅。 
广告也精彩

本文链接:https://www.123wz.cn/post/58489.html

版权声明:
温馨提示:
本站提供的一切软件、教程和内容信息都来自网络收集整理,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,版权争议与本站无关。用户必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

发表评论

您需要 登录账户 后才能发表评论

还没有评论,快来说点什么吧~

联系客服
网站客服业务合作Q交流群
635140321
公众号
公众号
公众号
返回顶部