成为 Flutter 开发者的最佳途径——完整路线图

为什么选择 Flutter？

这个框架吸引了众多公司和开发团队的关注，它的发展壮大离不开数百万人的庞大社区。事实上，Flutter 是由 Google 创建并于 2017 年 5 月发布的开源软件开发工具包 (SDK)。它包含两个重要部分：

• SDK：一个可安装包中的软件开发工具集合，通过编译器、调试器等帮助您创建应用程序……

• 框架：可重复使用的 UI 小部件的集合，您可以根据自己的需要进行自定义。

更重要的是，Flutter 拥有丰富的官方文档，涵盖了每个初学者所需的教程、示例等内容。Flutter的功能是什么？它允许使用单一代码库构建适用于 Android、iOS、Windows、Mac、Linux 和 Google Fuchsia 的应用，并拥有原生应用的品质，尤其是在 UI/UX 方面。Flutter 的独特之处是什么？与其他需要在代码和原生元素之间搭建桥梁的跨平台开发应用程序（例如 React Native）相比，Flutter 消除了额外的处理步骤，从而显著提升了性能。

因此，在本文中，我想为初学者推荐一个成为 Flutter 开发人员的多步骤路线图。

1. 选择语言：

Flutter 应用的主要编程语言是 Dart，它由 Google 于 2011 年创立。它是一种多平台异步编程语言，具有类型化、面向对象和客户端优化的特点。那么，Dart 与其他编程语言相比有何优势呢？

• 针对 UI 进行了优化： Dart 是一种专为创建用户界面而设计的编程语言，具有完善的空安全等功能，可在运行时保护您免受空异常的影响，并通过删除所有不必要的测试来提高工作效率。

• 最大生产力：由于热重载，代码可以立即重新加载，这是通过Dart 虚拟机提供的JIT编译完成的。

• 在所有平台上都运行速度快： Dart 还使用AOT编译器，将您的代码编译为本机 ARM 或 x64 机器代码，以实现快速启动和一致的运行时性能。

因此，我建议初学者在深入研究 Flutter 的基础知识之前先开始学习 Dart。

一些有用的学习资源链接：

• Dart 语言之旅。

• Dart 编程语言简介

• Dart – 变量

• Dart 中的运算符

练习，练习！

使用适合初学者的在线DartPad代码编辑器，您可以练习代码并提高 Dart 语言技能。

2. Flutter开发环境

在开始开发之前，您需要了解哪个 IDE 是最好的。因此，在我看来，以及许多其他开发者的观点，我推荐使用 Android Studio、IntelliJ 或 VSCode。实际上，这些 IDE 通过提供代码补全工具、语法高亮、小部件编辑辅助、运行时和调试支持以及其他功能，可以帮助您开发复杂的应用程序。

• Android Studio

• IntelliJ

• VSCode

3. Flutter 基础知识

熟悉 Dart 之后，现在是时候开始学习 Flutter 基础知识了。

- Flutter 小部件：

Widget 是 Fl​​utter 应用中每个 UI 的主要构建元素，整个屏幕是一个 Widget，一个按钮是一个 Widget，文本是一个 Widget，等等。

- 小部件类型：

Flutter 小部件分为两类：无状态小部件和有状态小部件。无状态小部件是不可变的，因此它们在程序运行时或在屏幕上执行操作（例如图标、文本等）时无法更改其外观或属性。另一方面，有状态小部件是为视图添加交互的绝佳方式。实际上，它们可以根据用户触发的事件或数据更新来改变外观。为此，您应该重写createState()方法，该方法返回小部件的状态。
访问以下网站，了解更多关于各种 Flutter 小部件的信息：

• StatelessWidget 类

• StatefulWidget 类

- 继承的小部件：

