包含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 ！

相关问答

Q1: 3、Flutter中ThemeData与AppBar

本次主要是记录Fultter Theme主题的设备与AppBar中的一些属性的使用及说明。目前项目开发有了四个界面。前期主题没太注意，今天看来要好好总结一下近期所学。

首先，Android主题沉浸式设置，Flutter篇：

根据字面意思就能看出来是对状态懒得设置，其中用到了 dart:io 与 flutter/services.dart 这两个重点Mark一下，有时间深入探究一下用法跟能力。回归正题。

主题数据，其中最常用的是 primarySwatch 、 primaryColor 、 accentColor 。

primarySwatch:UI右下角的FloatingActionButton的颜色就是默认取值MaterialColor，

默认是蓝色的，如果修改成primarySwatch，就会变成这个颜色值。只支持MaterialColor。

primaryColor：顶部导航栏和状态栏的颜色修改，需要用到这个属性，类型 Color。

accentColor：前景色（文本、按钮、覆盖边缘效果等)。

看一下项目中的使用

其中 brightness 主题设置较为关键，它是设置状态栏图标与字体颜色的。

brightness: Brightness.dark 状态栏图标与字体颜色为白色。

brightness: Brightness.light 状态栏图标与字体颜色为黑色。

iconTheme ：设置appbar icon的颜色，appbar中icon的颜色会根据primaryColor的改变来确定自身的颜色，这里可以在iconTheme中指定icon的颜色。

默认不做修改前：

Q2: Flutter笔记(三)：设置白色状态栏

在App设计中状态栏纯色的这种设计很常见，但是如果状态栏需要为白色的时候就必须为黑色字体。在Android中已经有很多成熟的方案来处理这种情况，那我们现在看看在Flutter中这种情况该怎么处理。

这里的ThemeData即为控制App的主题，primarySwatch设置即可控制主题的各类颜色，但是这里的颜色是需要MaterialColor，但是纯色种的黑色和白色不是MaterialColor。所以不能设置primarySwatch为Colors.white。

注：MaterialColor包含以下这些

那么就只能使用其他方式设置主题为白色。即为设置

此时我们可以看到App的状态栏如下所示（Android）

虽然AppBar变成了白色，但是状态栏是灰色显然不是我们想要的。

尝试设置文字颜色，AppBar的Brightness有两种模式light和dark

这个和SystemUiOverlayStyle的light和dark刚好相反

然后设置状态栏颜色

设置为红色之后，得到以下的样式，可以看到状态栏为红色了，文字为白色

那么接下来我们只需要将状态栏设置为白色或者透明，状态栏文字设置为黑色。

最后得到以下视图

注：使用PreferredSize包裹，可以更得心应手哦！

SystemUiOverlayStyle在设置时其实有很多系统或者版本的限制

[Flutter]使用主题

flutter设置沉浸式状态栏

）

Q3: Flutter入门这一篇效率文章就够了

本文面向 Flutter 初学者，旨在用易懂的方式带大家入门。除了 Flutter 代码，还会介绍到语法、原理、特性等基础知识。相信本文能帮助你学习和理解 Flutter。

我们先看一下目前的一些跨平台方案，从前端渲染的角度来分类的话，大致可以分为以下几种方案。

WebView 渲染

这种方案就很好理解，现在很多项目都会嵌入 H5 的页面。就是用 JavaScript 等前端技术进行开发，在客户端上用 WebView 来进行渲染。微信小程序目前使用的就是这种方案。

它的优点很明显，使用成熟的前端技术进行开发，学习成本低，开发效率高，并且支持动态发布代码。

但缺点也很明显，在性能体验上，和原生还是存在较大差距的。

原生控件渲染

既然 WebView 的性能不够好，于是就有了使用原生控件进行渲染的方案。这种方案，同样也是使用 JavaScript 开发，区别是它最终是调用原生控件进行渲染的。这种方案的代表是 Facebook 的 React Native。

由于使用原生控件进行渲染，性能体验也会更接近原生。但也只是更接近，和原生还是有差距的，因为它需要频繁的进行 JavaScript 和原生之间的通信，这个通信效率是比较低的。

另外，由于需要适配各个平台的控件，那就有可能出现，系统控件更新了，而框架本身还没有更新，由此产生了一些问题。换句话说，这种方案是受到原生控件限制的。

