flutter音乐源码,flutter 音乐播放器

2021-12-23 flutter module源码方式集成流程分析

官方文档

为商水等地区用户提供了全套网页设计制作服务，及商水网站建设行业解决方案。主营业务为成都网站设计、成都网站建设、商水网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

将 Flutter module 集成到 iOS 项目

（1）这时候还没有App.framework ， podspec文件是有了

（2）有engine，Flutter.framework。

（3）有插件列表 podspec FlutterPluginRegistrant.podspec，这时没有symlinks/plugins目录软链接

（4）导出当前的环境变量 flutter_export_environment.sh

flutter-plugins-dependencies

执行 podHelper.rb 脚本

做2件事情：

/Volumes/huc/opt/fvm/versions/2.2.0/packages/flutter_tools/bin/xcode_backend.sh build

多了.symlinks 和App.framework，重新拷贝了Flutter.xcframework

Pods-HouseCommercialCube-frameworks.sh

执行 xcode_backend.sh

做3件事情：

AppFrameworkInfo.plist

assets_path 这个后面也没有人用啊！

放到.ios下面

.ios/Flutter/engine/Flutter.xcframework

编译前， 把这个下面添加一个空文件， engine被覆盖了，那么那个空文件就没了？

对比了一下大小。 release

debug 版本的Flutter.xcframework 255M

ios-release 1.03 GB

一开始是1.03G， run之后， 变成了255M

说明确实拷贝到这里了

.ios下面App.framework 没有变

App.framework 61Mb

Flutter.framework 35Mb

"${PODS_ROOT}/Target Support Files/Pods-HouseCommercialCube/Pods-HouseCommercialCube-frameworks.sh"

Flutter视频播放器，简洁！

注：亮度调节和音量调节gif无法体现，功能是ok的，其次默认Icon锁的close和open实在难以分辨。

环境：Flutter 2.8.1 channel stable ;Dart 2.15.1

需要音频播放器的看这里： Flutter音乐播放器

重点说下这个工具类，因为视频播放，涉及到状态改变有很多，笔者刚开始选择使用 InheritedWidget 来在众多的widget之间共享数据。但是总感觉这样有点繁琐，且不很优雅！

这里非广告，如果是使用 GetX 就很简单了，笔者也使用了 GetX 进行封装了，一泻千里的赶脚！，但是笔者还是那句话：刚开始接触Flutter的开发者不是很建议使用 GetX ，可以先熟悉下Flutter状态管理的基础原理再行使用。而且为了尽量简洁，还是不引入其他的第三方了。

我们选择对第三方插件进行封装的目的不外乎这几个：

于是笔者就写了一个工具类 VideoPlayerUtils ，专门且只用来处理播放器的所有业务。包括暂停、播放、跳转、调节音量、调节亮度、切换视频等操作。在所有的widget中不会引用关于 video_player 或其他第三方插件的任何信息， VideoPlayerUtils 负责widget与播放器之间的所有操作交互。后续优化迭代或更换播放器插件时，只需针对这个工具类进行修改，对所有widget不会有任何的影响，大大的解耦合了。

其中 VideoPlayerState ：

提供以上的公共属性，可以通过 VideoPlayerUtils 来获取对应的值，使用 get 只读，使外界不会误修改这些属性，以保证数值的安全性。开发者可根据自身需要自行添加属性。

提供以上方法来处理播放器的所有业务。同样的开发者可根据自身需要自行添加或修改。

重点说下这个方法，是整个业务的核心方法，控制视频的播放或暂停。开发者只要遇到播放或暂停是均可调用此方法，具体是播放或暂停，内部根据传入的 url 自行判断，开发者不需要关心。

切换新视频也是使用此方法，传入的 url 与上次不一致，自动切换新视频。笔者可根据 statusListener 来监听播放状态的改变，以此处理自身逻辑。

这个也需要提下，视频播放器在播放新视频时会异步初始化，一般我们的操作是在 initState() 初始化，成功后再 setState() 。这里笔者遇到一个让人蛋疼的问题：

我们看 video_player 的使用：

VideoPlayer(controller) ：widget中已经持有了controller。本来笔者封装的目的就是为了让widget与controller的之间解耦合。但此时的笔者。。。。

放弃不是不可能放弃的，这辈子都不会放弃的！

于是笔者取了巧，写了一个初始化监听器 initializedListener ，包换2个参数： bool,Widget ，初始化是否成功；其中widget为初始化成功返回需要展示的播放器UI，失败默认返回 const SizedBox() 。

到这里就可以简单使用了：

没看错，视频播放就是这么简单。

