flutter 如何全局监控UI异常

哈喽，大家好，我是欧阳锋，二零二四年了，如果你还不知道 flat 那你就 out 了，赶紧带上你的电脑跟我一起学习 flat 吧。好，我们开始第一课啊，那么首先呢啊我们先来认识一下 flat 啊，那么 flat 到底是什么呢 啊？简单来说呢 flat 就是一个跨平台的前端开发框架啊，性能堪比原声 啊，目前呢已经支持编译成安卓 ios， 麦克 os， windows， linux 以及以及外部应用，也就是说呢它基本上是呃覆盖了全平台啊， 那么 flat 的这个框架使用的语言呢是 dat 啊， dat 呢是一个呃面向对象的静态类型的编程语言啊，那如果你还不知道呃 flat 可以啊，开发什么样的一一一个应用呢？这里我可以简单的给大家看一下啊，我使用 flat 啊开发的一些案例啊啊这里给大家介绍两个两个应用啊，第一个呢是象棋助手啊，我可以打开给大家看一下象棋助手。 好，那这个呢就是使用 flat 啊开发的一个啊应用啊，这个大。目前大家看到的这个呢是一个呃桌面平台的这样一个应用啊啊这个是一个呃打谱软件啊啊我们可以看一个这个棋谱啊， 那这个呢就是使用 flat 啊开发的一个呃象棋打谱呃学习软件啊，目前呢它已经是呃覆盖了全平台 啊，安卓 ios 啊， windows， mac， linux 都可以用啊。那么这个呢是使用啊 flat 开发的啊啊目前已经有啊大量的用户在使用这个软件啊，那么再给大家看一个软件啊，这个软件呢是 呃我在二零二一年啊开发的一个呃，开园的啊 啊，桌面软件啊，他其实是类似于锤子科技的这个 handshack 啊，是一个安卓的手机助手，通过这个软件呢，你可以去管理你手机上的像这个图片啊，照片呀，然后还可以呢，去管理你的你的应用 啊，那么还可以去管理你手机的通讯录啊啊，软件的这个啊， 卸载等等啊，那么这个软件呢，大家可以通过 github 呢去找到啊，这里呢，我也给大家放了链接，我可以打开给大家看一下啊， 但这个软件呢，呃，我在当时做的时候呢，其实对 flat 呢啊并不熟悉啊，所以这个代码其实写的也并不好啊，那么这个我们可以将来有时间呢，我们可以自一起去完善它啊。 好，这个就是大家看到的这样一个啊，开源的这样一个软件啊，这个也是使用 flat 开发的啊，这是我啊使用 flat 开发的两个呃，这个软件的一个案例啊， 所以大家就知道这个 flat 它的这个表现形式其实是呃非常强的啊啊，这个是桌面应用 啊，然后刚才说的这个相机助手呢，其实他不仅仅是桌面应用啊，既有桌面的又有移动端的啊，两端都有，甚至有外部端的啊，这个呢，大家可以私下里去了解啊， 好，了解了这个啊 flat 开发的两个案例之后呢，我们就继续往后面学习啊啊，那么在学习 flat 之前呢 啊，我们假设你已经至少掌握了最基础的大腿与法啊，并且呢已经了解了最基本的 android ios 的应用开发知识 啊，这个是因为呢，呃，尽管我们的 flat 它是一个前端的开开发框架，但是我们难免会与原声应用呢有一个呃打交道，所以呢，你至少应该了解最基础的安卓 ios 的应用开发知识 啊，那么这个我相信大家呢，呃应该是不难的啊，那么第一个呢，你至少已经掌握最基础的大腿语法啊，因为我们的 flat 是使用大的语言进行开发的啊，所以在呃使用 flat 之前呢，你应该去 了解并且掌握最基础的大腿语法啊，那么这个呢，我们在呃讲解的过程中呢，如果遇到一些生僻的一些语法呢，也会有一些简单的介绍啊。 呃，当然最好呢是你已经掌握了他，那么这个这个时候呢，你在呃听我们这个课程的时候呢，就会呃比较轻车熟路啊。好，那么接下来呢，我们就开始搭建这个 flat 的开发款开发环境啊，那么这里呢，我是以 mac os 作为一个开发平台啊，使用 vs code 呢，作为我的主要开发工具啊，所以这里呢，我们先打开官网啊，呃， flat flat 点 d， e， v， 然后通过官网呢，我们给大家讲解一下啊，这个具体应该怎么样去做？你看这里有一个安装 flat， 点击它，然后呢，我们选择 mac os， 选择麦克 os， 我们开发的应用假设是一个 ios 的应用啊，点击它，然后我们继续往下啊 安装 flat 啊，这里呢，我们选择下载和安装，然后这个时候呢，大家看，这里提供了两个链接啊，一个一个呢是英特尔的这个啊处理器，一个是啊，苹果的处理器啊，这个呢要根据大家的 呃购买的这个电脑的情况来选择啊，你像我的电脑呢，是啊， m 系列的芯片，所以这个时候呢，我要选择这个啊，选择这个， 然后下载完了之后呢啊，你可以把这个 zip 包解压啊，解压放到一个目录下边啊，放到你的呃， 你自己想放的这样一个目录啊，这里呢，他推荐是放到这个地方啊，我们的用户目录的 development 这个目录下面啊，这个当然是呃看你自己的喜好了啊， 然后翻到这个目录下面之后呢，我们还要去配置他的环境变量啊，这个怎么配呢？这个可以给大家讲解一下哈，例如说我们可以看一下当前啊呃大部分同学呢你你的终端默认 的使用是 banch 啊，作为一个呃终端啊，作为一个你的一个终端类型，但是我的这个终端呢是 z s h 啊，如果是 z s h 的话呢，那我们需要配置的环节变量应该是在呃，我是习惯于在点 z s h r c， 也就是说当前这个目录下面，大家注意看左边这个波浪线，这个目录下面会有这样一个文件啊， 点 z s h r c 啊，就这个文件啊，我是习惯配置在这里好，到了这里之后呢，我们可以往下 啊看一下我配置的啊，往下还要往下。好，大家看这里这里，你看我配置的这个 呃 flat 的这个黄金变量啊，这里的配置的方法呢就是我们呃， 首先呢是 dollar pass， 这个指的是呃原来的这个呃 pass 的环境变量，然后往后面通过冒号附加一个啊 flat 的一个并目录的这样一个环境变量啊，这样子呢，就配置好了 啊，然后下面这个是什么呢？下面这个其实就是说我们的呃， flat 的一些依赖呢 啊，使用中文的这个网站里面的一个镜像啊，中文网的一个镜像，这样子呢，我们在下载依赖的时候呢，就会呃快一点啊，如果你是中国大陆的这个环境呢，就会快一点， ok， 好，那么通过这两这样的几个步骤哈，我们的这个环 环境变量就已经配置好了，那怎么样验证这个环境变量配置是否 ok 呢？也很简单啊，我们使用 flat 啊，干干 version 啊，这个呢是通过他去看我们 flat 的一个版本啊，还有一个更好的方式呢，是通过 flat doctor， 那这个意思就是说 flat 的呃，医生啊，执意过来就 flat 的医生。通过这个命令呢，我们可以看到我们当前配置的这个啊， flat 环境的一些问题啊，我们回车啊，然后等它执行完啊，等它检测完。 好，那这个时候大家看，如果你是正常的，那是打勾的，那这个时候安卓，安卓的工具链啊，它提示我们有一个，有两个 c m d line tours 是缺失的，还有 enjoy the lessons 是未知的，让我们运行这个命令去啊，同意这些啊，证书等等， 那下面的全是勾啊，就表示我们当前的安卓工具链呢，是有一点点问题的啊，这里呢我就不去改了啊。啊，那么这个大家如果在配置过程中遇到问题的话呢，可以在啊通过弹幕告诉我们啊，也可以在视频下方给我们留言， ok， 好， 那这个呢就是我们去配置 flat 的一个开发环境啊，那环境配置好了之后呢啊，我们就可以呃 进行开发了啊，这里呢，我们，呃还有一个步骤啊，我们刚才遗漏了啊，就是去配置我们的 vs code， 因为我的这个开发工具呢用的是 vs code 啊，那 vs code 大家去 微软的官网啊，去下载一个，下载完了之后呢，我们在这里点击它，就这个地方啊有一个 extensions 啊 extensions， 然后呢我们搜索 flat， 搜索它好，搜索到 flat 之后会这个地方呢会有一个插件，这里我已经安装好了，如果你没有安装的话呢，你点这里的 install 安装，安装好了之后呢，包括这个 flat， 包括这个大的环境呢，都会自动给你安装好， 那么安装好了之后呢，就可以使用这个 vs code 呢进行啊 flat 软件的开发了啊， 好，那么呃配置好了按 flat 开发环境之后呢，我们就开始啊编写我们的第一个 flat 应用啊，这个我们是呃还 是按照这个比较俗套的方式来给大家进行讲解啊，那么怎么怎么样去创建呃第一个 flat 应用呢啊，这里啊，我给大家演示一下啊， 这里呢，我们使用命令函句创建第一个 flat 应用啊，首先第一个 flat great， 然后这个后面啊 flat great， 后面呢就可以呃写我们的这个 flat 应用的名称啊，这里呢，我们就叫做 hello world 啊，回车， 好，那么这个时候呢，我们的 flat 这个项目呢就已经创建好了啊，我们可以通过 vs code 呢打开给大家看一下啊，点击它啊，这里我们先去新建一个窗体，好 cd 啊， open 点，然后呢我们去打开它， hello word 往上面一拖。 好，那么这个呢，就是 hello world 的一个项目结构啊，这里的 lab 呢，就是我们的原码部分啊，然后这里的 android 啊，其实它是对应我们原声的一一部分代码啊， 最后呢，我们打包也都是通过这个安卓的下面的这个文件夹去生成的啊，通过这个 lab 呢，呃，下面的这个原码呢，会编译成啊， so 文件啊， ios 也是一样的啊，那么我们首先来看一下这个 flat 的一个原码，点击它。好，那这个呢，就是它的一个原码啊，这里目前大家可能还看不懂啊，这里呢，我先运行啊，给大家看一下啊， 怎么运行它呢？这里需要用到一个命令啊， flat run 杠 d， 杠 d 呢，就指的是我们运行到哪一个平台啊，这里呢，我们直接运行到一个 chrome 浏览器里面吧啊，回车 稍微等待一会，好，这个呢就是 hello world 应用的一个样子啊，我们点击右下方的这个加号，这个中间的数字呢会递增啊，大家看 好，这个呢，就是一个最基础的一个 flat 应用啊，最基础的一个 flat 应用。 好，那么这节课程呢，我们就到这里啊啊，这个课程呢，主要是给大家啊，主要是主要是带大家简单 认识一下 flat 啊，了解这个 flat 呢啊，是什么样的一个东西啊，怎么样去配置他的开发环境啊，怎么样去 编写它的第一个应用啊，那么下节课呢，我们再来给大家讲解啊， flat 当中的一些啊具体的知识点啊。好，今天的课程呢，我们就先到这里啊，大家可以先点击关注啊，我们下节课再见。