使用前两个 Widget 时，您将获得一个 Widget 树，可以使用Flutter 检查器进行检查。当您想要将数据发送到树中的下一个 Widget 时，必须使用每个 Widget 的构造函数将数据从一个 Widget 传递到另一个 Widget，这是一项耗时的工作，尤其对于大型应用程序而言。InheritedWidget
解决了上述问题，它能够持久化数据并将其传递到 Widget 树，而无需调用每个 Widget 的构造函数。
请访问以下网站，了解有关此 Widget 工作原理和实现方法的更多信息：

• InheritedWidget 类

• InheritedWidget 实现

- Flutter 的必备小部件：

Flutter 拥有一系列强大的基础 Widget，例如 Text、Icon、Row、Stack、Container 等等。这些是你在开发第一个应用程序之前必须了解的 Widget，它们将帮助你创建自定义 Widget。

• Flutter 小部件

• Flutter 小部件目录

• 基本小部件

• 添加与自定义小部件的交互

在探索不同的 Flutter 小部件时，您很可能会遇到两种类型的 Google 设计指南。

Flutter 设计指南：

任何 Flutter 应用都采用 Material 或 Cupertino 设计。Google 构建的 Material 设计系统支持所有平台，不仅包括 Android，还包括 iOS、Web 和桌面应用。事实上，这种设计包含许多支持最佳用户界面设计标准的组件和技术。但是，如果您希望应用看起来像普通的 iOS 应用，则应该使用 Cupertino 库。针对每种设计原则，Flutter 都提供了各种小部件，因此您可以查看以下链接以进一步熟悉 Flutter 设计元素：

• Cupertino（iOS 风格）小部件

• 材料设计组件

- 导航和路线：

大多数 Flutter 应用都有多个屏幕，因此你需要在多个屏幕之间切换，以便根据需要访问不同的屏幕并传递数据。在这种情况下，Flutter 提供了Navigator 类，其主要功能是控制应用程序的导航。

• 导航到新屏幕并返回

• 将数据发送到新屏幕

• 从屏幕返回数据

• 使用命名路线导航

• 将参数传递给命名路由

到目前为止，我们在导航中看到的方案适用于小型项目。然而，随着项目的发展，我们希望使用一个强大的解决方案在一个位置管理所有路线。因此，Flutter 社区创建了自动路线包，它使用代码生成来简化路线设置。

- 资产使用：

为了提升应用的用户体验，我们使用了自定义资源，例如图片、视频、字体和音频。每个元素都是必须包含在应用中的静态文件。请务必仅包含必要的文件，以尽可能减少应用大小。

• 添加资产和图像

• Flutter 图像类

4.高级用户界面：

到目前为止，您可以使用基本的 Flutter 小部件或自定义小部件构建静态用户界面。然而，大多数应用还包含动态屏幕，例如带有彩色加载动画的启动画面、用于数据分析的动态列表等等。因此，现在是时候开始学习如何设计符合您规范的动态屏幕了。

- 动态用户界面：

正如我们已经提到的，Flutter 框架的主要原则是使用 Widget。几乎所有东西都是 Widget，包括那些隐藏在视图之外的元素，例如 Rows、Columns、GridViews 和 ListViews，它们用于对可见项目进行排序。Flutter 提供了多种布局，具体选择哪种取决于您想要如何约束可见的 Widget。
要练习创建布局，请参阅以下文档：

• Flutter 的行和列

• 网格视图

• 列表视图

• Flutter Stack 小部件

- 为您的应用添加交互性：

到目前为止，您可以创建基于 Widget 的静态屏幕来显示特定信息，或创建动态布局来组织元素。然而，至关重要的是，您的应用需要能够以各种形式与用户操作进行交互，例如手势、点击等等。Flutter 
创建了多个有状态 Widget 来实现这一点，例如Checkbox、Slider、GestureDetector、Text Field等等。这些 Widget 能够满足您的需求。

• 创建文本字段并设置其样式

• 点击、拖动和其他手势

• Flutter Slider 小部件

• Flutter Inkwell

- 动画：