如果有更多的业务功能，笔者也按照自己的需求写了一套，同样的开发者可根据自身需要自行添加或修改。

VideoPlayerGestures 主要是处理手势的，比如快进、快退等跳转播放；左侧上下滑动调节亮度；右侧上下滑动调节音量；单击是否开启沉浸式播放，所有widget的隐藏与显示；双击播放、暂停等。

哦，还有 PercentageWidget 也放到这个文件下了，就是这玩意：

因为显示的百分比与手势相关，随着手势移动而更新。开发者可自行处理。

笔者处出于简单考虑，就按照整个UI的位置命名了。瞅一眼就知道是啥玩意。

同样的开发者可根据自身需要自行添加或修改。

就是这玩意：

同样的开发者可根据自身需要自行添加或修改。话说这个锁的 Icon 的open和close是真的难分辨！

就是这玩意：

同样的开发者可根据自身需要自行添加或修改。

这玩意是自定义的，别问，问就是跟产品干一架落了下风

主要就是自定义这玩意：

同样的开发者可根据自身需要自定义。

注：这里没有添加缓冲的进度，开发可查看 video_player 中的源码 VideoProgressIndicator ，按业务自行定义。

这玩意就是整合以上的widget，再考虑下全屏的安全区域，没啥东西。开发者可自行处理！

具体的实现监听器的思路， 看这里 。

自此一个漂亮的Flutter视频播放器就已经结束了。如果您觉得对您有些许帮助的话，欢迎 Star ！

flutter源码系列 PageView源码分析以及监听事件

最近一个项目要实现可以无限循环的PageView，主要思路是在初始化pageview的list的时候在开始和结尾多加一个结尾和开头的widget，当滑动到开头和结尾的时候手动进行页面的切换，详细可以搜索pageview无限轮播。

这种方法有一个要点就是要维护两个索引，一个是内部list的索引，一个是外部显示的索引，由于list的容量是比显示的数量多2的，所以如果要在外部进行一些比如指示器或者计时器功能要进行和页面同步显示或者切换页面操作时，需要将显示的索引转换成list的索引。

不过网上说的都是一些比较简单的实现，看到比较多的就是当滑动到要手动切换的时候进行一个时延，这样可以避免直接切换页面造成的卡顿和跳动现象。但是存在一个问题，如果要同时实现一个跟随页面切换的指示器，就会出现当页面切换过去之后指示器才会跟着过去，因为页面切换的时候执行了时延，而时延之后才会真正改变索引，此时才会setstate，之后指示器才能响应到索引的切换，但是如果在时延之前就切换的话又会出现指示器先行的情况。因此这种方法其实是存在一些问题的。

所以解决这个问题的关键在于如何进行页面切换的判断。这里可以有两种思路实现，第一种是实现viewpage的onpagechanged方法，在里面进行逻辑的判断，然后用controller来进行页面跳转，不过这种方法存在当controller跳转的时候又会回调onpagechanged，所以就会出现多次对索引不必要操作，而且如果有比如计时器等额外的功能的话可能不方便将页面逻辑分开，而且依旧无法解决指示器延迟问题，同时也很难进行细粒度的操作。

第二种方法我们就要去看pageview的源码了，从源码的角度来解决问题才是正确的方法。首先我们点进去pageview的源码

看到这里其实已经有一些思路了，我们之前难点在于重写了onpagechanged方法导致问题无法很好的解决，现在我们找到了onpagechanged调用的地方，只要找办法避免掉就可以实现了。

当然这里我们要说到NotificationListener，以及flutter对应的冒泡事件传输机制，这里大家可以去看看这篇 文章 。

我来总结一下，其实就是flutter对于notification这个组件，有一中事件规则叫冒泡传递，底层的notification如果在它的 onNotification写的逻辑中返回是false以及它不是根结点，就会去向上遍历寻找它的祖先notification组件，知道遇到root节点或者某一个返回true，则事件传递结束。

而且在onNotification中可以对多种事件进行监听和处理，所以我们可以把对viewpage页面跳转对索引处理的逻辑写在这里，而且我们可以分别处理比如滑动开始的start事件和结束的end事件，分别进行细粒度的逻辑的处理，这样就可以在外部进行操作和别的功能实现了。

因此不仅无限轮播事件可以通过这种方法来解决，如果有其他的操作也可以这样进行处理，而且因为我们没有传入onpagechanged方法，所以不存在多次调用的问题，pageview那里判断onpagechanged是null方法就不会进去了，会直接我们写在pageview外面的notification的逻辑。

最后的结构大概这样

Flutter Dio源码分析(四)--封装

Flutter Dio源码分析(一)--Dio介绍