绘图引擎渲染

接下来就是主角了。

在前端，如果完全不使用原生控件，我们可以通过系统的绘图 API 绘制出一个用户界面。从这个角度出发，可以在各个平台使用一个统一接口的绘图引擎来进行界面绘制，这个引擎最终调用的是系统的 API 绘制的。这样的话，它的性能可以做到接近原生，并且又不受原生控件的限制，在不同平台上能够做到 UI 统一。

Flutter 就是这样的一个开发框架。

一个跨平台 UI 解决方案

Flutter 是由 Google 开发的，一个跨平台 UI 解决方案。换句话说，它原则上只管 UI 的问题，如果涉及到平台本身的一些功能，比如调用蓝牙、摄像头，一般还是需要原生代码去操作。但现在也会有一些第三方库帮我们解决这些问题。

绘图引擎 Skia

Flutter 使用 Skia 作为它的绘图引擎。Skia 已经被 Google 收购，目前很多 Google 旗下的产品都是用 Skia 绘制的，包括 Android。

Android 内置了 Skia，但 iOS 没有，所以在打 iOS 安装包的时候，会把 Skia 一起打进去。这就导致了，用同一份 Flutter 代码打包之后，iOS 的包要比 Android 的包大一些。

开发语言 Dart

Flutter 使用的开发语言，叫 Dart。Dart 也是 Google 自家的，它是一门面向对象的语言，从它身上会看到一些其他开发语言的影子。学习起来难度不大的。

前面讲跨平台方案的时候，可以发现别的方案基本都是用 JavaScript 作为开发语言的，但为什么 Flutter 不用？就因为 Dart 是谷歌自家的吗？这个问题先留着，我们后面会提到。

这里部分就简单点带过了，具体的搭建流程可以在官网查看:

主要的搭建步骤如下:

下载 Flutter SDK

官网下载地址：

由于在国内访问可能受限，官方为中国开发者搭建了镜像：

更新环境变量

解压后，将 flutter\bin 的全路径添加到环境变量 PATH 中。

安装开发工具

理论上，任何文本编辑器都可以用来开发 Flutter 应用，但推荐的开发工具是 Android Studio、IntelliJ 以及 VS Code。因为在这些开发工具上，可以安装官方的 Flutter 和 Dart 插件，得到更好的开发体验。文章里使用 Android Studio 来演示。

如果你打算开发 iOS 应用，则还需要安装 Xcode。

安装插件

在开发工具的插件设置中，安装上面说到的 Flutter 和 Dart 插件。Flutter 插件用于支持 Flutter 的运行、调试、热重载等功能，而 Dart 插件则提供了代码的输入校验、代码补全等功能。

万物始于 Hello World，我们先来创建一个显示 Hello World 的 Flutter 项目。

在 Android Studio 的欢迎页面选择 Start a new Flutter project ，或者通过菜单栏的 File New New Flutter Project ，创建一个新的 Flutter 项目。

创建好的项目里面包含了 android 和 ios 两个文件夹，它们是标准的 Android 和 iOS 项目。我们的 Flutter 代码，存放在 lib 文件夹里。项目创建好后，会默认带一个计数器的示例，我们不管它，把 main.dart 的代码改成 Hello World:

启动一个模拟器，或者连上真机，点击 Run 运行一下，就能看这样一个界面了：

具体代码先混个眼熟就好，具体的后面会再讲到。

在写 Flutter 之前，还要先跟大家简单介绍一下 Dart 的语法。如果你有 Java 或 JavaScript 的开发经验，以及面向对象的编程思想，学起来是很快的。

我们可以在 test 文件夹下新建一个 dart 文件，用来写测试代码。

指定类型

var

但和 JavaScript 不同的是，以下代码在 JavaScript 是不会报错的，但在 Dart 里会报错：

Object

如果非要上面这样写，那也可以。把 var 换成 Object 就不报错了：

和 Java 类似，Object 是所有对象的根基类。但是这样的话，如果想打印一下 num 的字符串长度，是会报错的：

因为 length 是属于 String 的，但系统只知道 num 是一个对象，并不知道它是一个 String。

dynamic

