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

Flutter 仿抖音效果 (一) 全屏点爱星
Flutter 仿抖音效果 (二) 界面布局
[Flutter 仿抖音效果 (三) 视频播放列表] ( >

下面这种情况下，为 InkWell 设置的 splashColor 不会生效：

需要用 Material 去除背景色，然后将颜色设置在 InkWell 外部：

在 Dialog builder 中使用 WillPopScope 禁用返回键返回：

注意：使用此方法同时也会禁用 iOS 上的手势滑动返回功能，推荐判断平台后再使用。

修改对话框中的复选框状态，最简便的方法是通过 Element 中的 markNeedsBuild 方法：

当然，更推荐的做法是通过 StatefulBuilder ，然后就可以在 Dialog 中调用 setState 方法了，不过在调用 setState 时需要判断 Dialog 是否已经关闭，否则会造成 setState() called after dispose() 的错误，可以通过添加一个标志位来解决，如下：

在 Web 中加载网络有时会失败，遇到这样的报错： Exception caught by image resource service ，造成该错误的原因通常是，跨域了（见 跨域资源共享 ）。最简单的解决办法是， 使用 HTML 渲染加载 ，而不是默认的 CanvasKit。

Flutter 中所有的 list 默认都是没有 ScrollBar 的，必须使用 ScrollBar 组件。ScrollBar 组件通过监听 ScrollView 的 ScrollNotification 来刷新位置，所以 List 的长度必须是固定的。

当使用 WebView 等高度不定的组件时会出现内容被截断的情况，通常可以使用 NestedScrollView 来解决该问题，需要在 WebView 外部嵌套 SingleChildScrollView。

虽然使用了缓存，而且也是用 builder 加载的，但是发现一个现象：滑动屏幕后短暂消失并重新加载了。高度很高时这种现象更加明显，其原因是超出屏幕范围一定距离的组件被重新渲染了。解决方法是在 ListView 上设置 cacheExtent 参数:

该参数的作用是改变超出屏幕高度后继续渲染的范围（以像素为单位），比如设置成 9999 后意味着超出屏幕 10000 像素以内的内容都会被保留下来。

借助 IntrinsicHeight 组件：

另外，IntrinsicHeight 还可以用于 Dialog 或者 BottomSheet 中，使得其中的元素 显示内在元素的高度 ，从而避免元素因为约束的存在而不显示或者高度太高（比如在使用了 Column 或者 Row 的时候）。

在通过 Uri 的 queryParameters 获取 query 参数时，发现有些链接会抛出下面异常：

造成该异常的原因是 Uri 默认使用 utf-8 解码超链接字符串，如果链接中包含非 utf-8 字符，就会造成上面的错误，相关 issue 见： issue #31621 。目前该 issue 处于 open 的状态，暂时的解决办法是，在所有使用到 queryParameter 的地方用 trycatch 捕捉可能抛出的异常。

Flutter 开发非常依赖各种官方或第三方的插件，而在使用这些插件时多少都会遇到一些问题，大部分问题都可以通过搜索和查找 issue 来解决。这里记录下一些我在使用部分插件时遇到的问题及其解决方法。

目前该库没有加载完成的回调（见 issue #545 ），不过我们可以通过在 imageBuilder 中来添加回调：

这是一个应用内更新插件，安卓 10 以上安装时需要在 manifest 中添加以下内容：

目前功能最强大的 WebView 插件，基本能满足绝大部分移动端网页加载的需求，而且可定制化程度高。

一般通过 CookieManager 修改 Cookie，拦截请求并修改请求对象的 Header 不会生效。

InAppWebViewOptions 的 userAgent 只在 iOS 上生效，而 applicationNameForUserAgent 只在 Android 上生效，所以最好的做法是分平台设置 InAppWebViewOptions ，而且需要注意，由于设置 userAgent 后会覆盖默认的 UserAgent，所以如果需要在默认的 UserAgent 上添加其它参数，iOS 上需要通过 InAppWebViewControllergetDefaultUserAgent() 获取默认 UserAgent 参数，而 Android 不需要添加。

如果源或者请求是 >

Dart的 IO 库包含了文件读写的相关类，它属于 Dart 语法标准的一部分，所以通过 Dart IO 库，无论是 Dart VM 下的脚本还是 Flutter，都是通过 Dart IO 库来 *** 作文件的，不过和 Dart VM 相比，Flutter 有一个重要差异是文件系统路径不同，这是因为Dart VM 是运行在 PC 或服务器 *** 作系统下，而 Flutter 是运行在移动 *** 作系统中，他们的文件系统会有一些差异。

Android 和 iOS 的应用存储目录不同， PathProvider 插件提供了一种平台透明的方式来访问设备文件系统上的常用位置。该类当前支持访问两个文件系统位置：

File代表一个整体的文件,他有三个构造函数，分别是：

文件读取本身有两种形式，一种是文本，一种是二进制。

221 读取文本内容

如果是文本文件，File提供了readAsString、readAsLines、readAsStringSync、readAsLinesSync方法，读取文本内容

readAsString 一次性读取所有文本

readAsLines 一行行的读取文本

结果返回的是一个List，list中表示文件每行的内容

readAsStringSync、readAsLinesSync同步读取文本

222 读取二进制内容
如果文件是二进制，那么可以使用readAsBytes或者同步的方法readAsBytesSync:

dart中表示二进制有一个专门的类型叫做Uint8List,他实际上表示的是一个int的List。

上面提到的读取方式，都是一次性读取整个文件，缺点就是如果文件太大的话，可能造成内存空间的压力。
所以File为我们提供了另外一种读取文件的方法，流的形式来读取文件

示例

dart提供了open和openSync两个方法来进行随机文件读写：

写入和文件读取一样，可以一次性写入或者获得一个写入句柄，然后再写入。
一次性写入的方法有四种，分别对应字符串和二进制

句柄形式可以调用openWrite方法，返回一个IOSink对象，然后通过这个对象进行写入：

默认情况下写入是会覆盖整个文件的，但是可以通过下面的方式来更改写入模式：

虽然dart中所有的异常都是运行时异常，但是和java一样，要想手动处理文件读写中的异常，则可以使用try,catch:

我们还是以计数器为例，实现在应用退出重启后可以恢复点击次数。 这里，我们使用文件来保存数据：

1引入PathProvider插件；在pubspecyaml文件中添加如下声明：
执行 flutter pub get

2实现如下

参考： >网站：

Flutter官网>ffmpeg是一个音视频处理库，通过命令行的形式，对音视频进行处理，而MobileFFmpeg
则是ffmpeg在移动端的实现，flutter_ffmpeg是对MobileFFmpeg的封装，是的在flutter下能够轻松的使用ffmpeg对音视频进行处理。flutter_ffmpeg包括两部分FFmpeg和FFprobe,其中FFmpeg负责音视频处理，而FFprobe主要负责查询音视频的媒体信息。
flutter_ffmpeg地址

android工程下的配置

上面配置中的”full-lts” 是flutter__ffmpeg各个发布版本的报名，可以查看官方文档的说明。有一个值得说明的地方是，flutter_ffmpeg有中发行包，一种是 Main Release,一种是LTS Release 发行包，而他们两者支持的 Android API Level/iOS SDK和硬件架构是不一样的，总的来说，LTS版本支持的更广泛，LTS支持度大于MAIN,所以我们最好使用LTS版本。
这里我遇到一个问题，使用full-lts编码格式，会出现上传到服务器无法播放视频的情况。
所以我这里是用的：

另外在使用flutter_ffmpeg的时候出现类似问题：

通过clean可以解决

使用gpl保证裁剪视频默认使用x264(不然会出现上传视频无法播放的问题)，具体可以查看flutter_ffmpeg封装编码

flutter_ffmpge是ffmpeg在flutter上的一个实现，ffmpeg是通过命令行还进行音视频编辑的工具，因此我们使用fluter_ffmpeg自然也是运行一些命令来实现我们的功能。具体使用方法可以直接看 ffluter_ffmpeg官方文档 和 ffmpeg官方文档 ，或者看一下更加通俗易懂的 阮一峰文档 。接下来我们主要看看flutter_ffmpeg能干什么？

做音视频处理，首先我们肯定想知道我们的处理是否成功，或者效果好不好，那么我们只能通过处理的视频前后的参数进行对比，因此第一步我们要求这个视频处理库详细的给我们提供音视频的信息,flutter_ffmpeg的FFProde能够很好的实现这一点，而且使用很方便：

-r 20：表示帧率设置为 20fps

fs 20 : 表示文件大小最大值为15MB
把视频截了一部分 --- 这种方法不推荐

-s vga : 指定分辨率， vga 代表 600480，也可以换成其他的值

-b:v 15M : 指定码率
-b:v :指定视频的码率
-b:a : 指定音频的码率
15M：码率的值 15M 表示 15Mb/s

比如我在项目里用到上传到服务器的视频时长需要控制在60s以内的功能，我们就可以这样：

从n开始，裁剪m秒长度的视频

从n秒开始，裁剪到m秒的视频

>只能说 Flutter 确实很强大
>在本博客中，我们将探讨Flutter中的堆叠式卡轮播。 我们还将实现一个演示程序，并学习在您的flutter应用程序中使用 stacked_card_carousel 包创建一个带有垂直轮播的堆叠卡。

用于创建带有堆叠卡片的垂直轮播的小部件。 下面的演示视频显示了如何在Flutter中创建带有垂直旋转木马的堆叠卡。 它显示了在您的flutter应用程序中如何使用stacked_card_carousel软件包来使用堆叠式卡轮播。 它显示了垂直圆盘传送带滑动卡的列表，所有卡向上滑动并堆叠，称为堆叠式卡传送带。 它会显示在您的设备上。

堆叠式卡轮播的一些属性是：

在lib文件夹中创建一个名为style_carddart的新dart文件。
首先，我们创建StyleCard类，将在后续的DEMO中调用它

我们将制作一个 card 控件 在card控件中, 我们加入一个elevation 属性和一个column控件。 在column中, 我们加入一个container用于包含image, title 和 description 然后在stacked_card_demo页面中使用它。

在lib文件夹中创建一个新的名为stacked_card_demodart的dart文件。

现在，我们将创建一个styleCards列表，并在其中添加一个StyleCard类。

我们创建了八个卡片控件，并在其中添加了image，title和description。 程序运行后，我们将看到一个卡片列表， 当用户向上滑动时，所有卡片都将堆叠在一起； 当用户向下滑动时，卡片都将回到原始位置；
效果如下：

Demo地址： >