Flutter writes a Nas music player (5)

Note

This article was automatically translated using Google

1. Encapsulate a Toast

There is no such a useful prompt box in Flutter, there is only a snackbar at the bottom, which feels outrageous

If I click to save the server, and there are important prompts such as missing information, it must be in the form of a dialog box, asking the user to click confirm to troubleshoot the error. But for example, the subtle operation of clicking on the single cycle is also a control that needs to prompt the user to change successfully and automatically close within one second. I searched the whole Internet and said that there is no official corresponding one, and I can only use a third-party plug-in. I am afraid that such a small thing will lead to a third-party control. I am afraid that it is a waste of money. It is also very simple to write one by myself.

class MyToast {
   static void show({required BuildContext context, required String message}) {
     OverlayEntry overlayEntry = new OverlayEntry(builder: (context) {
       return Positioned(
           bottom: 95,
           child: Container(
             //It's actually a full-screen horizontal bar, just a transparent color
             color: Colors.transparent,
             width: MediaQuery.of(context).size.width,
             alignment: Alignment. center,
             child: Card(
               child: Padding(
                 padding: EdgeInsets. all(10),
                 child: Text(
                   message,
                   style: normalGrayText,
                 ),
               ),
               color: badgeDark,
             ),
           ));
     });

     Overlay.of(context)?.insert(overlayEntry);
     Future.delayed(Duration(seconds: 1)).then((value) {
       overlayEntry. remove();
     });
   }
}

// call method
MyToast.show(context: context, message: "Single cycle");

All colors and backgrounds can be customized, how beautiful it is, this code can really be used directly, it is much better than introducing a third-party control, welcome to copy, it is in lib/screens/common/myToast. In dart, there is a style file in baseCSS.dart in the same directory. If I could find someone to provide this code yesterday, I would not write it myself. How delicious it is to copy

2. Still started with NetEase Cloud

2.1 Deploy the ready-made NetEase Cloud API

The main reason is that it is too silly to upload and download lyrics on the webpage by yourself, and then put them on your own server? What if Navidrome supports it after the update that day, right? This should be what the server should do, so don’t worry about it

First of all, NetEase Cloud’s pc api is still available, and you can directly capture the data with postman, that’s for sure, otherwise, how to do it on the web side, it must be released. But you can only use the http protocol. If you want to use https, you need to log in and get your identity information. However, it is well known that ios does not support the http protocol for a long time (of course there are ways, but I just think it is unnecessary)

There are ready-made wheels on Github that can be used NeteaseCloudMusicApi, its working principle is cross-site request forgery (CSRF), forging request headers, calling official API, anyway, as long as you External services are also unavoidable. At the same time, it supports serverless deployment to Vercel, which is very flattering.

Of course, due to the well-known brain-dead reasons (I really hate this wall now, because of the wall, there are a large number of brain-dead little pinks, okay digress), Vercel needs to make another address when doing CNAME, Otherwise, domestic visits will not be possible. You see, we are such an exception, so great!

1. First fork this library to make your own library NeteaseCloudMusicApi

2. Log in to vercel, log in with the github account, and then you will be prompted to install the githubAPP, and you can deploy it directly after completion

3. Bind a custom domain name, pointing to a CNAME record that supports domestic access: cname-china.vercel-dns.com, I seriously doubt that this may be blocked in the future

Seeing this page means that the deployment is successful. As long as there is no problem in the future, you don’t need to open this page again…

2.2 Make a page to manually get lyrics

Why not make it automatic in batches? Because of two reasons:

1. The songs I collected are not necessarily sung by the original singers, so you may not be able to find them when you search for the lyrics, and even if you receive the original singers, there are many versions of the lyrics, and it is very possible to make them automatic The lyrics that came down are all wrong, and it will be more troublesome to adjust them when the time comes
2. If it is made in batches, it is easy to be blocked, and it is not necessary

The workflow is just:

1. Create a new song lyrics correspondence table
2. Make two DIO requests: search for songs according to the song title and artist name, get the song id of NetEase Cloud, and then use this song id to grab the lyrics, this is a one-to-one correspondence
3. Make a page, three tabs, search out the songs in your own music library, and then click to pop up a box, put the singer and song name in, this box can be modified. If it is sung by an online singer, change it to the original singer’s name, use the above request to search for songs on NetEase Cloud, get the second TAB, then choose a song that you think is right to search for lyrics, and get the lyrics back to the third View the page, if you think it is what you want, then click Bind, save your song id and lyrics in the database and it will be OK!

As a result… the lyrics are all finished, but the playlist is still not done, hahahaha, maybe I repel it in my heart…

I can’t write any more functions, if I write any more, I’ll finish writing, then there’s nothing left to play with… Now what’s left is a playlist, which is a big function, and what’s left is to make error-throwing adjustments and UAT

After running everything on Mac OS, I can start to adapt the IOS side, but I put it on the real machine and the virtual machine for a brief look the day before yesterday, basically there is nothing to adjust