后端开发教程 - Java、Spring Boot 实战 - msg200.com
Flutter 开发者指南
Flutter：是什么、如何以及为什么？
设置 Flutter
Dart 基础知识
Flutter 基础知识
国家管理的艺术
Flutter 自从备受期待的发布以来就备受关注，我们也为此感到兴奋！我希望大量的非游戏应用能够迁移到 Flutter，为此，我们也在对团队进行 Flutter 方面的培训。
由于互联网上散布着一些新的但很少的 Flutter 学习资源，因此我们编写了 Flutter 教程，以帮助开发人员开始为 Flutter 开发应用程序。
在本 Flutter 初学者指南中，我们将介绍：
- Flutter：是什么、如何以及为什么？
- 设置 Flutter
- Dart 基础知识
- Flutter 基础知识
- 小部件
- 布局
- 交互式小部件
- 设计应用程序：表单、手势和图像
- 列表和导航
- 联网
- JSON 和序列化
- 依赖管理
- 状态管理
- 测试（单元和集成）
Flutter：是什么、如何以及为什么？
Flutter 是什么？它有何不同？只需记住一点：Flutter 专为任何带屏幕的设备打造，并且兼容：
- iOS 和 Android
- Web 和桌面（Mac、Windows 和 Ubuntu）- 甚至支持 PWA
- 汽车
- Raspberry Pi（POC阶段）
看看这个来自 Google 的视频；这是一个很好的地方来掌握 - 比较原生开发、混合应用程序开发、React Native 开发以及最后的Flutter 应用程序开发。
以下是关于 Flutter 和 Dart 编程语言新版本发布的最新消息：
blog.solutelabs.com
设置 Flutter
Flutter 的设置相对简单，具体取决于您使用的操作系统；您可以查看此官方 Flutter 教程中的步骤：
https://flutter.dev/docs/get-started/install
但如果您确实遇到了某些问题，请查看此处：https ://github.com/flutter/flutter/wiki/Workarounds-for-common-issues#flutter-installation
我们要求您在安装 Dart 之前先安装 Flutter，是因为安装 Flutter 时也会安装 Dart。虽然您可以单独安装 Dart，但这会是一个不必要的步骤。Flutter 会自行决定使用哪个 Dart 版本，因此安装不同的 Dart 版本也会产生歧义。
下载并解压 Flutter 后，在控制台运行 flutter 命令时应该会看到类似这样的内容：
如果您是移动开发新手，您还需要下载Xcode和Android Studio（以及工具链）。设置好 Flutter 后，只需一个命令即可搭建新项目。
Dart 基础知识
Flutter 使用Dart 语言构建应用。想要了解 Flutter 为何选择 Dart，请参阅我之前的博客，并直接跳转到 “Flutter 的诞生”部分。
blog.solutelabs.com
Flutter 和 Chrome 使用相同的渲染引擎 SKIA。它无需与原生 API 交互，而是控制屏幕上的每一个像素，这使其在保持原有性能的同时，摆脱了旧有框架的束缚。
请阅读官方文档，但我发现这个文档很好地解释了 dart
PS：你可以在他们的Medium 账户上关注 Dart 的更新
现在，您知道Google为何选择 Dart 了 - 让我们开始行动吧！
学习 Dart
一旦你有了概述，请前往http://jpryan.me/dartbyexample/并认真完成所有示例。
练习，练习，练习！
首先，在DartPad上编辑你的代码，更好地掌握它。我相信你很快就能上手！
完成 dartbyexample 的练习后，前往练习中心，完成他们的飞镖轨迹。练习中心很流行，所以如果名额满了，你也可以去练习轨迹。
Flutter 基础知识
现在你已经熟悉了 Dart，是时候继续学习 Flutter 了
让我们从这里的技术概述开始：
并使用以下命令搭建一个新的 Flutter 应用：
$ flutter create app_name
你应该看到类似这样的内容：
在 Android Studio 上打开项目，下载模拟器和 Android 版本（如果尚未完成）并运行项目 - 瞧！
了解如何构建项目目录，以及了解哪些文件用于哪些用途
现在你已经设置好了 Flutter，是时候像所有开发者一样去做这些事了！使用其他人的代码 😆 —— 我的意思是设置包文件：pubspec，用 YAML 编写
小部件
记住 - Flutter 中的一切都是小部件
如果您还没有阅读我们之前提到的技术概述，请回去阅读 :) 您将对 Widget 有一个大致的了解。Widget 有两种类型：无状态和有状态
无状态 Widget 是指状态不会改变的 Widget，例如按钮或图片。顾名思义，当屏幕上执行任何操作时，它的状态不会改变。
查看简短的视频系列及其由 Google 提供的文档以进行深入探索（我附上了该系列中的第一个视频）。
当小部件需要保存某些状态（例如PageView中的当前页面、 BottomNavigationBar中当前选定的选项卡）时，有状态小部件是正确的选择。
StatefulWidget 可以保存 Widget 的当前状态。Stateful Widget 没有 Widget 的构建方法，而是有一个State构建方法，该方法会在我们每次显式调用setState时调用。
同样，请查看此处有关有状态小部件的文档（里面有视频）：
Flutter 1.9 在GDD China上发布，带来了一系列新功能，标志着社区正在蓬勃发展（现在你不能忽视中国）
Flutter 中的布局
正如我们之前讨论的，Flutter 中的一切都是小部件 - 包括布局模型。
请查看此处的文档：
行、列和网格等小部件是布局小部件（我们在屏幕上看不到），可帮助其他可见小部件进行排列、约束和对齐。
⏰ Codelab 时间：编写你的第一个 Flutter 应用：第一部分
还有一些其他的小部件！
Flutter 附带一套强大的基本 Widget，例如Text、Column、Row、Stack和Container。这些基本 Widget 可帮助您根据需要创建自定义视图。
如果您的应用遵循Material Design 指南，Flutter 默认涵盖了很多功能。Flutter 提供了多个支持 Material Design 的 Widget，包括MaterialApp、AppBar、Scaffold等。
Flutter 还包含以 iOS 为中心的Cupertino 组件包。它涵盖了CupertinoApp、CupertinoNavigationBar等小部件。
交互式小部件
到目前为止，我们已经了解了在屏幕上显示信息或排列其他小部件的小部件。对于真正的应用程序来说，让应用程序具有交互性并以各种形式（例如手势、点击等）获取用户输入同样重要。
为了实现这一点，Flutter 拥有许多 StatefullWidget，例如Checkbox、Radio、Slider、InkWell、Form和TextField等。这些 Widget 能够维持其状态（例如，我们在 TextField 中输入的文本，无论 CheckList 是否被选中。）
查看下面的示例，将收藏夹/非收藏夹功能添加到您的应用。
⏰ Codelab 时间：编写你的第一个 Flutter 应用：第 2 部分
既然你已经读到这里，你应该清楚什么是 Widget？以及Widget 的类型
现在您一定很好奇 Flutter 中有哪些可用的小部件？
这里有一个 Widget 目录，查看所有让 Flutter 开发变得轻松有趣的 Widget 😍
Flutter 食谱
现在，是时候学习 Flutter 的实际应用了。我指的是那些拥有多屏幕、图像、网络依赖等功能的应用。
那么，让我们开始吧。
设计应用程序
查看下面的应用程序插图。
这个看起来很简单的应用程序具有以下功能👇
-
自定义字体（文本有自己的样式😉）
https://flutter.dev/docs/cookbook/design/package-fonts -
基于方向的文本（横向字体更大）
https://flutter.dev/docs/cookbook/design/orientation
注意：OrientationBuilder与设备方向无关。它通过比较父级 Widget 可用的宽度和高度来计算当前方向。要确定设备方向，可以参考MediaQuery.of(context).orientation。
表格
Flutter 有一个Form小部件，可帮助构建表单，以有效地管理表单的基本要求，例如表单的状态、验证等。请查看以下文档中的完整指南。
手势
为了获取用户输入，并让应用拥有极致的交互体验，我们最大限度地利用了手势。Flutter 提供了一些预置的 Widget 来满足这一需求。
图片
为了让应用美观且引人入胜，我们使用了图片。Flutter 提供了一个图片控件，用于在 Flutter 应用中显示来自各种来源的图片。
- 显示来自网络的图像
- 显示带有占位符和淡入动画的图像
- 有时从网络加载图像并将其缓存在本地存储中以便下次快速使用会很方便。
使用列表显示更多数据
为了容纳更多数据，我们使用 List 来展示。列表可以是水平的，也可以是线性的。
Flutter 有GridView和ListView。它们是基础的 Widget，它们通过不同的组件来区分不同的使用方式。
- 创建网格列表
- 水平创建列表
- 列表可以包含不同类型的项目，例如，标题和附加项目。点击此处了解如何在 ListView 中实现此类情况。
- 使用 SliverList 实现浮动应用栏和嵌套滚动
别忘了阅读Emily Fortuna 的这篇精彩文章，深入了解裂片妖
- 有时我们会预定义一些要放入 List 中的项目，例如设置类别。在 ListView 中，你可以将自定义项目（以 Widget 的形式）传递给其子项。
- 有时，列表中的项目数量会超出屏幕的视口。在这种情况下，一次性构建所有项目是没有意义的。Flutter 提供了ListView.Builder，它使用延迟渲染方法来高效地创建列表项。
如果你的列表中有更多项目，并且想要对它们进行分页，这里有一篇我发现的好文章 👇
blog.solutelabs.com
屏幕间导航（又称路线）
大多数应用程序包含多个屏幕，以便以井然有序的方式显示数据。
在 Flutter 中，我们可以使用Navigator进行导航相关的操作。
查看下图了解 Flutter 如何管理多个路由，稍后我们将讨论如何在它们之间导航。
- 导航到新屏幕并返回
- 将数据传递到新屏幕并检索结果。
到目前为止，我们所看到的方案适用于小型项目。但随着项目规模扩大，我们希望在一个地方管理所有路线。此外，我们可能需要解决以下问题
- 我们有多少条航线？
- 如何初始化每条路线？
- 每条路线需要什么数据？等等。
- 为了有效地管理这一切，Flutter 命名了路线。
- 在命名路由中传递参数。
那么，导航到新屏幕时的动画怎么样？
- 跨屏幕动画小部件
联网
我们现在遇到的大多数应用程序通常都与第三方服务器相连，并向服务器发出请求以获取或发布数据。
在 Flutter 中，我们可以使用 Http 作为第三方发布来做这样的事情。
- 从网络获取数据
- 发出经过身份验证的请求
- 使用 Web 套接字
Flutter 还有更多可用的 pub，可以更高效地完成这些工作。别忘了看看下面的 pub。
使用 JSON 和序列化
在 Flutter 中，我们通常有两种 JSON 序列化的策略：手动解析和使用代码生成的自动序列化。
Flutter 中禁用了运行时反射，导致我们无法使用GSON、Jackson或Moshi等库
点击此处查看包含这两种策略的完整指南：
对于手动解析，不要忘记查看此在线工具来自动生成模型类的样板。
数据持久性
有时我们需要将数据保存在本地内存中，以便在需要时可以快速获取。
- 如果您需要将相对较少的数据存储在键值对中，请考虑使用shared-preferences。以下是使用 Flutter 实现相同功能的详细指南。
- 您还可以读取和写入磁盘上的文件。
- 如果应用程序需要保存大量数据，并且需要查询它们，建议使用SQLite 数据库
Flutter 应用程序可以通过sqflite pub使用 SQLite 数据库。
为了实现易于使用、响应式持久化，请查看以下发布。Moor 是 sqflite 的包装器。
依赖管理
我们在应用中使用了很多pub。这是一种很好的协作方式，可以跨应用共享代码，而无需从头开发所有内容。
您可以从这里找到所有有用的包。
使用多个发布版本时，您可能会遇到诸如版本解析冲突之类的问题。您可以在这里找到使用发布版本时应遵循的所有最佳实践。
至此，您已经完成了 Flutter 食谱。👏
国家管理的艺术
介绍
在典型的应用中，一个常见的用例是，在 A 点所做的更改会反映在 B 点的某些更改。这称为状态管理。也可以通过下图来理解。
Flutter 有多种方法可以有效地管理应用程序的状态。我们可以根据项目规模来选择合适的技术。
这里我们将讨论一些可能的状态管理技术。
- setState 方式
中等的
- 继承的小部件
观看下面的视频来了解什么是继承的小部件？
另外，请在此处查看完整的文章列表。
还记得之前用过的“Theme.of(context);”和“Navigator.of(context);”吗？它们都使用了相同的继承 Widget 概念来访问 Widget 树中的数据。
- 提供程序包
该提供程序是使用小部件为小部件构建的 DI（依赖注入）和状态管理的混合体。
提供商的官方文档太好了，无法深入了解。
- BLoC 模式
BLoC是一个简单、轻量、高度可测试且可预测的 Dart 状态管理库。
以下是Bloc的官方指南：
我还发现了这个很好的视频系列，解释了 BLoC 模式（以及配套的文章系列）
测试
随着应用规模的增长，测试每个功能变得越来越困难，甚至会出现回归问题。在这种情况下，自动化测试是最佳选择。它有助于确保应用在发布前达到预期性能。
这样我们就不会陷入这种情况。😆
自动化测试分为三类
点击此处查看 Flutter 测试简介
单元测试
单元测试的目标是测试具有存根/模拟依赖项的特定代码单元。验证代码在不同场景下是否按预期工作。单元测试速度非常快，并且不需要实际设备即可执行。
在进行单元测试时，任何依赖类都应该是可注入的，这样我们就可以注入依赖项的模拟或伪造实现，并验证一切是否按预期工作。Flutter 有一个mockito框架，可以帮助创建模拟或伪造实现。
小部件测试
Widget 测试（在 Flutter 中）是一种 UI 测试技术。Widget
测试的目标是测试特定 Widget 的 UI 是否符合预期，并且是否可交互。Widget 测试不需要物理设备。
我们还可以测试Widget的属性，如颜色、大小、字体系列等。
我们还可以执行用户事件，如点击、手势、输入文本等。
集成测试
集成测试以成对的方式进行。其目标是测试多个单元如何协同工作。集成测试在真实设备或模拟器上进行。
我们可以触发一系列用户交互事件并期望 UI 渲染或单元代码能够正确执行。
BDD：行为驱动开发
当利益相关者拥有强大的技术技能时，TDD（单元测试）会很有帮助。BDD 的核心是从最终用户的角度编写测试用例。测试用例是用自然的英语编写的。
测试用例可以采用以下格式编写：
Given：场景开始时的初始上下文，一个或多个子句；
when：触发场景的事件；
then：预期结果，一个或多个子句。
在内部，行为测试用例可以是单元测试、小部件测试或两者的组合。
BDD 有助于从最终用户的角度理解软件功能，并成为一种功能文档。
Flutter 有一个gherkin，可以帮助我们编写行为测试用例。
本指南涵盖了 Flutter 入门和开发应用所需的所有基础知识！希望它能为您的 Flutter 之旅提供帮助。
文章来源：https://dev.to/solutelabs/a-developer-s-guide-to-flutter-37f1