如果还是非要这样写，那也可以。Dart 有一个特有的关键字 dynamic，把 Object 改成 dynamic 就不报错了：

我们运行一下这个文件，可以在控制台看到正确打印出了字符串长度。

函数

dynamic

在 Dart 里，函数也是可以不写返回类型的，不写的话会被当做 dynamic 来处理。这样的话，函数的类型就是 return 的类型，如果没有 return 则是 void 类型。比如可以这样:

运行之后是能正确打印出字符串长度的。

用于传参

Dart 里的函数也是一个对象，所以可以把函数作为参数来传递，比如：

可选参数

在 Dart 的函数传参里，有一个叫可选参数的概念，我们以文字控件 Text 为例，在源码里可以看到 Text 的构造函数是这样的:

首先，在参数里有一个 data，它是要显示的文字内容，是一个必填项。而 data 后面的一堆参数，是用一个大括号括起来的，这些参数就叫做可选参数，意思是这些参数可传可不传。

假如我们要显示一个比较长的文字，又想限制它最多显示两行，就可以这样来创建一个 Text:

可选参数，在 Flutter 里面用的非常多。

异步

Future

在 Dart 里使用 Future 来处理异步任务，比如我们现在延时一秒打印 666，代码如下：

Future 的语法和 Promise 非常像。任务执行成功会调用 then，执行失败会调用 catchError，而无论成功还是失败，都会调用 whenComplete。

async/await

如果你不喜欢上面那种写法，或者是想把异步转成同步，就可以用 async 和 await 这两个关键字来转换。

我们把上面的代码转换一下，写一个 getString 方法，返回的类型是 Future，它会延时返回一个字符串。在 main 函数后面加上 async 关键字，在 getString() 前面加上 await，代码如下:

运行之后可以看到，能正常延时一秒后，把字符串打印出来。这里 getString() 返回的类型是 Future，而 await getString() 则是返回了延时之后返回的字符串。await 要在 async 的函数里面才能使用。

async 和 await 其实是一个语法糖，它最终也是转换成 Future 调用链的形式执行的。

接下来回到 Flutter，Flutter 里最重要的一个概念是 Widget（下面翻译作控件）。

在原生开发里面，我们可能会在界面上区分，这是一个 View，这是一个 Layout，这是一个 View Controller。但在 Flutter 里面，它们全都属于一个统一的模型 Widget。可以说，在 Flutter 界面里，所有东西都是 Widget。

以前学面向对象的时候，我们都听过一句话，叫万物皆对象。我这里套用一下，在 Flutter 里， 万物皆控件 。

具体有哪些控件，我做了一下简单的分类。

根控件

所有的控件都属于 StatefulWidget 或 StatelessWidget 。它们的区别是，StatefulWidget 拥有状态 State ，而 StatelessWidget 没有。

StatefulWidget

当一个控件是可变的时候，就要使用 StatefulWidget 来构建。StatefulWidget 本身不可变，但它持有的状态 State 是可变的。

StatelessWidget

当一个控件状态是固定不可变的时候，就可以使用 StatelessWidget。前面我们写的 Hello World 就是使用 StatelessWidget。

容器控件

容器类控件一般是将某些属性或配置，作用在它的子控件上，比如控件所在的宽高、背景、位置等。

常用的容器控件有 Container、Center、Padding 等。

布局控件

布局控件可以类比作原生开发中的 Layout，通常它会拥有一个 children 的属性，用于接收一个控件数组，对这些控件进行特定的排版。

常用的布局控件有 Row、Column、Stack、Flex 等。

基础控件

基础控件就是常用的文字、按钮、图片等控件。

常用的基础控件有 Text、TextField、Button、Image 等。

功能控件

在 Flutter 里还有一类控件，它们不影响 UI 布局，但带有一些特定的功能，比如页面跳转、事件监听、定义主题等。我们把这一类控件称作功能控件。

常用的功能控件有 Navigator、NotificationListener、Theme 等。

开始写 Flutter 代码了。还记不记得，在 Flutter 项目创建之后，是自带一个计数器 demo 的，现在我们用自己的代码实现一遍。代码修改成如下：

运行之后，就可以看到这样的界面了：

按钮每点击一次，数字就会加一。下面我们来分析一下这段代码，看下里面用到的一些 Widget。

