基于 Flutter 视频客户端 Vistor【已开源】
作者:Songlcy
原文:https://blog.csdn.net/u013718120/article/details/86621278
版权声明:本文为 Songlcy 原创文章,未经博主同意请勿转载!
项目已开源到 Github:Vistor,欢迎大家 fork,star。
https://github.com/songxiaoliang/visitor-flutter
模块
开发环境:
Vs Code (1.30.2)
Android Studio 3.+
开发框架 ( Flutter sdk: ">=2.0.0-dev.68.0 <3.0.0" ):
状态管理:Scoped_model
网络层:Dio
导航库:Fluro
主模块分为首页、精选、电影、我的,以下是功能列表:
使用 scoped_model 状态管理,实现state统一管理。
使用 TabBar + TabBarView 实现单页面不同模块切换。
使用 staggered_grid_view、ListView 组件展示图文列表。
扩展列表组件,结合 NotificationManager 实现上拉加载更多数据,下拉刷新数据。
精选内容,分类展示,使用SliverAppBar,增加交互动效,提高用户体验。
自定义过滤菜单组件,结合 ScrollController 实现滑动交互效果。
代码模块化 实现,组件封装实现代码复用。
功能设计
使用 Fluro 管理全局路由,可自由配置 Scene 的转场动画,处理Android端的后退键事件
使用 Flutter 基本语法进行布局,并封装了一系列通用的组件,比如 AnimationText、过滤菜单,加载状态组件,共享动画组件等,便于全局复用
数据层使用Dio实现 Http / Https 网络加载,可轻松实现 http header、链接超时等常用配置。
使用 CachedImage 组件,实现图片的加载缓存,优化渲染显示性能。
引入 scoped_model 状态管理,Scoped 结合 ScopedModelDescendant ,设定全局 state 结构,管理相关的组件状态。
使用 shared_preferences 实现小数据的本地化存储。
使用第三方字体库,实现 FontFamily 的定制显示。
设置 WillPopScope,实现首页点击返回键提示两次快按退出功能。
首页非Index Tab 页面下,点击返回键,首先返回 Index Tab,再次点击提示两次退出。
... ...
核心功能分析
(1)状态管理
在项目实践之前,简单分析了Redux、scoped_model 等状态管理框架。最终选择在项目中使用 scoped_model 作为状态框架库,方便了项目中State状态数据统一管理,降低UI与Model间的代码耦合度。使用过程中发现 ScopedModel 下的部件如何需要根据State刷新,则 child 必须为 ScopedModelDescendant 包裹。否则会出现组件无法刷新的情况。
(2)路由栈
官方在路由方面已经提供了非常方便的操作。使用 Navigator 的 api 可以轻松实现路由栈的管理。fluro 路由栈框架在官方的基础上,提供了更高层次的功能封装。可以更加方便的对路由进行统一管理,配置。并且提供了丰富的转场动画供开发者使用。
(3)网络
官方在网络层为开发者提供了 Http api,方便我们处理普通的 Http 请求操作,例如 Post,Get 等。项目中采用了第三方网络请求库 dio。dio在网络层处理上更加方便高效,提供了很多高级功能,例如,请求链接超时、cookie、请求拦截等。同时使用了connectivity 来监听网络状态,用于用户体验上的优化。
(4)本地持久化存储
在 Android 原生开发中,小数据存储我们一般会采用SharedPreferences来实现。iOS中则是使用 NSUserDefaults 持久化保存。在该项目中,我们使用了 dart 版本的 第三方开源库 shared_preferences。shared_preferences 采用单利模式实现。通过使用setXXX | getXXX 可以非常方便的实现数据的本地持久化存储。
(5)图片
官方为开发者提供了Image | ImageAsset | ImageNetwork 方便开发者轻松实现加载本地图片与网络图片。为了用户体验,在该项目中引入了第三方图片加载库 cached_network_image。该库提供了图片加载中占位图、加载失败占位图等配置。同样,为了减少代码重复,将其组件作为子组件进行封装,统一管理配置。
(6)列表
和原生开发类似,在Flutter中实现列表是非常的简单快捷,避免了原生中创建 Adapter 的繁杂工作。仅仅需要我们配置列表数量,item组件即可完成。同样,为了在列表中提高用户体验,在项目中使用了 flutter_staggered_grid_view,该库对 Flutter 中的ListView、GridView 等组件进行封装,可以非常轻松的实现网格布局、瀑布流布局等效果。同样还提供了类似Android 中响应式布局效果。
(7)转场动画
官方路由栈 Navigator 中为开发者提供了转场动画的配置,例如 FadeIn、FadeOut 等。除了利用Navigator,我们可以使用 Hero 来实现Android原生开发中的共享元素动画效果(SharedElement)。所以在项目中,通过封装 Hero,并结合Image组件,实现了共享元素转场动画。
(8)视频播放
在视频播放组件上,官方并没有提供组件元素。第三方开源库 video_player 可以实现简单的视频播放,视频格式局限性大。所以采用了自己封装 Flutter Plugin 插件,实现跳转原生界面播放。未来会在现有的插件基础上,实现局部窗口播放效果。
(9)主题切换
在 Flutter 中实现主题切换,相对原生开发来说是非常简单的。只需要我们动态切换 ThemeData 即可。采用状态管理工具或者 组件间通信库 event_bus 来实现,都是可以的。
(10)UI组件优化
做过 React Native 开发的朋友,当组件渲染模块涉及业务逻辑时,为了避免在 render 中编写造成代码混乱,一般都会将组件及业务逻辑(例如State刷新操作等)捆绑抽离到方法中,然后在 render 中引用。那么在 Flutter 中这样写同样会造成问题。我们知道 Flutter 中分为 有状态 | 无状态 两种组件,当涉及 State 状态数据刷新时,会造成组件的重复创建渲染,增加CPU性能开销。所以,优化的做法是将组件及业务代码封装在一个新的 StatelessWidget 无状态组件中,虽然相对之前代码量有所增加,但是提升了UI渲染效率。
项目结构
依赖库
部分图标采用了icons,查看具体的图标名称可到 ionics官方文档(http://ionicframework.com/docs/ionicons/)。依赖方式,cd 到项目根目录,执行:flutter get packages
dio: ^1.0.13
fluro: ^1.4.0
timeago: ^2.0.10
scoped_model: ^1.0.1
event_bus: ^1.0.1
shimmer: ^0.0.6
connectivity: ^0.3.2
fluttertoast: ^2.2.7
shared_preferences: ^0.4.3
cached_network_image: ^0.5.1
flutter_swiper: ^1.1.4
flutter_spinkit: ^3.0.0
flutter_staggered_grid_view: ^0.2.6
flutter_webview_plugin: ^0.3.0+2
video_player:
git:
url: https://github.com/songxiaoliang/flutter_video_player.git
打包Apk
1.生成签名Keystore文件,并将keystore签名文件放到android/app根目录下
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
2.在gradle.properties文件下增加常量标识
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456
3.在app的build.gradle下的增加如下配置
android { ... defaultConfig { ... } signingConfigs { release { storeFile file(MYAPP_RELEASE_STORE_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } buildTypes { release { // signingConfig signingConfigs.debug signingConfig signingConfigs.release } } }
5.进入项目根目录,终端执行如下命令:
flutter build apk // 默认携带 --release
flutter build apk 会默认打出 release 版本的安装包,apk文件会生成在android/app/build/outputs/apk/目录。
效果图
推荐阅读
NDK项目实战—高仿360手机助手之卸载监听
Android 仿今日头条的开源项目
SmartRecom:一款干货满满,助你进阶的 App 项目
扫一扫 关注我的公众号
如果你想要跟大家分享你的文章,欢迎投稿~
基于 Flutter 视频客户端 Vistor【已开源】相关推荐
- android音视频工程师,音视频学习 (十三) Android 中通过 FFmpeg 命令对音视频编辑处理(已开源)...
## 音视频学习 (十三) Android 中通过 FFmpeg 命令对音视频编辑处理(已开源) ## 视音频编辑器 ## 前言 有时候我们想对音视频进行加工处理,比如视频编辑.添加字幕.裁剪等功能处 ...
- 一款基于星座的app(项目已开源)
一款基于星座的app(项目已开源) 该星座app是大三时期做的期末项目.结果不被老师赏识,说是网上找的,哈哈.文章最后放源码下载地址. 关注公众号回复 : 1003 . 获取源码地址,回复1004,获 ...
- 推荐 4 个基于 Flutter 的重磅高仿开源项目
大家新年好呀,我是你们的 猫哥,那个不喜欢吃鱼.又不喜欢喵 的超级猫又回来啦 ~ 相信大家过年都过得开心吧 过得开心,那么就开始学习了哈 ~ 这里为你整理了 4 个 Flutter 优质的开源项目,希 ...
- Android 中通过 FFmpeg 命令对音视频编辑处理(已开源)
视音频编辑器 前言 有时候我们想对音视频进行加工处理,比如视频编辑.添加字幕.裁剪等功能处理,虽然 Github 上开源了一些比较不错的项目,但是如果我们想在此项目上进行二次开发,比如我想拿到该项目的 ...
- Java打造一款SSH客户端,已开源!
最近由于项目需求,项目中需要实现一个WebSSH连接终端的功能,由于自己第一次做这类型功能,所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用,当时看到了很多这方面的项目,例如:GateOn ...
- bilibili解析接口_仿最新BiliBili客户端(已开源)
前言 该项目仿照B站的Android客户端进行开发,初衷是想学习流行的Android技术,但是没有数据资源.因为喜欢逛B站,而且B站的Android客户端又是Google推荐的MD设计规范,于是花了些 ...
- 仿最新BiliBili客户端(已开源)
前言 该项目仿照B站的Android客户端进行开发,初衷是想学习流行的Android技术,但是没有数据资源.因为喜欢逛B站,而且B站的Android客户端又是Google推荐的MD设计规范,于是花了些 ...
- 从0开始写一个基于Flutter的开源中国客户端(5)——App整体布局框架搭建
上一篇中我记录了Flutter中常用的一些布局,本篇开始开发基于Flutter的开源中国客户端了.在本篇博客中,要实现的是一个App的整体框架,包括页面底部的Tab导航菜单.页面的侧滑菜单以及跳转到新 ...
- 已开源!Flutter 基于分帧渲染的流畅度优化组件 Keframe
大家好,这里是承香墨影! 今天给大家推荐一个,Flutter 中利用分帧渲染优化流程度的开源库,刚开源,还热乎着.这次开源可真波折,看着 @Nayuta 前前后后在公司内部流程走了一个多月吧,太艰难了 ...
最新文章
- 关于Hinton团队无监督新作SimCLR的所思所想
- ajax跨域问题解决方案
- 从 2017 OpenStack Days China 看国内云计算的发展现状
- 判断一个变量是不是数组
- void * 指针和const 指针
- FreeRTOS 之 在Cortex-M中应用时的中断优先级设置
- php数组根据指定列排序
- win10电脑黑屏只有鼠标箭头_win7开机黑屏只有鼠标怎么办,我来教你解决
- db2 sql执行历史_5 个免费的在线 SQL 数据库环境,比Navicat 香!
- 【AI视野·今日Robot 机器人论文速览 第十一期】Mon, 21 Jun 2021
- Github+jsDelivr为脚本/图片等静态文件加速的全球CDN
- 操作系统内存管理、Cache调度策略学习
- windows 7 提示缺少D3DCOMPILER_47.dll的正确解决方法
- 来感受一下别人的密码
- CISSP 考证进度篇(持续监督中)
- 小甲鱼【C语言】《带你学C带你飞》笔记
- VHDL数控分频器及其应用
- 计算机的未来发展前景论文,浅述未来计算机的发展趋势论文 计算机发展趋势论文...
- 加权均值滤波matlab,模糊加权均值滤波器
- regedit参数+批处理修改IE标题
热门文章
- 用CSS实现阴阳八卦图等图形
- 十分钟入门Visio,不行来砍我!
- 谁能谈谈国外软件行业的实际情况么?(全美“50大好差事” 软件工程师排名第一)...
- 为什么有的人职场上混得如鱼得水,有的人却混得狼狈不堪呀?
- 把网站服务器调黑白,服务器安全狗怎么设置黑白名单?
- 中国染料医用激光器行业市场供需与战略研究报告
- Linux 高性能计算集群(六)BeoWulf
- 加息靴子落地铁矿石继续反弹,甲醇认购大涨,苹果10-01大跳水2022.5.5
- linux入门--磁盘管理之分区、格式化与挂载
- MATLAB画矩形和圆