Flutter 为前端 Web 开发人员

我最初是一名前端 Web 开发人员，后来成为了 Flutter 开发人员。我认为有一些概念帮助我更容易地采用 Flutter。也有一些新的概念是不同的。

在本文中，我想分享我的经验，并通过展示概念如何转移以及任何新概念都是可以学习的，来激励那些因选择一个生态系统而感到瘫痪的任何人。

转移的概念

本节展示了前端 Web 开发和 Flutter 相似的部分。它解释了如果您开始使用 Flutter，您已经拥有的技能将对您有利。

1. 实现用户界面 (UI)

为了在前端 Web 中实现给定的 UI，您需要组合 HTML 元素并使用 CSS 对其进行样式设置。要实现 Flutter 中的 UI，您需要组合小部件并使用属性对其进行样式设置。

与 CSS 一样，Dart 中的Color 类也使用“rgba”和“hex”。与 CSS 一样，Flutter 使用像素作为空间和大小单位。

在 Flutter 中，我们为几乎所有 CSS 属性及其值提供了 Dart 类和枚举。例如

• BorderRadius
• BoxShadow
• FontWeight
• Opacity
• Padding
• …

Flutter 还有 Column 和 Row 小部件。这些是 Flutter 中相当于 CSS 中 display: flex 的小部件。要配置justify-content 和align-items 样式，您使用MainAxisAlignment 和CrossAxisAlignment 属性。要调整flex-grow 样式，将Column/Row 的受影响子级小部件包装在Expanded 或Flexible 中。

对于高级 UI，Flutter 具有 CustomPaint 类——它在 Flutter 中相当于 Web 开发中的 Canvas API。CustomPaint 为您提供了一个画笔，可以按照您的意愿绘制任何 UI。当您想要一些非常复杂的东西时，通常会使用CustomPaint。此外，当小部件组合不起作用时，CustomPaint 是最佳选择。

2. 为多种屏幕分辨率开发

网站在浏览器上运行，移动应用程序在设备上运行。因此，在为任何一个平台开发时，您都必须牢记该平台。每个平台都以不同的方式实现相同的功能（相机、位置、通知等）。

作为一名 Web 开发人员，您会考虑网站的响应能力。您使用媒体查询来处理网站在较小和较宽屏幕上的外观。

从移动 Web 开发转向 Flutter，您拥有 MediaQuery 辅助类。MediaQuery 类为您提供当前设备的 orientation（横向或纵向）。它还会为您提供当前视窗的 size、devicePixelRatio 以及其他设备信息。这些值共同为您提供有关移动设备配置的见解。您可以使用它们来更改移动应用程序在不同屏幕尺寸下的外观。

3. 使用调试器、编辑器和命令行工具

桌面浏览器具有开发者工具。这些工具包括检查器、控制台、网络监视器等。这些工具可以改善 Web 开发过程。Flutter 也有自己的 DevTools。它具有小部件检查器、调试器、网络监视器等功能。

IDE 支持也很相似。Visual Studio Code 是最流行的 Web 开发 IDE 之一。VS Code 有很多与 Web 相关的扩展。Flutter 也支持 VS Code。因此，在过渡过程中，您不需要更改 IDE。VS Code 有 Dart 和 Flutter 扩展。Flutter 与 Android Studio 也配合良好。Android Studio 和 VS Code 都支持 Flutter DevTools。这些 IDE 集成使 Flutter 工具变得完整。

大多数前端 JavaScript 框架都带有一个 命令行界面 (CLI)。例如：Angular CLI、Create React App、Vue CLI 等。Flutter 也带有一个专用的 CLI。Flutter CLI 允许您构建、创建和开发 Angular 项目。它有用于分析和测试 Flutter 项目的命令。

新的概念

本节讨论了 Flutter 特定的概念，这些概念在 Web 开发中更容易或不存在。它解释了进入 Flutter 时应该牢记的想法。

如何处理滚动

在为 Web 开发时，默认的滚动行为由 Web 浏览器处理。但是，您可以使用 CSS（使用 overflow）自定义滚动。

在 Flutter 中并非如此。小部件组默认情况下不会滚动。当您感觉到小部件组可能会溢出时，您必须主动配置滚动。

在 Flutter 中，您可以通过使用允许滚动的独特小部件来配置滚动。例如：ListView、SingleChildScrollView、CustomScrollView 等。这些可滚动小部件可以让您很好地控制滚动。使用CustomScrollView，您可以在应用程序中配置专家和复杂的滚动机制。

在 Flutter 方面，使用ScrollViews 是不可避免的。Android 和 iOS 有 ScrollView 和 UIScrollView 来处理滚动。Flutter 也需要一种方法来统一渲染和开发人员体验，方法是使用其ScrollViews。

