flutter 仿网易云音乐（1）

先上脑图

首先说一下做这个项目的想法吧，之前用react仿过网易云的客户端，正好想要学习flutter就琢磨着用flutter写一个app

先看效果吧

用到的api接口是由Binaryify大佬提供的node版本

由于是闲暇时间写的所以进度会很慢。

目前实现的功能有

搜索、

每日推荐（仅登录状态下可用）、

私人fm、

歌单

首先现在用到的flutter依赖

  card_swiper: ^1.0.4  # 轮播provider: ^6.0.0 # 状态管理shared_preferences: ^2.0.7 # 缓存flutter_easyrefresh: ^2.2.1 # 刷新组件dio: ^4.0.0 #http请求flutter_svg: ^0.23.0+1 # 支持svg加载sticky_headers: ^0.2.0 # 吸顶proste_indexed_stack: ^0.2.4loading_indicator: ^3.0.2 # 加载动画animate_do: ^2.0.0 # 初始化动画flutter_screenutil: ^5.0.1+2 # 适配处理common_utils: ^2.0.2 #各种格式处理mmoo_lyric: ^1.0.0 # 歌词处理插件audio_service: ^0.18.2 # 锁屏播放器just_audio: ^0.9.18  # 音频播放audio_session: ^0.1.6+1get_it: ^7.2.0bubble_tab_indicator: ^0.1.6 # tab下划线插件substring_highlight: ^1.0.33 # 文字加重标记scrollable_positioned_list: ^0.2.3 #歌词定位列表perfect_volume_control: ^1.0.5 #音量控制flutter_easyloading: ^3.0.3 #toast/loadingbetter_player: ^0.0.81 #播放器cached_network_image: ^3.2.0 #很好用的图片加载处理flutter_staggered_grid_view: ^0.6.0 #瀑布流fijkplayer: ^0.10.1 # 另一个播放器fijkplayer_skin: ^2.2.8 #另一个播放器的皮肤

处理到现在我觉得最大的难点对于我一个刚接触flutter的新手来说应该是歌词的处理和音频、视频的处理。

说一下我项目的构造

-lib+components 组件+http api请求+model 主要是放一些封装的组件+notifiers 这个主要是和音频处理相关的 ValueNotifier+pages 页面+provider 全局的Provider+preferences 缓存（存用户cookies，已经上次听的歌曲（这个还没实现））+routers 路由+services 这个是处理audio_service 后台的东西，完全按照官网搬过来的+style 公共样式（我基本没用到）+utils 格式处理以及其他+widget 公用的widgetpage_manager.dart 音频处理主文件

先讲一下项目的初始化构建吧

provider和shared_preferences两个插件是用于在各个页面都可以轻松获取数据和修改数据

目前我主要用来处理用户信息的存取

入口文件

void main() async {await setupServiceLocator(); // 这个后续说到WidgetsFlutterBinding.ensureInitialized();SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]) // 设置手机不可被翻转.then((_) {runApp(MultiProvider(providers: [ChangeNotifierProvider(create: (context) => DefaultProvider()..init()), // 用户信息处理并初始化],child: MyApp(),));});if (Platform.isAndroid) { // 设置主题颜色SystemUiOverlayStyle style = SystemUiOverlayStyle(statusBarColor: Colors.transparent,statusBarIconBrightness: Brightness.light);SystemChrome.setSystemUIOverlayStyle(style);}
}

路由文件我是按照买的flutter学习教程上面配置的，应该又更好的处理办法因为使用这种想要自定义路由跳转动画就很难的

// 路由配置文件import 'package:flutter/material.dart';
import 'package:netease_app/components/live/live_video_player.dart';
import 'package:netease_app/pages/advertising.dart';
import 'package:netease_app/pages/index/all_live.dart';
import 'package:netease_app/pages/live/live_screen.dart';
import 'package:netease_app/pages/login/login.dart';
import 'package:netease_app/pages/navigation_button.dart';
import 'package:netease_app/pages/playlist/playlist.dart';
import 'package:netease_app/pages/playsongs/playsongs.dart';
import 'package:netease_app/pages/recommendSingle/recommend_single.dart';
import 'package:netease_app/pages/search/search.dart';
import 'package:netease_app/pages/search/search_result.dart';
import 'package:netease_app/pages/songComment/song_comment_page.dart';
import 'package:netease_app/pages/video_page/videoPage.dart';final routes = {"/": (context) => NavigationButtonPage(),"/start": (context) => AdvertisingPage(),"/playlist": (context, {arguments}) => PlayListPage(playlistId: arguments,),"/playsongs": (context) => PlaySongsPage(),"/search": (context, {arguments}) => SearchPage(searchTip: arguments["searchTip"],searchTips: arguments["searchTips"],),"/searchresult": (context, {arguments}) => SearchResultPage(searchValue: arguments,),"/login": (context) => UserLoginPage(),"/songcomment": (context, {arguments}) => SongCommentPage(songInfo: arguments,),'/recommentsingle': (context) => RecommendSingle(),'/videoplaylist': (context, {arguments}) => VideoPlayListPage(videoId: arguments["id"],type: arguments["type"] ?? 0,),'/livepage': (context, {arguments}) => LiveAllPage(tagid: arguments["tagid"],typetitle: arguments["typetitle"],),'/liveroom': (context, {arguments}) => LiveVideoPlayerPage(url: arguments["url"],title: arguments["title"],liveType: arguments["liveType"],cover: arguments["cover"],),'/livescreen': (context) => LiveScreenTypePgae(),
};//固定写法
// ignore: top_level_function_literal_block
var onGenerateRoute = (RouteSettings settings) {// 统一处理final String? name = settings.name;final Function? pageContentBuilder = routes[name];if (pageContentBuilder != null) {// 如果此路由返回的存在与路由中if (settings.arguments != null) {// 如果此路由携带了参数，将参数arguments 传过去final Route route = MaterialPageRoute(builder: (context) =>pageContentBuilder(context, arguments: settings.arguments));return route;} else {// 反之不携带参数final Route route =MaterialPageRoute(builder: (context) => pageContentBuilder(context));return route;}} else {// 这里处理找不到路由去到404页面}
};

