玩flutter的简单介绍

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 ！

(1)Flutter记录之启动页

一年半前玩过flutter，忘光光...现在是时候重新拾取了。~

启动页一般只放图片或者加几行文字。

1、创建好flutter项目之后，在lib文件下面新建launch.dart或xx.dart.

2、在根目录下新建images文件夹，如已有直接放入图片

3、flutter_yijiake.iml中加入注入该图片，并注意空格

4、在根目录下的test/widget_test.dart中更改默认的启动页为当前的启动页路径

5、最后重新设置启动时的页面

6、非常简单的启动页面放logo图片

值得一说的是，flutter框架的UI组件需要已new 组件的形式展开。

Flutter开源app---开眼短视频

在玩安卓上有款组件化开源app的项目，一款模仿 Eyepetizer | 开眼视频的 开源app,这款app设计风格特别喜欢的，比较简洁，美观，然后最近又在学flutter的知识，于是就写了一款flutter版本的开源短视频，效果也是听不错的，废话不多说，先上效果图。

先附上项目地址：

项目api会在后面的参考链接里，或者直接项目内查看。

项目地址：

更新：6/30 项目新增下拉刷新，上拉加载功能

kotlin版本开眼短视频开发中，敬请期待...

总结：在此感谢参考的伙伴的文章，写的也很好，然后我将这个项目改写成了flutter，当中也学习到了很多flutter相关的知识，后续还有继续巩固，不断学习。

参考链接（包含本项目的api）

Flutter 上字体的另类玩法：FontFeature

在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中，已经介绍了很多 Flutter 上关于字体有趣的知识点，而本篇讲继续介绍 Flutter 上关于 Text 的一个属性： FontFeature ， 事实上相较于 Flutter ，本篇内容可能和前端或者设计关系更密切 。

什么是 FontFeature ？ 简单来说就是影响字体形状的一个属性 ，在前端的对应领域里应该是 font-feature-settings ，它有别于 FontFamily ，是用于指定字体内字的形状的一个参数。

我们知道 Flutter 默认在 Android 上使用的是 Roboto 字体，而在 iOS 上使用的是 SF 字体，但是其实 Roboto 字体也是分很多类型的，比如你去查阅手机的 system/fonts 目录，就会发现很多带有 Roboto 字样的字体库存在。

所以 Roboto 之类的字体库是一个很大的字体集，不同的 font-weight 其实对应着不同的 ttf ，例如默认情况下的 Roboto 是不支持 font-weight 为 600 的配置 ：

所以如下图所示，如果我们设置了 w400 - w700 的 weight ，可以很明显看到中间的 500 和 600 其实是一样的粗细，所以在 设置 weight 或者设计 UI 时，就需要考虑不同平台上的 weight 是否支持想要的效果 。

回归到 FontFeature 上，那 Roboto 自己默认支持多少种 features 呢？ 答案是 26 种，它们的编码如下所示，运行后效果也如下图所示，从日常使用上看，这 26 种 Feature 基本满足开发的大部分需求。

而 iOS 上的 SF pro 默认支持 39 种 Features ， 它们的编码如下所示，运行后效果也如下图所示，可以看到 SF pro 支持的 Features 更多。

所以可以看到，并不是所有字体支持的 Features 都是一样的，比如 iOS 上支持 sups 上标显示和 subs 下标显示，但是 Android 上的 Roboto 并不支持，甚至很多第三方字体其实并不支持 Features 。

有趣的是，在 Flutter Web 有一个渲染文本时会变模糊的问题 #58159 ，这个问题目前官方还没有修复，但是你可以通过给 Text 设置任意 FontFeatures 来解决这个问题。

最后，如果对 FontFeature 还感兴趣的朋友，可以通过一下资料深入了解，如果你还有什么关于字体上的问题，欢迎留言讨论。

基于网友的问题再补充一下拓展知识，毕竟这方面内容也不多 。

事实上在 dart 里就可以看到对应 FontWeight 约定俗称用的是字体集里的什么字体：

所以如果对于默认字体有疑问，可以在你的手机字体找找是否有对应的字体， 比如虽然我们说 roboto 没有 600 ，但是如果是 roboto mono 字体集是有 600 的 fontweight ，甚至还有 600 斜体： 。

另外注意这是 Flutter 而不是原生，具体实现调用是在 Engine 的 paragraph_skia.cc 和 paragraph_builder_skia.cc 下对应的 setFontFamilies 相关逻辑，当然默认字体库指定在 typography.dart 下就看到，例如 'Roboto' 、 '.SF UI Display' 、 '.SF UI Text' 、 '.AppleSystemUIFont' 、 'Segoe UI' ：

另外如果你在 Mac 的 Web 上使用 Flutter Web，可以看到指定的是 .AppleSystemUIFont ，而对于 .AppleSystemUIFont 它其实不算是一种字体，而是苹果上字体的一种集合别称：

[图片上传失败...(image-40f5ce-1648368234737)]

还有，如果你去看 Flutter 默认自带的 cupertino/context_menu_action.dart ，就可以看到一个有趣的情况：

当然，前面我们说了那么多，主要是针对英文的情况下，而在中文下还是有差异的 ，之前的文章也介绍过：

例如，在苹果上的简体中文其实会是 PingFang SC 字体，对应还有 PingFang TC 和 PingFang HK 的繁体集，而关于这个问题在 Flutter 上之前还出现过比较有意思的 bug ：

当然后续的 #16709 修复了这个问题 ，而在以前的文章我也讲过，当时我遇到了 “Flutter 在 iOS 系统上，系统语言是韩文时，在和中文一起出现会导致字体显示异常" 的问题 ：

解决方法也很简单，就是给 fontFamilyFallback 配置上 ["PingFang SC" , "Heiti SC"] 就可以了，这是因为韩文在苹果手机上使用的应该是 Apple SD Gothic Neo 这样的超集字体库，【广】这个字符在这个字体集上是不存在的，所以就变成了中文的【广】；

所以可以看到，字体相关是一个平时很少会深入接触的东西，但是一旦涉及多语言和绘制，就很容易碰到问题的领域 。