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

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

image

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

image

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

image

歌曲播放和卡片切换

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

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

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

image

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

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

image

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

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

image

云村

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

image

视频(未登录)

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

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

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

image

登录

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

image

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

image

视频(已登录)

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

image

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

image

登录前后页面变化

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

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

image

再退出一下

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

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

image

搜索页面

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

image

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

image

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

image

所用接口

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

开源网易云api

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

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

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

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

开发框架 Bedrock

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

MVVM + Provider 设计模式

Bedrock 快速开发框架

初衷

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

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

仿网易云音乐(基础版)

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

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

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

路由封装的简介

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

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

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

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

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

Demo功能概览

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

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

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

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

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

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

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

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

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

项目地址

仿网易云音乐

感谢

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

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

Demo代码可能有些随意和bug,还请见谅。

文章均来自互联网如有不妥请联系作者删除QQ:314111741 地址:http://www.mqs.net/post/14985.html

相关阅读

  • 淘宝怎么运营推广(中小卖家必学的操作思路)

    淘宝怎么运营推广(中小卖家必学的操作思路)

    淘宝在很长一段时间内,一直被认为是中国最大的电子商务平台。人们在这里购物,与在别处购物一样,会感觉到很便捷、很实惠。因此,随着电商行业的发展。如今,淘宝网站的活跃用户数已经超过了1亿人(目前该数据仅统计了部分用户)。而作为一个淘宝...

    2025.12.09 14:15:37作者:iseeyuTags:运营
  • 如何保证缓存和数据的双写一致性

    如何保证缓存和数据的双写一致性

    image 但是在更新缓存方面,对于更新完数据库,是更新缓存呢,还是删除缓存。又或者是先删除缓存,再更新数据库,其实大家存在很大的争议。目前没有一篇全面的博客,对这几种方案进行解析。于是博主战战兢兢,顶着被大家喷的风险,写了这篇...

    2025.12.09 09:28:14作者:iseeyu
  • 【百度搜索引擎优化】如何快速了解百度搜索引擎优化的知识?(搜索引擎优化基本)

    【百度搜索引擎优化】如何快速了解百度搜索引擎优化的知识?(搜索引擎优化基本)

    在百度输入SEO优化,下拉框就有很多关键词,SEO优化工具,SEO查询,SEO技巧,SEO优化方案,SEO报价,SEO优化教程,SEO优化软件,SEO优化怎么做,等等,相关搜索也有很多长尾关键词。还可以加入一些群,找些大牛问下,向这些大牛学...

    2025.12.09 07:37:38作者:iseeyu

添加新评论