Flutter 仿網(wǎng)易云音樂App(基礎(chǔ)版)

首頁

image
image
image

歌曲播放和卡片切換

如正版一樣,歌曲播放進(jìn)度在播放/暫停 按鈕的邊框顯示(頁面下方,由黑變紅)

沒登錄的話,一般只能聽12秒
目前只做了 模塊(‘超帶感的說唱精選’)的點(diǎn)播功能,
其他地方可以直接套用(1、2行代碼即可),控制臺已經(jīng)寫好
image

卡片(音樂日歷)切換動畫也是仿照正版來

image

個(gè)人中心和抽屜(未登錄)

image

云村

image

視頻(未登錄)

視頻模塊需要登錄才能看到

波紋動畫依然是仿照正版的
image

登錄

image
image

視頻(已登錄)

image
image

登錄前后頁面變化

我們看一下,我的、抽屜頁面的前后差異

image

再退出一下

‘切換賬號’有退出的功能
image

搜索頁面

image
image
image

所用接口

接口為大佬們開源的網(wǎng)易云API,在此感謝

開源網(wǎng)易云api

我花了90多買了個(gè)云服務(wù)把接口clone下來后,開發(fā)使用。

各位clone我項(xiàng)目時(shí),可以用我的接口也可以自己搭一個(gè)
一年90多的云服務(wù)器,你們用時(shí)輕點(diǎn)兒...

Tip:
接口返回的數(shù)據(jù)不太穩(wěn)定,有的時(shí)候還會變形,對于移動端開發(fā)來說,造成了一些麻煩,各位開發(fā)時(shí)要注意。

另外,如果你運(yùn)行這個(gè)demo發(fā)現(xiàn)出錯(cuò)了,那大概率時(shí)接口廢了或者數(shù)據(jù)變形了,看日志吧

開發(fā)框架 Bedrock

此項(xiàng)目基于Bedrock 快速開發(fā)框架開發(fā)

MVVM + Provider 設(shè)計(jì)模式

Bedrock 快速開發(fā)框架

初衷

開發(fā)這個(gè)demo并不是為了對flutter進(jìn)行練習(xí),而是因?yàn)榍靶┤兆訉lutter路由模塊的封裝,并應(yīng)用于Bedrock框架。

在重構(gòu)了原項(xiàng)目的demo以及添加了針對性演示demo后,覺得有必要再在一個(gè)復(fù)雜一些的項(xiàng)目里測試一下,因此便有了這個(gè):

仿網(wǎng)易云音樂(基礎(chǔ)版)

也算是給我的框架增加了一個(gè)繪聲繪色的大Demo吧 :)。

與此同時(shí),既然是Demo,在項(xiàng)目開發(fā)時(shí)盡量做到點(diǎn)到為止,避免開發(fā)者閱讀過多的冗余的頁面代碼,而無法了解框架的工作原理。

由于沒有設(shè)計(jì)圖,頁面全憑感覺來,加之接口的不穩(wěn)定(類型/結(jié)果),開發(fā)起來確實(shí)費(fèi)勁...
所以叫基礎(chǔ)版

路由封裝的簡介

此次路由封裝,不但減少了開發(fā)時(shí)的代碼書寫,并且對外暴露出state,可以做到任何粒度的刷新。

但這并不意味著可以拋棄provider

在兼容靜態(tài)路由的優(yōu)勢同時(shí),對于靜態(tài)路由的 map 傳值,取而代之的是構(gòu)造函數(shù)傳值,這樣避免了key的輸錯(cuò)。

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

關(guān)于這次flutter路由封裝的架構(gòu)介紹

Demo功能概覽

大家可以clone下項(xiàng)目后,挑揀未實(shí)現(xiàn)的功能來實(shí)現(xiàn)以熟悉框架

登錄(注冊未實(shí)現(xiàn),沒有空號了)

我的頁面:登錄/非登錄狀態(tài)(不含子級頁面)

發(fā)現(xiàn)頁面: 點(diǎn)歌 (不含子級頁面)

云村頁面:廣場&關(guān)注子頁(不含其它子級頁面)

視頻頁面:登錄/非登錄狀態(tài),各tab子頁面,視頻播放(不含其它子級頁面)

我的抽屜:登錄/非登錄狀態(tài)(不含子級頁面)

搜索頁面:支持搜索歷史本地化、清理緩存,搜索及搜索建議,(不含搜索結(jié)果和其它子級頁面)

底部音樂bar:后臺音樂功能模塊,支持單點(diǎn)播放,(未實(shí)現(xiàn)底部控制臺點(diǎn)擊后彈出的播放歷史記錄和歌單,這個(gè)可能后期要做,蠻有意思的)

項(xiàng)目地址

仿網(wǎng)易云音樂

感謝

再次感謝開源網(wǎng)易云音樂api的大佬們。

同時(shí)歡迎各位提issue,謝謝 :)

Demo代碼可能有些隨意和bug,還請見諒。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容