flutter chewie自定义

哈喽，大家好，我是欧阳锋，二零二四年了，如果你还不知道 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 当中的一些啊具体的知识点啊。好，今天的课程呢，我们就先到这里啊，大家可以先点击关注啊，我们下节课再见。

本课，我们将在 windows 系统上安装 flatter。 现在，如果你使用的是 micros， 那么我希望您跳过本课程，并直接在 micros 课程中安装 flatter。 现在，让我们开始在 windows 设备上安装 flatter。 因此，导航到 flutter dam 并单机开始。现在，我们将在这里选择 windows 应用程序中的第一个应用程序将是移动应用程序。所以点击手机 现在稍微滚动一下。您可以看到，在我们的开发工具中需要安装适用于 windows 的 get， 因此，单击 get for windows。 点击下载。 现在已经下载了 gate， 让我们进入上一部分。现在，我们需要安装这个 android studio。 此 android studio 附带 s d k 平台工具，以及 android 的开发所需 的许多其他工具。因此让我们继续安装它。所以，点击 android studio。 您将被带到 android studio 页面。现在点击下载。现在您可以下载 android studio。 您的版本可能与此版本略有不同，但这并不重要，因为我们不会在 android studio 上进行编码。 我们只会安装它附带的工具和 s d k。 所以点击下载接受条款和条件，并下载适用于 windows 的 android studio。 head up。 现在您的下载应该很快就会开始。 现在我们的 git 已经下载好了，让我们安装它。这将打开安装程序。 如果有任何以前的版本，那么该向导将自动删除它并安装新版本。安装完成后，您可以取消 选中所有复选框，然后单击完成。现在，在下载 android studio 的同时，让我们转到上一页。 从这个开发工具列表中，我们已经下载并安装了适用于 windows 的 beat。 我们的 android studio 正在下载。下载完成后，您可以继续安装此版本的 android studio。 那么让我们从 android studio 安装过程开始吧。 现在您的版本可能有点不同，但这并不重要，所以点击下一步。然后我们将需要这个 androi 虚拟设备，所以也单击下一步。然后你不需要改编这个，单击下一步，然后点击。安装。 此安装过程可能需要一些时间。完成后点击下一步。然后您可以取消选中此选项。稍后，我们将进入 android studio， 所以点击完成。那么回到我们的需求列表。我们已经下载并安装了 windows baggage。 我们已经安装了 android studio， 所以现在我们需要一个文本编辑器来编写我们的代码。所以我们选择了 window studio code。 不过 we do studio code 的安装是在下一刻，所以我现在要跳过这个。我们不需要从这里下载任何东西。现在重要的部分，我们需要安装 flutter software development kit， 也称为 flutter s e k。 现在单击下载并安装。 现在您可以将此 sick 文件下载到您的系统中，所以点击下载，然后你的下载就开始了。下载可能需要一段时间才能完成。您当前下载的 floater 版本可能与此版本 略有不同，但是这没关系。现在下载完成后，让我们继续解压这个 zip 文件。我们需要解压该文件，以便我们可以将其用作 s d k。 因此双击该文件并全部解压。 现在你可以根据需要选中字框，这将显示已提取的文件。现在单击提取。现在一旦提取出来，这就是他应该的样子。因此，在这个文件夹中，我们将有一个 flutter 文件夹，它是我们的软件开发工具包。 正确，现在导航到此并目录。您可以单击此处并复制此路径。 现在复制后，我们将将此路径粘贴到我们的环境变亮中。因此即按 windows 键，然后输入 e m v， 意为环境。你将会得到这个单机此编辑系统环境变良， 然后单击环境变亮。现在双击该路径，创建一条新路径。您可以将您的目录粘贴到此处，所以点击确定。好的，好吧，现在让我们测试一下我们的 flatter sdk 是否工作正常。 因此单击 windows 键，然后输入 c， m， d 及命令提示符。因此启动命令提示符。然后在命令提示符中输入 flutter doctor。 现在只讲解查我们的 flatter 安装是否一切正常。在这里你可以看到我们有两个错误发生。第一个错误是 是因为我们尚未完成 android sdk 组件设置。我们很快就会这样做。由于我们尚未安装文件或程序，因此触发了第二个错误。这是开发 windows 应用程序所必需的， 但我们不需要 windows 应用程序，所以我们可以忽略这个 visual studio 错误。正确的，那么让我们继续启动我们的 android studio。 所以我们可以下载 android s， d， k 并安装在我们的系统中。 所以你现在可以关闭命令提示服并启动 androids。 都有，所以你可以点击下一步。你可以选择这个标准。 然后您将看到将要下载的内容的列表。将下载 android 模拟器和其他不同的 s， d， k 工具，所以点击下一步。 然后你就可以接受所有许可证，你也可以接受这一点。你可以接受这一点。然后点击完成现在下载和安装过程将开始。这将需要一段时间。 安装完所有内容后，您可以单击完成并完成设置。安装后，您将看到此对话框，单击更多操作，然后单击 sdk 管理器。我们需要安装一些东西来让我们的平台做好准备。现在单击 sdk 工具， 并检查这个 android s d k 命令行和这个 n d k 现在单机应用。确认这一点， 这将下载所需的命令行工具。然后是 ndk 工具。下载并安装所有内容后， 单机完成。已完成设置，现在单机应用，然后单机确定。现在打开命令提示服，并输入 flutter doctor。 那么现在 flutter 就能够找到我们的 android studio 了。但我们尚未接受许可证。他建议我们运行此命令， 因此让我们复制此内容。已接受许可。好吧，因此复制此内容，然后将其粘贴到此处，现在点击进入。因此，当你运行此命令时，大多数人可能不会受到此错误。 但对于那些遇到此错误的人，让我们继续调试他。现在，如果你没有受到任何错误，那么你可以跳过一点，然后继续上课。 好吧，当 android s d k 的命令行工具中存在版本不匹配时，我们会收到此错误。因此，如果 您收到此错误，请打开您的 android studio。 点击更多操作。 s d k 管理器。现在切换到这个 s d k 工具， 并且你想取消选中词隐藏过时的软件包。好吧，然后你需要导航到此 android s d k 命令行工具。现在你可能已经正确安装了这个最新版本，所以取消勾选这个。你需要下载这个八点零版本。 好吧，所以点击应用。好的，然后将安装支持的版本。现在我们将能够接受许可证。好吧， 那么我们就等待安装完成吧。安装后单机应用。好的，关闭您的安卓 studio， 然后重新 先启动我们的命令提示服务。现在再次运行 flutter doctor。 现在让我们复制该命令，然后将其粘贴到此处。好吧，现在输入 why， 意味着你想接受这一点。又是 why？ why？ why？ 我们已经接受了所有这些许可。好吧，那么让我们再次运行这个 later doctor 命令。 所以在这里我们可以看到许可证错误不再出现了。但我们仍然收到两个错误。 第一个可以忽略的错误是我们没有开发适用于 windows 的应用程序，所以我们可以忽略这一点。关于第二个错误， 您的 flutter doctor 命令可能不会收到此错误。现在如果你没有收到此错误，那么本课你可以跳过一点， 并开始安装模拟器。但如果您收到此错误，那么这就是你可以解决这个问题的方法。所以，为了修复这个错误，导航到安装 enter studio 的文件夹。在大多数情况下， 安装在本地 c 盘程序文件安卓，然后是安卓 studio。 好吧，如果您之前在安装时更改了位置，然后您就可以继续找到该位置。现在，一旦您进入该目录，我希望你打开这个 jbr 文件夹 控制。这意味着您想要复制所有这些复制，然后导航到此 j r e 文件夹， 然后把它粘贴到这里。现在你想要替换该位置中的所有文件。所以一旦这件事完成了，再次导航到命令提示服务。 现在让我们再次检查一下这个 flutter doctor 命令。在这里您可以看到一切正常， 并且这个错误可以忽略。好吧，现在运行这个 letter doctor 时，如果您收到任何其他错误，然后你可以向 google 寻求帮助，或者对战一出，或者聊天 gdp。 好吧， 这是在设备中安装 water 的标准方法。现在让我们开始安装模拟器。现在您可以再次打开 android studio。 现在让我们创建一个模拟器。因此请单击更多操作。然后是虚拟设备管理器。现在单击这个加号图标， 然后让我们选择我们的设备。我建议您从手机类别中进行选择。然后是像素七，但 击下一步。现在如果没有 pixo 七的选项，然后你可以选择任何一部手机。没关系，现在单击下一步按钮。现在我们将选择要安装在该设备中的 andro 的版本。我目前有这个倒置的蛋糕。 当我添加安装 android studio 时，你可以看看这个 android 版本中的任何一个，或者你可以下载任意 android 版本已在您的设备上使用。目前我的设备中仅提供此功能，所以我想选择这个和下一个。 一切似乎都很好，所以现在点击完成，我们的设备将被创建。现在，如果你想启动该设备，您可以单击此播放按钮。 他将启动我们的模拟器。模拟器的首次启动可能需要一些时间。 现在只剩下我们的 water 应用程序开发了，就是安装 video studio code。 所以我们将在下一刻中安装它。那么我会在那里见到你。

