我最初是一名前端 Web 开发人员，然后成为一名 扑 开发商。 我认为有一些概念帮助我更容易地采用 Flutter。 还有一些不同的新概念。
在本文中，我想分享我的经验，并通过展示概念如何转移以及任何新概念是可学习的，来激励任何因选择一个生态系统而不是另一个生态系统而感到瘫痪的人。
转移的概念
本节展示了前端 Web 开发和 Flutter 相似的地方。 它解释了你已经拥有的技能，如果你开始使用 Flutter，这些技能对你来说是一个优势。
1. 实现用户界面 (UI)
要在前端 Web 中实现给定的 UI，您可以编写 HTML 元素并使用 CSS 设置它们的样式。 要在 Flutter 中实现 UI，您可以编写 小部件 并用 .
像 CSS 一样， Color Dart 中的类与“rgba”和“hex”一起使用。 与 CSS 一样，Flutter 使用像素作为空间和大小单位。
在 Flutter 中，我们为几乎所有 CSS 属性及其值提供了 Dart 类和枚举。 例如：
颤振也有 Column 和 Row 小部件。 这些是 Flutter 的等价物 display: flex 在 CSS 中。 配置 justify-content 和 align-items 样式，你用 MainAxisAlignment 和 CrossAxisAlignment 特性。 调整 flex-grow 样式，包装受影响的子（ren）小部件 Column/Row，在 Expanded or Flexible.
对于高级 UI，Flutter 具有 CustomPaint 类——这对 Flutter 来说是什么 Canvas API 是网络开发。 CustomPaint 给你一个画师来画你想要的任何 UI。 你通常会使用 CustomPaint 当你想要一些非常复杂的东西时。 还， CustomPaint 当小部件组合不起作用时，这是首选方式。
2. 为多人开发 屏幕分辨率
网站在浏览器上运行，移动应用在设备上运行。 因此，在为任一平台开发时，您必须牢记该平台。 每个平台以不同的方式实现相同的功能（相机、位置、通知等）。
作为一名网络开发人员，您会考虑网站的响应能力。 您使用媒体查询来处理您的网站在更小和更宽的屏幕上的外观。
从移动 Web 开发转向 Flutter，您拥有 MediaQuery 助手类。 的 MediaQuery 类为您提供当前设备 orientation （风景或肖像）。 它还为您提供当前视口 size是， devicePixelRatio，以及其他设备信息。 这些值一起让您深入了解移动设备的配置。 您可以使用它们来更改您的移动应用程序在各种屏幕尺寸下的外观。
3. 使用调试器、编辑器和命令行工具
桌面浏览器有开发者工具。 这些工具包括检查器、控制台、网络监视器等。这些工具改进了 Web 开发过程。 Flutter 也有自己的 开发工具. 它具有小部件检查器、调试器、网络监视器等功能。
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)。 例如： 角度CLI, 创建React应用程序, 命令行界面等。Flutter 还自带了专属的 CLI. Flutter CLI 允许您构建、创建和开发 Angular 项目。 它具有用于分析和测试 Flutter 项目的命令。
新概念
本节讨论在 Web 开发中更容易或不存在的特定于 Flutter 的概念。 它解释了你在进入 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 for desktop 也是一个相当大的设置。 在 Windows 上，您需要使用 Visual Studio（而不是 VS Code）设置 Windows 开发 SDK。 在 Linux 上，您将安装更多软件包。
无需额外设置，Flutter 就可以在浏览器上运行。 因此，您可能会忽略目标设备的额外设置。 在大多数情况下，您会使用 Flutter 进行移动应用程序开发。 因此，您至少需要设置 Android 或 iOS。 Flutter 自带 flutter doctor 命令。 此命令报告您的开发设置的状态。 这样，如果需要，您就知道在设置中要做什么。
这并不意味着 Flutter 的开发速度很慢。 Flutter 带有一个强大的引擎。 这 flutter run 命令允许在编码时热重新加载到测试设备。 但是你需要按下 R 实际热重载。 这不是问题。 Flutter 的 VS Code 扩展 允许在文件更改时自动热重载。
3.打包部署
与部署移动应用程序相比，部署网站更便宜、更容易。 当您部署网站时，您可以通过域名访问它们。 这些域名通常每年更新一次。 但是，它们是可选的。
如今，许多平台都提供免费托管。
例如： DigitalOcean 给你一个免费的子域 .ondigitalocean.com.
如果您正在构建文档网站，则可以使用这些域。 当您不担心品牌时，您也可以使用它们。
在 Flutter 的移动应用程序世界中，您通常在大多数情况下将您的应用程序部署到两个地方。
您必须在每个平台上注册一个开发者帐户。 注册开发者帐户需要付费或订阅和身份验证。
对于 App Store，您需要注册 Apple Developer 计划。 你需要维护 每年 99 美元的订阅费. 对于 Google Play，您需要制作一个 一次性支付 25 美元 为帐户。
这些商店会在每个应用程序上线之前对其进行审核。
还要记住，用户不会轻易使用应用更新。 用户必须明确更新已安装的应用程序。 这与每个人都可以看到网站的最新部署版本的网络形成鲜明对比。
管理已部署的应用程序比管理已部署的网站要求更高。 但是，这不应该吓到你。 毕竟，两家商店都部署了数百万个应用程序，因此您也可以添加自己的应用程序。
关于 Flutter 的其他思考
Flutter 是一个用于构建桌面、移动或 Web 应用程序的跨平台工具。 Flutter 应用程序是像素级的。 无论目标平台如何，Flutter 都会在每个应用程序上绘制相同的 UI。 这是因为每个 Flutter 应用程序都包含 Flutter 引擎。 该引擎渲染 Flutter UI 代码。 Flutter 为每个设备提供了一个画布，让你可以随心所欲地绘画。 引擎与目标平台通信以处理事件和交互。
颤振是有效的。 它具有高性能水平。 这是因为它是用 Dart 构建的，并且利用了 Dart 的特性。
凭借这些众多优势，Flutter 成为许多应用程序的不错选择。 跨平台应用程序可以在生产和维护期间节省金钱和时间。 但是，在某些情况下，Flutter（和跨平台解决方案）可能不是最佳选择。
如果您希望用户在您的应用程序中使用平台开发人员工具，请不要使用 Flutter。 此处的平台开发者工具是指特定于设备的工具，例如 Android 开发者选项。 它还包括浏览器开发工具。
如果您希望浏览器扩展与网站交互，请不要使用 Flutter for web。
另外，不要将 Flutter 用于内容繁重的网站。
结论
这是对从前端 Web 开发到使用 Flutter 的技能的回顾。 我们还讨论了作为 Web 开发人员必须学习的应用程序开发概念。
Flutter 对 Web 开发人员来说更简单，因为它们都涉及实现 UI。 如果您开始使用 Flutter，您会发现它为您提供了良好的开发者体验。 试试 Flutter！ 使用它来构建移动应用程序，当然还可以展示您构建的内容。
干杯！