欢迎光临，我们为什么要学习弗拉特呢？我这里有两点理由，第一，弗拉特能够拓宽我们的编程思路。第二，弗拉特的开发效率和运行效率都是业界领先的水平。弗拉特他是一个跨平台的开发工具，他的性能非常的优秀， 并且我们的代码可以编译成安卓、 ios 等等各个平台。其实我们都知道编程是一种思维方式，那我们在挑选编程语言的时候，是要挑选那些能够拓宽我们编程思维模式的语言。 比如说你对大前端开发感兴趣，那你之前没有接触过声明式编程或者函数式编程，那我强烈建立你学一下弗拉特，因为弗拉特可以拓宽你的思维方式。我们讲编程大体上分成三种范式，分别是命令式编程、函数式编程和面相对象。那命令式编 成我们关心的是解决问题的步骤，我们所要描述的是解决问题的一个一个的步骤，那在这里边最著名的就是思议员。面向对象，我们关心的是对象和类的抽取，以及对象和对象之间的关系，那比如说就是加了函数是编程，我们最关心的是数据的映射。 给大家举个例子，比如说你想让你们家的宝宝去买一瓶酱油，如果我们用命令式编程的方式来写的话，那就是打开门，按电梯，下电梯，出 楼道右转走到头，右手边有一个小超市，进超市在货架上挨个寻找，直到一个玻璃瓶，上面写着海天黄豆酱付款。出门左转走到头，上电梯进门 就是命令式编程。我们如何去描述这个的方式，那如果是函数式编程呢？就是下面这样的，去小超市买一瓶海天 牌的黄豆酱就 ok 了。他们的本质区别在于命令式编成我们是在描述一个一个的步骤，而 函数式编程其实程序员描述的是我们想要达到什么样的效果，具体的实施步骤其实是由框架来做的。那弗拉特兼具了面相对象和函数式编程的特点，在底层他是一个面相对象的方式， 我们在构建基础 ui 组件的时候，使用的都是类克拉斯，但是 flat 在构建 ui 层面的时候，他是一个声明式的 ui， 他的编写方式其实是函数，是编程的方式，他就 有函数编程的特点，那这种声明是 ui 的方式，非常适合于界面的编写，而且目前主流的 ui 开发框架都已经转向了这种 声明式的 ui， 比如说苹果最新的 siri ui， 还有安卓最新的 ctrl 等等。所以普拉特这种声明式 ui 的编程思想是非常值得我们去学习的。 并且弗拉特是谷歌推出的开平台开发框架，它可以编辑成 ios、 安卓迈克威克斯、 windowslenex、 太编可以编辑成网页，就是我们写一套代码可以编译成 n 个 app， 可以部署在 n 个不同的平台上，就是他 首先这样我们的开发效率就是非常高的。第二点呢，他的性能非常的好，用 flata 开发出来的 app， 他和原声开发的性能是不相上下的，他比 rendake 等方案要快非常多， 性能要好好很多，而且他生成的文件非常的小，比我们使用以来创开发出来软件小小很多。 然后最后再提一句，类似弗拉特这种声明式的 ui， 他是未来大前端开发的主流，目前前端开发的主流的 rex 和 vivo 都是声明式的 ui。 而 ios 最新的开发框架 suvifui， 安卓最新的开发框架扛 pos， 都是这种生命式的 ui， 他们的核心思想都是类似的，所以我们可以好好学一下普拉特，把这种普拉特的编程的思想学会了之后，学 熟练了之后，其实你将来去使用其他的，比如说所有的 ui， 安卓 ctrouss， 甚至于你去使用 reaxue， 都是非常的方便的，转换起来非常方便。最后再提醒一下大家，在学习的时候一定要多写代码，不要光看，一定要多写 okcu 人。