此时，开发具有用户交互性的动态用户界面是至关重要的一步，但如果您想让用户在使用应用时获得乐趣，添加动画是必经之路。使用动画来吸引用户对应用各个部分的注意力是一种绝佳的方式。Flutter 提供了各种可直接集成的动画 Widget 来帮助实现动画，例如：AnimatedContainer、Hero Widget、AnimatedOpacity、AnimatedSize、AnimatedPositioned等等。此外，您还可以通过组合框架提供的多个附加 Widget 来构建您自己的动画。

学习资源：

• 动画简介

• 动画教程

• Flutter 精彩动画

• 动画和运动小部件

- 响应式用户界面：

Flutter 框架的主要目标是基于单一代码库构建适用于多种操作系统的应用程序。这意味着您的程序可以显示在各种尺寸的屏幕上，从手表到大型设备，应有尽有。在这种情况下，您可能会考虑设计一个能够平滑适应不同屏幕尺寸的用户界面。
为了解决这个问题，Flutter 提供了两种创建响应式应用的基本方法：

• 使用 LayoutBuilder 类。

• 使用 MediaQuery.of() 方法来构建小部件尺寸。

用于创建响应式 UI 的其他有用的小部件和类：

• 长宽比

• 合身盒

• FragallySizedBox

以下是一些可获取更多信息的资源，包括来自 Flutter 社区的贡献：

• 在 Flutter 中开发多种屏幕尺寸和方向

• 在 Flutter 中构建响应式 UI

• 让跨平台 Flutter 落地页具备响应式

5.网络：

熟悉 UI 开发后，您应该开始学习 API 调用集成。Flutter API 调用可以使用各种软件包进行，例如http、dio、retrofit、chopper等等。您可以从其中任何一个开始，但最好从 http 开始，因为它是构建所有其他软件包的基础软件包。

你需要学习：

• Dart 异步编程概念 

• HTTP 请求方法（post、put、get、delete..）

• 如何在 Flutter 中使用 REST API

• 如何将 JSON 数据转换为 Dart 对象

学习资源：

• 异步编程：futures、async、await

• 异步编程：流

• 可用的 HTTP 方法

• 从互联网获取数据

• JSON 和序列化

6.数据持久性：

您可能需要将数据维护在本地内存中，以便在需要时直接访问其值。针对这种情况，Flutter 社区提供了一些扩展包。但是，出于安全考虑，您应该始终关注要保存的数据。

存储包：

• Shared-preferences：Shared Preferences 包用于将数据以键值对的形式本地存储在设备上。您还应该注意，此包不会以加密形式保存数据。

• Flutter-secure-storage：为了解决之前值保存的安全性问题，Flutter 社区推出了 Flutter-secure-storage 包，该包基于 IOS keychain 和 Android EncryptedSharedPreferences，版本 V5.0.0 及以上。

如果您的应用程序必须存储大量数据同时还要查询它，建议您使用本地数据库，不用担心，您有多种选择：

• sqlite

• 蜂巢

• firebase_数据库

• 对象框

7.状态管理的艺术：

最初，您可以使用 Flutter 团队提出的 setState () 函数来控制屏幕的状态，但随着应用程序的规模和复杂度不断增长，管理应用程序的状态会变得越来越困难。假设您的应用程序有两个屏幕，并且您想在它们之间传递数据。这很简单，只需通过构造函数传递即可。但是，如果您的应用程序非常庞大，需要将值从第一页传输到第五页，则先前的解决方案要求您将相应的值发送给每个屏幕构造函数，直到到达第五页。在这种情况下，状态管理就派上用场了！它的主要作用是集中多个 UI 组件的所有状态，以便处理跨应用程序的数据流。

著名的 Flutter 状态管理库：

• 提供者

• 颤动块

• 得到它

• 获取X

感谢您阅读这篇文章。

结论

通过这篇博客，我涵盖了所有有助于你成为 Flutter 开发者的重要主题。 
祝你编码愉快，下次再见。