版权声明：本人文章仅在掘金平台发布，请勿抄袭搬运，转载请注明作者及原文链接 🦉
阅读提示：网页版带有主题和代码高亮，阅读体验更佳 🍉
废话不多说，先来一波截图纯享。
一、动因
很早之前就有自己做一个听歌 app 的想法，觉得各大音乐 app 广告过于烦人。特别是某易云，页面臃肿丑陋，广告不胜其烦。
很早就关注了一个知名音乐 API 的 nodejs 后端项目，准备着什么时候大显身手。不过该知名项目已经被抬了，虽然有 fork 项目，但是不可避免会存在法律风险，就算是自己做着玩，也不想沾染是非，索性重新构思和寻找合适的方式开发。
一方面是思考使用的技术栈，一方面是寻找合适的接口服务，P2P 的方式也很危险，而且需要架设服务器，也不合适，就这样一直寻找和等待。
年前，无意中发现了一款听歌 app，叫哔哔音乐，当时先在某社区发现的软件，号称免费听歌，所以先使用的软件，用下来就发现，果然可以免费收听很多付费音乐，且曲库还挺全，热门歌曲基本都在。
我发现搜索的结果基本都带小破站的标识，发现其基本上就是小破站搜索的结果，只是转换成音频流了。
此时，我虽然对此有点感受，但是毕竟是人家开发的 app，很好奇人家的实现，但是自己确实没办法。直到有一天，我想着这个 app 没准也是掘金哪个好心肠的 giegie~ 开发的，可能还写了文章，我闲来无事就搜了一下，果不其然。在大佬 阿炸克斯 的文章下面发现了哔哔音乐的踪迹，顺藤摸瓜找到了 github 仓库。
于是，我的基础条件就满足了最重要的一个：歌源。
有了歌源实现，我最大的工作量就是重写 UI 而已。但是对于技术栈，我其实考虑了一番，在 react-native 和 flutter 之间犹豫了一下。
原因无非就是，rn 更贴近我 web 的开发习惯，很多东西我不用再学。而 flutter 我需要重新学习语言、框架、开发模式等等，进程阻碍不小。但是经过一番研究和思考，我还是选择了 flutter，理由如下：
1.rn 已经不同于传统 web 开发了，要学习的东西一点不少
2.rn 毕竟是 web 技术，有更大的局限性，坑是一点不少
3.rn 在不同系统的表现，也就是 UI 一致性上，不如 flutter
4.本着来都来了的心态，不如大胆一试，尝试下全新的领域
所以技术栈就定了 flutter。
于是，开发这样一个免费听歌、无广告的音乐 app 所需要的基本条件，我就准备好了。
二、学习 flutter
紧接着就是紧锣密鼓地学习 flutter，这是对于我来说完全陌生的领域，不过，好在现在学习资源很丰富。掘金上关于 flutter 最权威的教学，应该是 张风捷特烈 出的一系列小册和文章。我花了几天时间过了 dart 语法，简单写了官网案例，迅速过了一遍大佬的项目后，就准备开发了。
将 阿炸克斯 的项目 fork 并 clone 下来后，我却迟迟敲不下第一行代码。
三、设计
这里有两个最大的难点，是功能设计和页面设计。
可能会有人说，不是有 AI 吗？页面设计交给 AI 就好了。
我当初也试了各大 AI，但是出图效果惨不忍睹。
好在我有点设计功底，当初的摄影、ppt 设计都没白学，审美还在，再说了，实在没法设计就去抄呗，那么多 app 的设计案例摆着，够用了。
然后就是功能设计，毕竟先设计功能才能设计 UI，想要哪些功能，这个得考虑清楚。
第一个，我需要的就是某狗音乐的播放队列功能，就是，我可以将想听的歌都临时放进一个列表，优先播放列表里的歌曲，这个功能对我来说非常喜欢，这也是我一直使用某狗的原因。
举个 🌰，其它 app 里可能就是提供一个歌单给你，你往里面添加歌曲，你每次听这个列表，可能就是列表循环。但是实际上，我在某些时候，可能就只想听某些歌，单曲循环不合适，但是那些歌我都想听，或者我想先听 3 遍薛之谦的演员，5 遍周杰伦的夜曲。那么播放队列这个功能就很合适。
某狗音乐的交互，在老版本，是列表中歌名左侧有一个 +，点击 + 就会添加到待播放列表，并且支持重复添加，任意顺序。现在是取消 +，直接点击歌名左侧封面。
这个功能是我想要的。
除此之外，导入本地下载歌曲，这是核心功能，如果你不能导入本地歌曲，基本可以说这个 app 就是个鸡肋，总不能还要来回切换 app 听歌。
还有就是歌单，哔哔音乐最大问题就是不能在本地新建歌单，那么需要实现一个歌单的增删改查。
所以目前就明确了 app 的核心功能：
1.支持导入本地下载的音乐
2.支持自由新建歌单（不过歌单建多了也不方便，所以限制最多 20 个）
3.支持搜索互联网歌曲，免费收听，且曲库够大（这点哔哔音乐已经实现了，可以直接使用）
4.支持待播放队列
目前这些功能都已支持，另外在设置页还支持了主题色更换，后续可能会考虑暗黑模式，桌面端适配等。不过这都是后话，我自己不对此承诺。
四、聊聊flutter开发体验
再聊回技术。
首先我觉得最大的阻碍是搭建环境，开发安卓需要安装 jdk、android studio 等，这个过程会很难受，因为你可能会好几天都跑不起来项目，不是这里错就是那里错，好在现在有了 AI，这些问题不再那么恶心了。
再一个，flutter 的生态问题，flutter 确实已经有不少很好用的库了，基本你想要的都有，但是很多库的维护是一个大问题，有些库你去看，可能最近一次更新是在三年前。这就是flutter生态现状，flutter 使用群体和生态远没有 web 那么繁荣。flutter 库的开发基本不会带来什么收益，哪怕说在 github 挣两颗星星，也要你是明星项目才行，加上使用群体本就不大（相较于 web），所以很难让人持续维护。
比如，知名的 flutter 库 getx，其作者由于个人原因，近两年没有更新，基本是一些零散 commit，有个老哥每天在 issue 区抱怨为什么还没有升级到 5 版本，为什么还没有适配最新的 flutter。
这就是现状。
但是别慌，基本你常用的，要用的那些库都在稳定更新，那些不知名的小库，停更就停更吧，反正也指望不上。
在开发这个项目的过程中，我用到了下面的库：
1.just_audio：这是用于音乐播放的知名库
2.bot_toast：toast 提示库，挺好用的
3.provider：知名状态管理库，同作者还有一个 riverpod，上面提到的 getx 也是一个强大的状态管理库，不过getx 除了状态管理还有响应式数据、简洁路由等，下次开发我必然用上 getx
4.dio：知名 http 请求库，用就完事了。不过这部分我没怎么涉及，因为涉及网络请求的地方，哔哔音乐基本都做了
5.sqflite：重量级嘉宾，由于没有后端服务，想要实现列表存储、下一首、上一首等功能，就必须使用到本地数据库，简单的本地存储是没法应对大量的数据的，所以 sqflite 是必然使用的库
6.event_bus：跨页面调用方法会用到，也是挺方便的
7.flutter_easyloading：简单好看的 loading 效果库
8.audio_metadata_reader：音频元信息读取，例如本地音频扫出来后，需要读取音频的时长、作者等信息，就需要这个，不过这里应该不是最佳方案，因为其无法读取封面等信息，存在一定的缺陷，好在我这里并不是很需要封面，用用也没事，最主要的是这个库在稳定维护
在开发过程中，我都在大量使用 AI，特别是本地音频扫描以及播放器部分，没有 AI 我可能都做不出来本地音频扫描这个功能，当初这块功能甚至让我熬夜到凌晨都没解决，好在综合多个 AI 后，在 deepseek 的帮助下，在查找了一些资料后还是解决了。
这里不得不说，这方面的 flutter 生态比较薄弱，我在这里卡壳也是因为 AI 提供的代码示例里使用的第三方库，基本都断更几年了，要么不支持 dart3，要么就是不适配最新 flutter 了，编译会有问题。
甚至 AI 会让你编写原生代码实现，但是我并不想写原生代码，硬是死磕，最后还是被我解决了。只是目前的方案只适配安卓，其它端并不支持。
五、结语
项目从一月中开始开发，到现在历时两个多月，基本没断过，过年的每一天也是在开发，app 已经接近稳定了。
想下载体验的朋友请访问百度网盘：啵啵音乐，提取码：6w7y。
想看源码的朋友请访问 github 仓库：bobomusic。喜欢的话给个 star，谢谢。
往期推荐
搭建一个快速开发油猴脚本的前端工程 18+ 👍🏻 28+ 💚
金九银十招聘季，IT 打工人，该怎么识别烂公司好公司？ 70+ 👍🏻 80+ 💚
别人休息我努力，悄悄写个 cli 工具，必须提升效率，skr~ 60+ 👍🏻 110+ 💚
一文掌握 eslint，再也不怕项目报错 20+ 👍🏻 30+ 💚
开发一个 npm 库应该做哪些工程配置？ 40+ 👍🏻 50+ 💚
分享我在前端学习与开发中用到的神仙网站和工具 40+ 👍🏻 110+ 💚
uniapp 踩坑记录（二） 130+ 👍🏻 150+ 💚
闲来无事，摸鱼时让 chatgpt 帮忙，写了一个 console 样式增强库并发布 npm 100+ 👍🏻 110+ 💚
uniapp 初体验踩坑记录 30+ 👍🏻 60+ 💚
两小时学会 JS 正则表达式，终身不忘 50+ 👍🏻