flatter， 一个构建苹果安卓网站的界面框架。 flatter 是高性能 c 加加和 doctor 语言的结合，使用 doctor 语言进行开发。 dart 提供类型安全检查和有状态热加载，可以帮助你构建可靠的应用。在生产环境中， dart 会编译成本地机器码，意味着界面可以在任何平台上漂亮的显示，然后运行 flutter creat 的创建应用。现在打开 main dart 等键，你就在这里编写代码。布局就像一棵树， 框架提供百余种内件组建，向动画滚动布局等。你可以通过继承无状态的组建构建自己的组建，然后重写 biu 函数。 有个重点是在发扯中任何东西都是 vj， 这个函数返回 vj， 他的子 vjj 返回 vj。 这 这样我们就得到一个声明式的组建结构，这样你可以使用 flatter 的工具查看组建。当组建输入数据改变时，会自动调用 built 函数重建界面。不状态组建是不可变的，并且没有内部状态。当你需要根据用户输入改变内部状态的组建时，你可以继承 safe v j 定义。在这个类中的属性是响应式的，比如这里的 count 属性。然后在 beer 的函数中有个巴特组建，当巴特被按压后，会调用 state 的更新 count 属性进行递增， state 告诉框架状态有更新，需要重新绘制界面。 现在你可以在甄姬中运行福阿特应用。现在我们对此组建做下改动。对这个按钮加一个居中并修改颜色。无需编写代码，仅需点击巴特的同时按住 control shift r 后选择 三特，然后改变巴特的颜色，并且左边会显示当前的颜色，然后在命令行输入二将会存在应用，仅需几百毫秒的时间就可重新构建新版应用，并且注意 ctrl 状态并没有被更新，这就是 fat 带给我们舒适的开发体验。 如果大家喜欢请点赞、关注、评论，这将极大的帮助我输出更多的视频，谢谢大家，我们下个视频见。

福拉特二点零发布有些时热了，如果你想找基础组件或项目练习，那么福拉特用内的就很适合你。整个项目收入了三百多个组件， 每个组件至少有一个演示展示和代码展示。所有的演示展示都是普拉特的组件形成的，而非图片，这就意味着可操作性更高。我们可以很直观的知道一个组件的搭配和使用。 得益于普拉特是跨平台的框架，普拉特幽灵台的作者也为我们提供了五个平台的下载地址，供大家下载。

什么 nm， js 和伊莱克创用哪个好？伊莱克创你可以用啊，如果你是做大前能开发的话，你用伊莱克创去写桌面程序，这是没问题的。 我自己更推荐弗拉特，因为弗拉特写出来的程序我自己做对比比以来创的性能要高，而且他的就是编辑出来东西带呃， 大小要小很多。伊拉克创你动折编一个东西都是上百兆甚至非常大。但是你用 flat 编出来的东西，如果你本身功能不是特别复杂的话，他就会相对还是比较小的。伊拉克创意有点臃肿，如果就是你是一个前端工程师，然后你家 surprise 和 notex 用的比较熟的话，你用伊拉克串写也是没问题的。