StatefulWidget

由于页面中的数字是跟随状态变化的，所以该页面改用 StatefulWidget。StatefulWidget 并不会直接返回一个 Widget，而是返回状态 State，在 State 里再返回 Widget。

Scaffold

Scaffold 是一个标准的 Material Design 页面，它包含了标题栏、浮动按钮、侧滑菜单、底部导航栏等配置。我们这里用到了标题栏 appBar、页面内容 body、浮动按钮 floatingActionButton。

AppBar

AppBar 就是标题栏，通过查看控件的构造方法，我们可以知道它可配置的属性。

AppBar 的可选参数除了标题 title，还可以配置标题前的内容 leading，右侧的操作按钮 anctions，控件垂直高度 elevation 等。我们只传了 title，其他属性都用默认值。

Center

Center 是一个容器类控件，它的作用就是让它的子控件居中显示。

FloatingActionButton

熟悉安卓开发的应该对这个控件比较熟悉，它就是页面右下角一个特定样式的 Button，参数里面的 onPressed 是一个必填项，要传一个点击之后的回调函数。

根据这个例子，下面给大家介绍一下 Flutter 两个比较重要的特性。

点击 Button 之后，我们把 num 变量加一，并使用 setState 通知状态发生了改变，Flutter 会根据新的状态更新 UI。如果有接触过小程序开发，setState 就和小程序的 setData 类似。

在 Flutter 里面我们不需要用 set 方法来更新 UI，可变控件是和状态绑定的，这就是 Flutter 的响应式 UI 编程。

在 Android Q 和 iOS 13 里都加入了暗黑模式，我们也换一个暗黑主题来玩一下。MaterialApp 里有一个 theme 的属性，我们把它配置一下:

这次改完之后不点 Run 了，我们点一下闪电图标 Flutter Hot Reload ，就能看到界面发生了变化:

这就是 Flutter 的 热重载 ，在修改完代码之后，通过热重载就能马上在设备上看到修改结果，可以很大程度上增加开发效率。

下面再给大家介绍几个 Flutter 里的常见操作。

在 Flutter 里，使用 Navigator 来管理页面跳转，比如要跳转到一个 NewPage 可以这样写:

进栈使用 push，出栈则是 pop。

使用 MaterialPageRoute 会模拟出 Android 上页面跳转的过场效果。

我们来看看怎么显示一张本地图片。

先在根目录新建一个存放图片的文件夹，比如叫 images，把图片 picture.png 放进去。

找到根目录下的 pubspec.yaml 文件，这个便是 Flutter 依赖配置文件，我们需要在这里配置一下刚才的图片：

这样，我们就能使用 Image 控件把这张图片显示出来了：

和 node 的 npm 以及 Android 的 jcenter 类似，Flutter 也拥有一个公共仓库 pub.dev。pub.dev 是 Google 官方的 Dart 仓库，在上面可以找到我们需要的包和插件。

Flutter 本身没有 Toast，我们来接入一个。在 pub.dev 上搜索后，我决定使用 fluttertoast：

按照说明，在 pubspec.yaml 文件里的 dependencies 下配置：

点一下 Android Studio 右上角的 Packages get 同步之后就可以使用了：

我们上面使用的都是 Material Design 的控件，它们都是在 flutter/material.dart 包里面的。如果要使用 iOS 风格的控件，则要用到 flutter/cupertino.dart 包：

iOS 风格的控件，基本都以 Cupertino 开头。我们把计时器页面里的控件替换一下：

效果如下：

代码的部分就到这里了，接下来跟大家聊一下编译方式，编程语言的编译方式有两种。

关于它们孰优孰劣，就要看从哪个角度去对比了。JIT 的话，它的一大特点就是支持动态发布代码，也就是支持热更新。但要是从性能的角度考虑，AOT 会更好，因为在运行的时候不用再进行编译的操作的，运行的效率会更高一些。

回到我们一开始的时候留下的问题，为什么别的跨平台方案都是用 JavaScript，而 Flutter 要用 Dart 来开发。JavaScript 的编译方式是 JIT 的，它不支持 AOT。而 Dart 同时支持 JIT 和 AOT。