停止考虑文档结构的流程，而是将应用程序视为设备原生绘画机制的开放画布，这可能有所帮助。

2. 设置开发环境

要创建最简单的网站，您可以创建一个扩展名为.html 的文件，并在浏览器中打开它。Flutter 并非如此简单。要使用 Flutter，您需要安装 Flutter SDK 以及 为测试设备配置 Flutter。因此，如果您想为 Android 编写 Flutter 代码，则需要 设置 Android SDK。您还需要配置至少一个 Android 设备（Android 模拟器或物理设备）。

对于 Apple 设备（iOS 和 macOS）也是如此。在 Mac 上安装 Flutter 后，您还需要设置 Xcode 才能继续。您还需要至少一个 iOS 模拟器或 iPhone 来在 iOS 上测试 Flutter。桌面版 Flutter 也需要相当多的设置。在 Windows 上，您需要使用 Visual Studio（而不是 VS Code）设置 Windows Development SDK。在 Linux 上，您将安装更多软件包。

无需额外设置，Flutter 可以在浏览器上运行。因此，您可能会忽略针对目标设备的额外设置。在大多数情况下，您会使用 Flutter 进行移动应用程序开发。因此，您需要至少设置 Android 或 iOS。Flutter 带有flutter doctor 命令。此命令报告开发设置的状态。这样，您就可以知道需要在设置中进行哪些操作（如果有）。

这并不意味着 Flutter 的开发速度很慢。Flutter 带有一个强大的引擎。flutter run 命令允许在编码时将热重载到测试设备。但是你需要按 R 才能真正热重载。这不是问题。 Flutter 的 VS Code 扩展 允许在文件更改时自动热重载。

3. 打包和部署

与部署移动应用程序相比，部署网站更便宜、更简单。部署网站时，你可以通过域名访问它们。这些域名通常每年续费一次。然而，它们是可选的。

如今，许多平台提供免费托管。

例如：DigitalOcean 在 .ondigitalocean.com 上为你提供免费子域名。

如果你正在构建一个文档网站，可以使用这些域名。如果你不担心品牌，也可以使用它们。

在 Flutter 的移动应用程序世界中，你通常会在大多数情况下将你的应用程序部署到两个地方。

• App Store（适用于 iOS 设备）
• Google Play（适用于 Android 设备）

你必须在这些平台上注册一个开发者帐户。注册开发者帐户需要付费或订阅，并进行身份验证。

对于 App Store，你需要注册 Apple 开发者计划。你需要支付 99 美元的年费。对于 Google Play，你需要支付 25 美元的一次性费用 来开通帐户。

这些商店会在每个应用程序上线之前对其进行审查。

还要记住，用户不会轻易使用应用程序更新。用户必须显式更新已安装的应用程序。这与网页形成对比，网页上的每个人都可以看到最新部署的网页版本。

管理已部署的应用程序比管理已部署的网站更费劲。然而，这并不应该让你感到害怕。毕竟，在任一商店中都有数百万个应用程序，因此你也可以添加你的应用程序。

关于 Flutter 的额外想法

Flutter 是一种跨平台工具，用于构建桌面、移动或 Web 应用程序。Flutter 应用程序是像素完美的。Flutter 在每个应用程序上绘制相同的 UI，无论目标平台如何。这是因为每个 Flutter 应用程序都包含 Flutter 引擎。该引擎渲染 Flutter UI 代码。Flutter 为每个设备提供一个画布，并允许你按需绘制。该引擎与目标平台通信以处理事件和交互。

Flutter 很高效。它具有高性能水平。这是因为它是用 Dart 构建的，并且利用了 Dart 的功能。

凭借这些诸多优势，Flutter 对于许多应用程序来说都是一个不错的选择。跨平台应用程序在生产和维护过程中可以节省资金和时间。然而，Flutter（以及跨平台解决方案）在某些情况下可能不是最佳选择。

如果你希望用户使用平台开发者工具与你的应用程序进行交互，请不要使用 Flutter。这里的平台开发者工具是指特定于设备的工具，例如 Android 开发者选项。它还包括浏览器开发者工具。

如果你希望浏览器扩展与网站进行交互，请不要将 Flutter 用于 Web。

此外，不要将 Flutter 用于内容丰富的网站。

结论

本文回顾了从前端 Web 开发到使用 Flutter 的技能。我们还讨论了作为 Web 开发人员需要学习的应用程序开发概念。

Flutter 对 Web 开发人员来说更简单，因为它们都涉及实现 UI。如果你开始使用 Flutter，你会发现它为你提供了良好的开发体验。尝试一下 Flutter！用它来构建移动应用程序，当然，展示你构建的东西。

干杯！