figure

Home page

Song playing and card switching

Like the original, the song playing progress is displayed in the play/pause button border (from black to red at the bottom of the page)

If not logged in, generally can only listen to 12 seconds at present only do the module (' super sense of rap selection ') of the on-demand function, other places can directly apply (1, 2 lines of code), the console has been writtenCopy the code

Card (music calendar) switch animation is also copied from the original

Personal Center and Drawer (not logged in)

Cloud village

Video (not logged in)

The video module requires login to view

The ripple animation is still copied from the originalCopy the code

The login

Video (logged in)

The page changes before and after login

Let’s take a look at the differences between my and drawer pages

Let me exit again

'Switch account' has an exit functionCopy the code

Search page

wen

The interface used

Interface for the big guys open source netease cloud API, thanks in this

Kaiyuan netease Cloud API

I spent more than 90 to buy a cloud service to clone the interface down, development and use.

When you clone my project, you can use my interface or build a cloud server of more than 90 years by yourself.Copy the code

Tip: The data returned by the interface is not stable, and sometimes it will be deformed. For mobile development, it causes some problems.

In addition, if you run the demo and find errors, there is a high probability that the interface will be disabled or the data will be distorted, read the logCopy the code

Development framework Bedrock

The project is based on Bedrock’s rapid development framework

MVVM + Provider design modeCopy the code

Bedrock’s rapid development framework

The original

This demo was developed not as an exercise in flutter, but as a result of the recent encapsulation of the Flutter routing module, applied to Bedrock framework.

After refactoring the demo of the original project and adding a targeted demo, I felt the need to test it on a more complex project, so I came up with this:

Imitation netease Cloud Music (Basic Version)Copy the code

Also added a big Demo to my framework :).

At the same time, since it is Demo, in the project development as far as possible to do so, to avoid developers reading too much redundant page code, and unable to understand the framework of the working principle.

With no blueprints, pages are all feel, and the interface is so unstable (type/result) that it's really hard to develop... That's why it's called basicCopy the code

Introduction to route encapsulation

This route encapsulation not only reduces code writing at development time, but also exposes state, which can be refreshed at any granularity.

This does not mean that providers can be abandonedCopy the code

In addition to the advantages of static routes, constructors are used instead of map values for static routes to avoid key input errors.

For more information, see the following article:

About the architecture of the FLUTTER route encapsulation

Demo Function Overview

You can clone the project and pick out unimplemented features to familiarize yourself with the frameworkCopy the code

Login (registration not implemented, no empty number)

My page: Logged in/not logged in (not including child pages)

Discover page: Song request (not including sub-page)

Cloud Village page: Square & Attention sub-page (excluding other sub-pages)

Video page: login/non-login state, TAB sub-pages, video playing (excluding other sub-pages)

My Drawer: Logged in/off (not including child pages)

Search page: support search history localization, cache clearing, search and search suggestions, (excluding search results and other sub-pages)

Bottom music Bar: background music function module, supporting single point of play (the playback history and playlist pop up after the bottom console is clicked is not realized, this may be done later, which is quite interesting)

The project address

Imitation netease Cloud music

Thank you

Thanks again to the big guys of open source netease Cloud Music API.

Welcome to issue, thank you 🙂

The Demo code may be a little random and buggy, please forgive me.Copy the code