Skip to content

一个用flutter实现的material design风格音乐播放器

Notifications You must be signed in to change notification settings

Chenwn1186/MusicPlayer_FlutterProject

Repository files navigation

一个material design风格的安卓音乐播放器,使用flutter构建

为什么会想到做这样的软件?

因为目前市面上缺少功能完善并且原汁原味的material design风格音乐播放器。

作者是flutter初学者,本项目主要是为了锻炼本人的flutter开发能力。

开发过程

1.高斯模糊的实现

根据Flutter文档的说法,BackdropFilter的模糊范围是根据其父widget的大小来确定的,于是需要在外面套一层clipRect来限制其范围。 实际开发过程中发现如果在外面套的是其他容器如container、column等,那么模糊的范围就一直会是全屏幕,无论怎么改都解决不了这个问题。 最后发现只有改成clipRect才行。

2.音乐列表的实现

首先需要获取外部存储的读写权限,然后扫描整个外部存储,获取所有音乐文件,并将包含音乐文件的文件夹保存到应用数据中, 以便下次进入APP时不用再次全盘扫描。

接着是绘制音乐列表:设计两种风格:一个就是普通的列表,一个是网格显示。为了美化UI,需要在每个列表中显示专辑封面(后期可选择显示歌手封面), 并且网格背景是圆角矩形的形状,背景是对专辑封面的低亮度高半径高斯模糊。

3.播放页面的实现

全屏背景为专辑封面的低亮度高斯模糊,中间显示专辑封面(形状可自由选择),中间靠下是歌曲信息,再下面是播放进度条和播放控制按钮。 后期考虑在播放页面中添加歌词显示。

4.均衡器的实现

经过本人仔细地检索,flutter的库中只有flutter_soLoud是支持均衡器的,因此只能使用这个库来实现。 其实还有别的方法,就是使用cpp音乐库,再利用flutter的ffi库来与cpp代码进行交互。但是该方法需要自行编写接口,难度较大,后续有充足的时间再考虑。

About

一个用flutter实现的material design风格音乐播放器

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published