我一开始是做前端Web开发，后来成为Flutter的开发者。我认为有一些概念帮助我更容易采用Flutter。也有一些新的概念是不同的。
在这篇文章中，我想分享我的经验，并通过展示概念的转移和任何新概念的可学习性，来激励那些在选择一个生态系统时感到瘫痪的人。
转移过来的概念
本节显示了前端Web开发和Flutter相似的地方。它解释了你已经拥有的技能，如果你开始使用Flutter，这些技能对你来说是一种优势。
1.实现用户接口（UI）
要在前端网络中实现一个特定的用户界面，您需要组成HTML元素，并用CSS对其进行样式设计。要在Flutter中实现用户界面，您需要组成小部件，并使用属性对其进行样式设计。
与CSS一样，Dart中的 [Color](https://api.flutter.dev/flutter/dart-ui/Color-class.html)类在Dart中可以使用 "rgba "和 "hex"。也和CSS一样，Flutter使用像素作为空间和尺寸单位。
在Flutter中，我们有Dart类和枚举，用于几乎所有的CSS属性和它们的值。比如说：
BorderRadiusBoxShadow[FontWeight](https://api.flutter.dev/flutter/dart-ui/FontWeight-class.html)[Opacity](https://api.flutter.dev/flutter/widgets/Opacity-class.html)[Padding](https://api.flutter.dev/flutter/widgets/Padding-class.html)- ...
Flutter也有 Column和Row小组件。这些是Flutter相当于CSS中的display: flex在CSS中。要配置justify-content 和align-items 样式，你可以使用MainAxisAlignment 和CrossAxisAlignment 属性。要调整flex-grow 样式，请将Column/Row 的受影响的子部件包裹在一个Expanded 或Flexible 中。
对于高级UI，Flutter有一个 CustomPaint类--它对Flutter的意义就像网页开发中的Canvas APICustomPaint 为您提供了一个绘画器，可以随心所欲地绘制任何UI。当你想要一些真正复杂的东西时，你通常会使用CustomPaint 。此外，CustomPaint ，当小部件的组合不工作时，它是最常用的方法。
2.为多 屏幕分辨率开发
网站在浏览器上运行，移动应用程序在设备上运行。因此，在为任何一个平台进行开发时，你都必须牢记平台。每个平台以不同的方式实现相同的功能（摄像头、位置、通知等）。
作为一个网站开发人员，你要考虑你的网站的响应性。你使用媒体查询来处理你的网站在较小和较宽的屏幕上看起来是什么样子。
从移动Web开发到Flutter，你有一个MediaQuery助手类。MediaQuery 类给你当前的设备orientation(横向或纵向)。它也给你当前的视口size，以及devicePixelRatio以及其他设备信息。这些值一起给了你关于移动设备配置的洞察力。你可以用它们来改变你的移动应用在不同屏幕尺寸下的样子。
3.使用调试器、编辑器和命令行工具工作
桌面浏览器有开发工具。这些工具包括一个检查器、一个控制台、一个网络监视器等。这些工具改善了网络开发过程。Flutter也有自己的开发工具。它有小部件检查器、调试器、网络监视器等功能。
IDE的支持也是类似的。Visual Studio Code是Web开发最流行的IDE之一。VS Code有许多与网络相关的扩展。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项目的命令。
新的概念
本节讲述了在Web开发中比较容易或不存在的Flutter特定概念。它解释了您在进入Flutter时应牢记的想法。
如何处理滚动的问题
在为网络开发时，默认的滚动行为是由网络浏览器处理的。然而，你可以用CSS自由地定制滚动（使用 overflow).
在Flutter中不是这样的。小部件组默认是不滚动的。当你感觉到小部件组可能会溢出时，你必须主动地配置滚动。
在Flutter中，您可以通过使用允许滚动的特殊小部件来配置滚动。比如说。 ListView, SingleChildScrollView, CustomScrollView，等等。这些可滚动的小部件让您对滚动有很好的控制。通过CustomScrollView ，您可以在应用程序中配置专家级的复杂滚动机制。
在Flutter这边，使用ScrollViews 是不可避免的。安卓和iOS有 ScrollView和 UIScrollView来处理滚动。Flutter也需要一种方法，通过使用其ScrollViews ，来统一渲染和开发者的体验。
停止考虑文档结构的流程，而将应用程序视为设备原生绘画机制的开放画布，这可能会有所帮助。
2.设置你的开发环境
要创建最简单的网站，你可以创建一个扩展名为.html 的文件，并在浏览器中打开它。Flutter没有那么简单。要使用Flutter，您需要已经安装了Flutter SDK*，并*为测试设备配置了Flutter。因此，如果您想为Android编码Flutter，您需要设置Android SDK。您还需要配置至少一个安卓设备（安卓模拟器或物理设备）。
对于苹果设备（iOS和macOS）也是同样的情况。在Mac上安装Flutter后，你仍然需要在进一步操作前设置Xcode。你还需要至少一个iOS模拟器或一个iPhone来测试iOS上的Flutter。桌面版的Flutter也是一个相当大的设置。在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（适用于iOS设备）
- Google Play（适用于安卓设备）
您必须在这些平台上分别注册一个开发者账户。注册开发者账户需要付费或订阅以及身份验证。
对于App Store，你需要注册苹果开发者计划。你需要保持99美元的年度订阅。对于Google Play，你需要为该账户一次性支付25美元。
这些商店在每一个应用程序上线前都会对其进行审查。
还要记住，用户不容易消费应用程序的更新。用户必须明确更新已安装的应用程序。这与网络中每个人都能看到网站的最新部署版本形成对比。
管理部署的应用程序相对来说比管理部署的网站要求更高。然而，这不应该吓到你。毕竟，有数以百万计的应用程序部署在这两个商店，所以你也可以添加你的应用程序。
关于Flutter的其他想法
Flutter是一个跨平台的工具，用于构建桌面、移动或网络应用。Flutter应用程序是像素完美的。无论目标平台如何，Flutter都能在每个应用程序上绘制出相同的用户界面。这是因为每个Flutter应用程序都包含Flutter引擎。这个引擎渲染Flutter的UI代码。Flutter为每个设备提供一个画布，并允许您按照您的要求进行绘画。该引擎与目标平台进行通信，以处理事件和互动。
Flutter是高效的。它具有高性能水平。这是因为它是用Dart构建的，它利用了Dart的功能。
有了这些众多的好处，Flutter是许多应用程序的一个不错的选择。跨平台应用程序在生产和维护过程中可以节省资金和时间。然而，在某些情况下，Flutter（以及跨平台解决方案）可能不是一个最佳选择。
如果你希望用户在你的应用程序中使用平台开发者工具，就不要使用Flutter。这里的平台开发者工具指的是特定于设备的工具，如Android开发者选项。它也包括浏览器开发者工具。
如果你期望浏览器扩展与网站互动，就不要将Flutter用于网页。
另外，不要将Flutter用于内容繁杂的网站。
总结
这是对从前端网页开发延续到使用Flutter的技能的回顾。我们还讨论了作为网络开发者必须学习的应用开发概念。
Flutter对于web开发者来说更简单，因为它们都涉及到实现UI。如果您开始使用Flutter，您会发现它给您带来了良好的开发者体验。给Flutter一个机会吧!用它来构建移动应用程序，当然也可以展示您所构建的东西。
