flutter 使用本地服务器_使用flutter编写一款视频播放软件

61ef83e1a2b62aacdb7c2613870ffe2c.png

先上源码地址:[https://github.com/Mockingbird1234/skapp](Mockingbird1234/skapp)

开源不易,喜欢的朋友可以给个star支持一下。

## 软件介绍

skapp是一款视频播放软件,它既能播放电影,同时也可以切换音乐助手来播放主流站点的音乐,这个软件依赖接口服务端(服务端使用koajs编写,暂未开源),原理是使用苹果cms采集资源入库,使用服务端读取数据库数据进行整合,app端调用接口展示数据。所以这款软件可以实现无缝对接其他站长的数据资源。

## 软件界面

下面通过一些截图来简单介绍下软件的功能。

![欢迎界面](https://upload-images.jianshu.io/upload_images/7845604-4984605377d8a11d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/340)

- 这是软件的欢迎界面,可以在服务端动态配置是否显示

![首页](https://upload-images.jianshu.io/upload_images/7845604-e68e43a7deb5c657.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/340)

- 这是软件的首页,之所以这样设计是因为当时只是想简单的做一款分类播放软件,流程不必太复杂,所以底部是苹果cms的一级分类,头部是苹果cms的二级分类,底部的图使用的是iconfont里的图标,关于如何在flutter中使用这种多色图标,打算以后出个教程详细介绍下。

![预览界面](https://upload-images.jianshu.io/upload_images/7845604-4e0c31251d924549.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/340)

- 这是软件的预览界面,它的底色会根据电影图片的主色调进行改变,原理是使用一个叫做colorpick的包进行拾色动态渲染,主要是模仿豆瓣电影做的这种效果。这个页面实现起来还是比较复杂的,有很多动画效果,感兴趣的可以下载软件的release版本体验下。

![播放界面](https://upload-images.jianshu.io/upload_images/7845604-47d18fe5a18f44da.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/340)

- 这是软件的播放界面,使用tencent_player进行视频播放,目前支持.m3u8、.mp4以及网页形式的播放源,可以在这个界面选择视频播放源以及清晰度。这里以后想加入投屏的功能,但是目前还没有思路,知道如何加投屏的小伙伴可以在评论区给我留言。

![主要功能区](https://upload-images.jianshu.io/upload_images/7845604-ac5bc8a23922f90e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/340)

- 这是软件的主要功能区,因为软件功能不多,所以没有单独整个界面来进行软件设置,而是直接把功能都放到了slider里面。在这里面可以更换皮肤,更换皮肤原理是定义一个全局变量存储起来颜色,点击小圆点来修改全局变量就可以了,暗黑模式和换肤原理一样,flutter天生支持这种功能,还是非常方便的。点击音乐助手就可以切换到音乐播放界面,稍后会做介绍。直播按钮会使用主流直播源进行播放,目前可能不能使用,自定义片源功能的初衷是由于本人服务器配置较低,资源较少,使用这个功能可以在用户本地或线上搭建自己的服务端进行无缝对接,这样可以减轻我自己服务器的压力。

![音乐助手](https://upload-images.jianshu.io/upload_images/7845604-3a629833c679aa9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/340)

- 这是点击音乐助手后切换的界面,和电影是一样的界面,实现原理是整合了另一款开源项目-洛雪音乐助手,服务端统一进行整合开放api。

![音乐播放](https://upload-images.jianshu.io/upload_images/7845604-357a74b2307ce5d8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/340)

- 这是音乐播放界面,可以切换到歌词界面(截图未提供),这里提供加入歌单,上下歌曲切换,下载音乐等功能。

---

以上介绍了软件的大体功能,此外还有以下小功能:

1. 搜索

2. 广告位,分别在软件启动、电影播放以及电影暂停处增加了广告位,可以在服务端进行动态配置

3.友盟统计,可以使用友盟统计功能

以上功能可能站长比较需要。

---

**如果你是普通用户,可以到github下载项目的release版本进行体验,对软件的使用方式有哪些不习惯的欢迎提issue;**

**如果你对flutter比较感兴趣,可以下载本项目源码进行研究,个人认为对学习flutter还是比较有帮助的,主要使用mobx对状态进行管理,使用fluro进行路由管理**

**如果你是苹果cms的使用者,也可以使用此项目对接自己的资源,打造一款属于你自己的APP**

---

如果大家对这种软件感兴趣,以后打算出几个教程介绍下软件安装方式以及如何进行flutter开发,flutter的上手难度个人觉得要比RN以及原生简单点。

最后还是那句话,开源不易,欢迎大家到[github](Mockingbird1234/skapp)给个star支持一下。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值