Flutter全屏效果实现

调用SystemChrome.setEnabledSystemUIOverlays([]);

创新互联建站主打移动网站、成都网站建设、网站建设、网站改版、网络推广、网站维护、域名注册、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。

把状态栏和虚拟按键隐藏掉，

跳转到其他页面后需要调用

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);把状态栏显示出来，

需要一起调用底部虚拟按键

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom])

Flutter 之 Sliver 系列控件

SliverAppBar 控件，一个 MD 的 AppBar 。属性和 AppBar 类似，但做的效果比 AppBar 更加强大。相同的属性具体可以看 Flutter 之 Scaffold 控件 ， 里面有 AppBar 控件的介绍。那么还有些没有的属性：

结合 elevation 使用，当elevation 不为 0 的时候，是否显示阴影

AppBar 展开时候的高度

true 的时候下滑AppBar优先滑动展示，展示完成后才给滑动控件滑动

snap 为 true, 则 floating 也要为 true 。true 的时候根据手指松开的位置展开或者收缩AppBar

appBar 收缩到最小高度的时候 appBar 是否可见

SliverAppBar 往往做为 CustomScrollView 的第一个子元素，根据滚动控件的偏移量或者浮动的位置来改变 SliverAppBar 的高度。所以具体用法如下

另外在上面设计到 FlexibleSpaceBar 控件，FlexibleSpaceBar 有个 collapseMode 属性

为 Sliver 系列控件添加一个 padding 。如给上面 SliverAppBar 添加一个 Padding 。

多行多列的列表控件，相当于 Android 的 GridView，有两个属性

SliverChildDelegate，这里有两种方式创建

SliverGridDelegate，也是有两种方式创建

结合上面展示效果

和上面 delegate 属性一样，需要创建一个 SliverChildDelegate 。

比 SliverList 多一个 itemExtent 属性，设置 item 的高度 。item 里面的子控件无法再改动高度。

上面 SliverAppBar 就是结合 SliverPersistentHeader 实现的效果，SliverPersistentHeader 需要一个 SliverPersistentHeaderDelegate 。 实现 SliverPersistentHeaderDelegate 有 4 个方法需要重写

至于效果，具体效果具体分析。

有一个 Widget 属性，主要作用是在 CustomScrollView 里面添加多种不同布局的样式。

占满一屏或者比一屏更多的布局，

滑动剩余部分展示的布局

Flutter 仿抖音效果 (一) 全屏点爱星

项目地址: 持续效果更新

flutter 有个onTapUp 事件,字面意思就是 点击抬起的,会返回 TapUpDetails details ,通过 localPosition 属性就能获取到x,y坐标

计算double 并不复杂,每次点击的时候记录下当前的事件戳,只要两个点击的时间戳和坐标距离小于自己设定的阈值,就可以视为双击事件

实现双击

我们使用OverlayEntry 控件,控件详细介绍

效果一共有 缩小 → 上移 → 放大 → 消失

第一组动画(缩小 上移) → 第二组动画(放大 消失)

flutter 动画需要两个类

AnimationController 负责管理动画

Animation 负责具体值操作

然后通过 Transform.scale 函数的,对scale值进行改变

补全第一组动画

现实

项目地址: 持续效果更新

Flutter 仿抖音效果 (二) 界面布局

Flutter 仿抖音效果 (一) 全屏点爱星

Flutter 仿抖音效果 (二) 界面布局

[Flutter 仿抖音效果 (三) 视频播放列表] ( )

项目地址: 持续效果更新

1.基本的布局是简单的,外层通过Stack作为根

2.左边点赞的控件组通过Align进行统一布局

3.顶部控件组通过Positioned进行布局,设置顶部距离,其实也可以用align,我们多使用几种来习惯flutter的布局

4.底部同样使用Positioned,设置底部距离

5.子页面的左右滑动使用PageView,一开始我们要从推荐开始左滑到关注,可以使用reverse属性,不需要更多额外的操作

1.pageController监听

刷新顶部的下划线时,我们一样使用StreamController刷新,这样效率比setstate高很多

2.歌曲名走马灯效果

这个效果看起来挺麻烦的其实实现起来超级的简单用最普通的ListView就能快速的实现

首页listview里面套入的是最简单的container+text

listview添加一个ScrollController做为滑动的控制

使用一个定时器,把listview滑到最大的位置之后,在滑回去

先通过scroController.position.maxScrollExtent获取最大位置,

然后通过scroController.animateTo进行滑动,因为我设置一次循环的时间是3000毫秒,所以滑过去和滑回来的时间各占一般 new Duration(milliseconds: (time * 0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画

Flutter开发--视频播放器

目前Flutter平台主流的两个播放器是video_player和fijkplayer

pub

github

1、Flutter平台官方插件，作者是国外的，有问题沟通比较困难，只能通过提交issue

2、硬解码

4、UI封装： better_player

基于video_player和Chewie的高级视频播放器。它解决了许多典型的用例，并且易于运行。

5、播放器宽高比例与视频内容宽高比例不一致时，会出现图像压缩变形的问题

6、调用原生内核播放器：iOS--AVPlayer， Android--ExoPlayer

7、对于分段源 m3u8 的播放不友好，如果一个切片播放超时，会导致整个播放都失败

8、better_player可以缓存视频，但不能自定义缓存的地址，只能指定key，和缓存的最大内存量（还未研究超出最大的话是不能缓存新的，还是删除最旧的）

9、better_player不能完全自定义UI，只能修改类中的一些开放属性，比如说icon图标，文字颜色啥的

10、无网络有缓存时，封面可以正常展示

11、better_player播放失败有手动retry的设计

pub

github

1、fijkplayer 是一个 Flutter 生态的媒体播放器，是对 ijkplayer 的 Flutter 封装，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作为播放器内核，ijkplayer 使用 ffmpeg 进行音视频解封装和解码，同时添加了 Android 和 iOS 平台特有的硬件加速解码能力。

2 、国内有QQ群，但是活跃度也是不高。

3、可以缓存视频，可以自定义缓存的地址，方便后续的内存维护。

4、可以通过FijkPanelWidgetBuilder较大程度上自定义UI。

5、无网络有缓存视频时，无法展示封面，因为内部是通过imageProvider去加载网络图片的。

7、播放失败无手动retry的设计

1、两种播放器都是通过外接纹理方案 (Texture)，将播放器视频画面渲染接入 flutter 中，性能上优于 PlatformView 的接入方法。

如何自己实现？

下面以video_palyer的iOS源码部分解释：

iOS用CVPixelBufferRef将渲染出来的数据存在内存中，Flutter engine会将Texture的数据在内存中直接进行映射无需通过Channel传输，然后Texture Widget就可以把你提供的这些数据显示出来。在我们传输数据的时候会需要将其与 TextureID 绑定，绑定的过程通过BasicMessageChannel实现数据流的传输，以做到实时展示的效果

网页名称：flutter光晕效果,flutter反射
本文URL：http://azwzsj.com/article/phecpi.html