首页

进过研究接口提供了首页-发现这个接口可以获取全部的首页信息

但是他分了登录状态和非登录状态

非登录状态一次性返回了全部信息

登录状态分了多次获取新的需要添加上次的cursor

其中ADD_MENU_LIST是我自己添加进去的不想用api中的接口获取觉得麻烦

     child: ListView.builder(itemBuilder: (context, index) {/// 其他还有几个模块没有上 HOMEPAGE_PODCAST24 广播电台/// HOMEPAGE_BLOCK_FUN_CLUB 云村ktv/// HOMEPAGE_BLOCK_TOPLIST 排行榜/// HOMEPAGE_BLOCK_LISTEN_LIVE look直播/// HOMEPAGE_VOICELIST_RCMD 热门博客 有声书var element = findMusicList[index];switch (element["blockCode"]) {case "HOMEPAGE_BANNER":// 轮播图........case "HOMEPAGE_BLOCK_PLAYLIST_RCMD":// 推荐歌单case "HOMEPAGE_BLOCK_STYLE_RCMD":// 个性推荐case "HOMEPAGE_BLOCK_NEW_ALBUM_NEW_SONG":// 新歌case "HOMEPAGE_MUSIC_CALENDAR":// 音乐日历case "HOMEPAGE_MUSIC_MLOG":case "HOMEPAGE_BLOCK_MGC_PLAYLIST":case "HOMEPAGE_BLOCK_OFFICIAL_PLAYLIST":case "HOMEPAGE_BLOCK_VIDEO_PLAYLIST":List videoPlaylist = element["creatives"];case "ADD_MENU_LIST":default:return SizedBox();}

这里处理用到了EasyRefresh控制页面的刷新与加载

首页的结构大概就是

Scaffold(appBar: appBar(),body: SafeArea(child: Stack(children: [EasyRefresh(),// 这个是底部悬浮的音乐控制器Align(alignment: Alignment.bottomCenter,child: ButtonPlayWight(),)]))
)

后续会继续更新讲解并附上github地址

flutter 仿网易云音乐（1）相关推荐

Flutter 仿网易云音乐App
图首页歌曲播放和卡片切换如正版一样,歌曲播放进度在播放/暂停按钮的边框显示(页面下方,由黑变红) 没登录的话,一般只能听12秒目前只做了模块('超带感的说唱精选')的点播功能, 其他地方可 ...
flutter 仿网易云音乐（2）
gitee项目地址 github项目地址如果喜欢请点点star 这里今天说一下项目的播放器选择查看了一下pub.dev 上主流的播放器插件主要有audioplayers和just_audi ...
Flutter仿网易云音乐 ---基础准备
源码地址:https://gitee.com/admin_327355/music 资源.工具准备 1.接口:网易云音乐 NodeJS 版 API 2.UI:Android apk通过压缩文件解压后获 ...
flutter 仿网易云音乐(3)
继续深入的将一下just_audio和audio_service搭配怎么在也没啥上使用这里主要是创建了一个全局管理page_manager.dart 首先整理一下需求,我们在页面上需要展示到播放列表 ...
仿网易云音乐的滑动冲突处理效果
系列文章此功能属于仿网易云音乐App的一部分仿网易云音乐App(基础版) 实现网易云音乐的渐进式卡片切换 Flutter 自定义View--仿同花顺自选股列表 Flutter自定义View--仿高 ...
Flutter+FishRedux高仿网易云音乐
flutter_netease_cloud_music 采用FishRedux框架与开源网易云音乐api开发的高仿网易云音乐APP,技术栈主要是:Flutter+FishRedux,目前主要是偏重AP ...
还不会用Flutter？仿网易云音乐项目（已开源）
原作者:公众号boyan 前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越 ...
Flutter——实现网易云音乐的渐进式卡片切换
介绍此功能为仿网易云音乐App的一部分 : 仿网易云音乐App 预览图我们可以看到页面下方切换的卡片效果分析首先动画以 x轴分为两部分 : 左侧文字和右侧图片右侧图片以 z轴分为 : ...
WPF仿网易云音乐系列（一、左侧菜单栏：Expander+RadioButton）
WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 原文:WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 1.简介上一篇咱们说到, ...
Android 仿网易云音乐App
因为工作实在是有点忙,所以还没完成成品,就先挂到GitHub上.日后慢慢更新啦. 项目地址 GitHub地址,希望大佬们点个star GitHub仿网易云音乐App 效果展示注:因为视频太模糊,每日 ...

flutter 仿网易云音乐（1）

flutter 仿网易云音乐（1）相关推荐

最新文章

热门文章