哈喽，大家好。嗯，最近在研究 flatter， 然后我在温德斯电脑上装完之后一切运行都 ok， 然后在麦克上装完之后 苹果的那个模拟器他是运行正常的，看一下苹果这个，然后 安卓的那个他出现了错误，错误虽然我已经解决了，但是， 嗯，有必要给大家录一下，录一下看是怎么回事。 这个是苹果，苹果的，看一下苹果是 ok 的，看这是控制台 逆行的速度还是相对来说很快的哦，这个是用了十一的洁面， 苹果做的这个模拟器还是非常棒，已经装成功了，他就这个界面，这个显示已经成功了。 welcome to flatter， 快写。哈喽，看， 这已经成功了，然后在 在那个 安卓上还出现了问题。嗯，我先把 苹果这个模拟器先一关 lost 看看是，嗯，丢丢失连接了，然后把安卓的这个打开，这个， 嗯，这个其实已已经那个啥了，这是之前我把那个所有的弄好之后出现的界面，然后现在我们去运行到他这个里面会发现有一个报错，安卓里面他其实看 虽然这种错误，他说这个弗拉克这个应用这个文件有问题，我是在这里面放着这个滤镜， 这个，嗯，错了。 tos， 然后这个里面他说这个 一百七十一行与错误， 昨天他报的错，然后我根据 你看他是没有这个 ul 地址，昨天报了，呃，因为变异的时候老是出现卡顿，然后 根据网上搜索教程去把这两个替换了，这个替换了，还有这个地址也替换了，替换之后， 然后变异的时候他就出现我们现在这个错误，他现在这个错误需要怎么办？需要我们在环境配置里面加上两个 变量，那两个变量就是这两个变量，一个是 poss url， 还有一个就是这个就这个地址，就把这两个加上， 加在黄金边链里面，你大家可以根据自己的电脑的配置来加一下，我的是 是 vsa 十二 c， 我的是这个，这把这两个，因为我昨天就是用这种方式成功的 关掉，关掉关掉，把把咱们的编辑器重启一下， 其实出现这个界面基本上已经 ok 了，因为他是在那个，就刚才我们配置的那个两个王者里面去 去下载配置呢？还是什么鬼？现在运行 昨天出现这个错误，一下弄了好几个小时没搞定，最后发现是这两个问题，然后现在就可以看这个是 welcome to flatter 这个，因为这个是之前弄成功时候的界面，然后现在是有刚才我们改的那个 hello 看，现在已经连成功了， ok 了，看 hello success 看成功， 一切也 ok。 好，就这么一个小问题，拜拜。