Flutter Dio源码分析(二)--HttpClient、Http、Dio对比

Flutter Dio源码分析(三)--深度剖析

Flutter Dio源码分析(四)--封装

Flutter Dio源码分析(一)--Dio介绍视频教程

Flutter Dio源码分析(二)--HttpClient、Http、Dio对比视频教程

Flutter Dio源码分析(三)--深度剖析视频教程

Flutter Dio源码分析(四)--封装视频教程

github仓库地址

本文会手把手教你该怎么去封装一个类库，平时在我们的工作中都是拿着别人的造好的轮子在使用，这篇文章将带你怎么去自己造轮子，以后再碰到别的类库需要对其进行封装的时候提供一个的思路和方法。

在前面的文章中，我们对 Dio 的基本使用、请求库对比、源码分析，我们知道 Dio 的使用非常的简单，那为什么还需要进行封装呢？有两点如下：

当组件库方法发生重要改变需要迁移的时候如果有多处地方用到，那么需要对使用到的每个文件都进行修改，非常的繁琐而且很容易出问题。

当不需要 Dio 库的时候，我们可以随时方便切换到别的网络请求库，当然 Dio 目前内置支持使用第三方库的适配器。

因为一个应用程序基本都是统一的配置方式，所以我们可以针对 拦截器 、 转换器 、 缓存 、 统一处理错误 、 代理配置 、 证书校验 等多个配置进行统一管理。

因为我们的应用程序在每个页面中都会用到网络请求，那么如果我们每次请求的时候都去实例化一个 Dio ，无非是增加了系统不必要的开销，而使用单例模式对象一旦创建每次访问都是同一个对象，不需要再次实例化该类的对象。

这是通过静态变量的私有构造器来创建的单例模式

我们对 超时时间 、 响应时间 、 BaseUrl 进行统一设置

因为不管是 get() 还是 post() 请求， Dio 内部最终都会调用 request 方法，只是传入的 method 不一样，所以我们这里定义一个枚举类型在一个方法中进行处理

我们已经把 Restful API 风格简化成了一个方法，通过 DioMethod 来标明不同的请求方式。在我们平时开发的过程中，需要在请求前、响应前、错误时对某一些接口做特殊的处理，那我们就需要用到拦截器。 Dio 为我们提供了自定义拦截器功能，很容易轻松的实现对请求、响应、错误时进行拦截

我们发现虽然 Dio 框架已经封装了一个 DioError 类库，但如果需要对返回的错误进行统一弹窗处理或者路由跳转等就只能自定义了

在我们发送请求的时候会碰到几种情况，比如需要对非open开头的接口自动加上一些特定的参数，获取需要在请求头增加统一的 token

在我们请求接口前可以对响应数据进行一些基础的处理，比如对响应的结果进行自定义封装，还可以针对单独的 url 做特殊处理等。

我们看了转换器的介绍，发现和拦截器的功能差不多，那为什么还要存在转换器，有两点：

执行流程： 请求拦截器 请求转换器 发起请求 响应转换器 响应拦截器 最终结果 。

只会被用于 'PUT'、 'POST'、 'PATCH'方法，因为只有这些方法才可以携带请求体(request body)

会被用于所有请求方法的返回数据。

在开发过程中，客户端和服务器打交道的时候，往往会用一个 token 来做校验，因为每个公司处理刷新token的逻辑都不一样，我这里举一个简单的例子

为什么我们需要有取消请求的功能，如果当我们的页面在发送请求时，用户主动退出当前界面或者app应用程序退出的时候数据还没有响应，那我们就需要取消该网络请求，防止不必要的错误。

由 服务器生成 的 一小段文本信息 ，发送给浏览器，浏览器把 cookie 以kv形式保存到本地 某个目录下的文本文件内，下一次请求同一网站时会把该 cookie 发送给服务器。

cookie 的使用需要用到两个第三方组件 dio_cookie_manager 和 cookie_jar

因为在我们平时的开发过程中，会碰到一种情况，在进行网络请求时，我们希望能正常访问到上次的数据，对于用户的体验比较好，而不是展示一个空白的页面，该缓存主要是 《Flutter实战》网络接口缓存 提供参考。

我们在程序退出后内存缓存将会消失，所以我们用 shared_preferences 进行磁盘缓存数据。

在我们用flutter进行抓包的时候需要配置 Dio 代理。由 DefaultHttpClientAdapter 提供了一个 onHttpClientCreate 回调来设置底层 HttpClient 的代理。

用于验证正在访问的网站是否真实。提供安全性，因为证书和域名绑定，并且由根证书机构签名确认。

日志打印主要是帮助我们开发时进行辅助排错