Flutter 在开发阶段使用 JIT，让我们用上了热重载，增加了开发效率。在打包时改用 AOT，保证了正式版应用的性能。

最后讲一下大家比较关心的一个东西，Flutter 是否支持热更新？前面说到 Dart 支持 JIT，所以从技术层面它是支持的。但是目前是不支持的，在官方的计划文档中，可以看到:

至于原因，官方在这里进行了说明。总的来说，是由于政策的限制，以及出于对性能和安全性的考虑，暂时不支持了。

到这就结束啦。由于想把 Flutter 基础在一篇内讲完，没有涉及太多细节，如果要写 Flutter 代码还需要深入学习。但相信理解之后再学，会轻松很多。

Q4: Flutter踩坑之旅

记录下自己踩过的坑,怕忘了

一.TextField:

1.去掉输入数字的计数:decoration中的counterStyle: TextStyle(color: Colors.transparent).

2.去掉获取和失去焦点时边框改变颜色的效果:decoration内border: InputBorder.none,

3.去边框时设置BorderSide的width为0或color: Colors.transparent后依然存在边框时,需要设置为borderSide: BorderSide.none

4.设置背景色需要在decoration内     filled:true,   fillColor: Colors.blue同时设置才会显示

二.Uint8List类型和string类型,Listint的转换

连续两次base64解码时,参数只能使用string类型,但是base64解码后是Uint8List类型,此时需要将Uint8List类型转换为string类型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';

Listint转Uint8List:读取接口时获取的数据是Listint的图片数据,想显示时需要转成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可

三.报错:DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...

这是因为dio请求返回的数据默认是以json的格式读取的,而返回的数据是密文形式,需要修改dio的Options的responseType为ResponseType.PLAIN,这样返回的数据就以字符串形式处理.

四.去掉点击控件背景出现的水波纹效果,即去掉md的效果:

在main.dart的MaterialApp内的theme加上splashColor: Colors.transparent

五.布局去掉沉浸式效果和布局设置占满全屏却无效的问题

使用Scaffold的body的布局默认是沉浸式的,将状态栏一起包含了,可以通过在body后添加一层SafeArea即可.

布局设置double.infinity占满全屏高度却无效,大部分情况都是因为某一级的父布局的高度已经有了限制,所以设置充满屏幕只会充满父布局,有些widget默认是按内容填充类似wrap_content就会导致写布局的过程中自己没有限制高度但最后的布局不是自己想要的,可以给各个父布局设置不同背景颜色来查看是从哪儿开始被限制了高度来排查问题.

六.占满剩余空间,类似android的match_parent可以使用double.infinity

七.LinearProgressIndicator

1.LinearProgressIndicator设置进度值的颜色为单一颜色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))

2.给LinearProgressIndicator设置圆角:ClipRRect(

borderRadius:BorderRadius.circular(60.0),

  child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),

  )

八.Expanded:

1.若嵌套多层column且内容的高度都不确定需要占满剩余空间,需要每层的column的内容都嵌套一层expanded来申明每层都占满剩余的空间,否则最里面的内容层需要指定高度,不然会报错

九.Container设置最小/大宽度或高度:

constraints:BoxConstraints(minHeight:56),

十.滑动的widget嵌套:

1.解决滑动冲突:内层嵌套的滑动widget设置physics:NeverScrollableScrollPhysics()

2.解决滑动嵌套ui显示不出来或者报错,内层的滑动widget设置shrinkWrap:true

十一.使用multi_image_picker: ^4.3.4安卓运行报错Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"

1.需要android工程支持androidx,需要在android工程的gradle.properties内添加android.enableJetifier=true和android.useAndroidX=true并点击右上角的open for editing in android studio,运行成功后就可以了

十二.使用textfield时的文字ui总是很高

使用了maxlength且只是在textfield的InputDecoration设置counterStyle的颜色为透明使下面的计数文字消失会导致文字ui很高,counter的计数文字只是颜色是透明但依然在布局中占了位置所以导致文字很高,直接使用counterText:""即可

十三.使用ListView报错Vertical viewport was given unbounded height

需要将ListView放入Expanded内部

Q5: Flutter沉浸式状态栏

手机上面的电量时间的那一排信息，背景变成完全透明文字可切换黑色和白色的时候说明实现了沉浸式状态栏。