Flutter现支持Web和桌面，一跃成为前沿大一统框架

2019年的这一年里，Flutter进展了不少，相继推出了Flutter，Flutter Web，Flutter Desktop以及相关配置插件和工具的完善。在Flutter团队和社区的努力下，Flutter正在不断的完善的愈来愈厉害。Flutter已经发展为Mobile、Web、Desktop的全平台的工具。在12月12号的Flutter Interact2019大会上，发布了Flutter1.12最新稳定版本以及相关产品，这是迄今为止Flutter的发行版中最大的发行版本，来自188个贡献者，关闭了4,571个issues，合并了1,905个PR。这一次的Flutter框架和工具都有大量加强功能。

这是Flutter Interact2019大会最完整最全面的分析报道，这篇文章花了我一个晚上通宵的研究，每个工具花了时间研究和分析，最终写出了这篇详细的文章。

做者写文章不容易，以为好看的话，点个赞支持一下吧，谢谢你们。

---

此次Flutter Interact大会上，Flutter1.12正式版本发布了，除此以外，这一次发布会上也带来了不少新的东西，根据内容相关性，我把它们主要分红了三个大类：Flutter框架体系、编辑器和开发工具、UI视觉交互方面。

---

1、Flutter体系框架

Flutter框架体系除了Flutter自己以外，此次发布了Flutter Web Beta版本，以及Flutter Desktop macOS预览版本，拓展了Flutter的应用领域。

1.1 Flutter1.12正式版发布

此版本包含视觉更新，主要用于支持iOS 13，包括完整实现的黑夜模式，新的Cupertino小部件，另外多个UX作了调整，还增长了Flutter添加到native应用的新功能，主要有如下这些功能的更新：

★ 可用的iOS 13黑夜模式：在Flutter1.12中，最大的变化就是对iOS13的支持，这次更新能够在Cupertino组件上使用完整的黑夜模式。暗模式支持不只是换掉背景颜色，并且还能够调整其他颜色以达到理想的视觉效果。

★ Cupertino组件的变动：

新增两个组件：CupertinoContextMenu和CupertinoSlidingSegmentedControl，

为了更像原生iOS13的UI表现，此次更新们改进了ScrollBar的保真度，提供了自适应的CupertinoAlertDialog的padding值，并在CupertinoDatePicker上容许设置mix date或max date的日期限制。

★ 支持“Add-to-App”功能：这个放到后面的“Android Studio里面具体讲解。

★ 包括AndroidX：如今，全部Flutter项目都使用AndroidX支持，所以您再也不须要处理全部由于AndroidX而致使的错误！

★ Google字体支持：再也不须要在应用程序中下载和添加字体，而无需pubspec.yaml。使用Flutter Google字体插件，您能够在Dart代码中直接使用您喜欢的字体！

★ Flutter Galley： Flutter Gallery应用程序已彻底更新，所以您能够查找新窗口小部件和功能的代码库，并经过在首选平台上运行来尝试。

★ 组件的新增和更新变化：主要包括SliverOpacity小部件，SliverAnimatedList和为SliverAppBar配置拉伸效果的功能，详细的变化以下所示：

添加MediaQuery.systemGestureInset为了支持Android Q.
默认更新ToggleButtons约束并添加新的约束参数.
在PageRouteBuilder中添加fullscreenDialog参数.
实现了DropdownButton.selectedItemBuilder.
Expose API —— 用于调整图像缓存的大小.
SliverAppBar具备回调功能和FlexibleSpaceBar支持的可配置超滚动拉伸.
Re-landing SliverAnimatedList.
在showDialog和showGeneralDialog中添加navigator功能.
FadeInImage支持cacheWidth和cacheHeight.
新增SliverOpacity.
新增SliverIgnorePointer.
使用RenderSliverPadding插入SliverFillViewport.
复制代码

★ 新增黄金文件测试(GoldenFile)：“黄金图像”术语指的是主图像文件，也就是你选择要进行测试的组件，状态，应用程序或其余可视表示形式的真实呈现。在Flutter 1.12中，新增GoldenFileComparator和LocalFileComparator类的实现，这些类按像素而不是位进行比较，从而消除了false positives。这些新的实现突出显示了视觉上的差别，以便黄金图像和测试中的更新之间存在差别时能够清楚地看到它们。

具体用法能够查看： api.flutter.dev/flutter/flu…

1.2 Flutter Web Beta版发布

具体的请查看我前面的文章介绍：Flutter Web Beta版本终于发布了，可用于开发正式项目了

1.3 Flutter Desktop Alpha版本发布

Flutter For Desktop在MacOS中如今处于Alpha状态。Flutter Gallery应用程序如今也支持桌面了。此外，键盘的操做性等还有不少方面都有很大的改进。

macOS alpha版本的flutter gallery也获得了支持：

macOS alpha表明Flutter对桌面的支持迈出了一大步，包括新的DataTree和Split示例窗口小部件，以及移植到macOS的多个插件，对在发布和配置模式下构建的支持以及大大简化的工具介绍。若是您是从开发人员或使用的是master分支，则能够经过如下命令启用macOS桌面支持来访问macOS工具：flutter config — enable-macos-desktop

在macOS上建立Flutter桌面项目就像建立任何其余新的Flutter项目同样，使用 flutter create 便可。

除了工具支持以外，Flutter团队还一直在致力于适合桌面大小的应用程序的密度。移动应用程序须要相对较大的控件来适应触摸交互，而在桌面大小的设备上，用户更有可能使用鼠标。

为了改善Flutter桌面应用程序的体验，咱们在键盘导航和键盘访问方面作了不少工做，包括：

将修改器键与键盘事件同步。
打开下拉菜单时管理项目选择。
添加一个方便访问的主要焦点。
添加键盘导航，悬停和开关快捷方式。
复选框和单选按钮。
自动滚动以使聚焦的项目保持可见。
基于键盘快捷键的滚动。
一个用于处理焦点和悬停的新小部件。
重写的复制/粘贴和键盘选择。
下拉菜单的键盘导航。
视觉密度支持。
添加macOS功能键支持。
复制代码

除了Flutter Gallery示例以外，咱们还建议使用新的Photos Search示例，地址以下： github.com/flutter/sam…

该示例展现了不少桌面方面的优势，包括键盘处理，新的小部件密度，新的插件和新的小部件。更多有关Flutter For Desktop的信息能够查看官方网站：flutter.dev/desktop

---

2、编译器和开发工具

Flutter的编译工具和开发工具这次也有重大升级和更新。大概有这些内容：Android Studio工具里面支持把Flutter添加到原生的应用程序中的“Add-to-App"。基于IntelliJ的加强型IDE（具备咱们称为“ Hot UI”的新功能的预览）。DartPad新版本支持Flutter。Dart DevTools预览版，具备新的视觉布局视图的加强型，可在同时进行多设备调试的功能。Visual Studio Code改进了Android的构建过程，并更好地支持了在测试运行之间发现渲染小部件中的差别。Dart 2.7正式版的发布。

具体讲解请看下文介绍：

2.1 Dart2.7正式版发布

★ 1.Dart 2.7添加了强大语言新功能：扩展方法。这些使你可以向任何类型（甚至是你没法控制的类型）添加新功能，并具备常规方法调用的简洁性和自动化。

★ 2.安全字符串处理(包括emoji)：

Dart的标准String类使用UTF-16编码。这是编程语言中的常见选择，尤为是那些支持在设备和Web上本地运行的语言。

在使用字符串时，一般没必要担忧字符和代码点。若是要作的只是接收，传递整个字符串，则内部编码是透明的。可是，若是须要遍历字符串的字符或操纵字符串的内容，则可能会遇到麻烦。为此，Dart 2.7引入了一个新的库 “characters”，用于处理这种状况。该软件包支持将字符串视为用户感知的字符序列，也称为Unicode 字形簇。使用“characters”库，咱们能够经过对缩短文本的代码进行少许更改来修复代码。另外也支持emoji表情。

★ 3.支持空安全功能，不过目前是预览版阶段。

2.2 DartPad升级了

DartPad新版本支持Flutter了，你无需安装任何东西就可使用Dart，这是一个在线网站，你看体验里面带有的几个Demo程序，并可在右边看到预览效果。

至此，Dartpad至此纯Dart程序，Web程序，以及Flutter程序了，能够说Dartpad已经很不错了，不过部分简单的页面功能能够它体验一下，复杂的应用程序它是没法完成的，须要咱们用开发工具编写才行。

2.3 Dart Dev Tools

Dart Dev Tools如今有预览版了，DevTools是Dart和Flutter的一套性能和调试工具，更好玩的是Dart Dev Tools是使用Flutter编写的，是否是很神奇，是否是感觉到了Dart和Flutter的强大之处了？你一直觉得这种调试工具基本都是C++或者.net什么的写的，没想到是用Flutter写的吧？厉害了个人哥。

Dart Dev Tools是开源的，github地址：github.com/flutter/dev…

有了Dart Dev Tools，你能够进行如下操做：

◆ 检查UI：检查Flutter应用的UI布局和状态。
◆ 查性能：在Flutter应用中诊断UI垃圾性能问题。
◆ 源码调试：Flutter或Dart命令行应用程序的源代码级调试。
◆ 调试内存：在Flutter或Dart命令行应用程序中调试内存问题。
◆ 查看日志：查看有关正在运行的Flutter或Dart命令行应用程序的常规日志和诊断信息。
复制代码

这里有个新出来的功能要特别说明一下，它就是：Layout Explorer。能够用它查看组件树，让你更好地了解Flutter布局。目前，“Layout Explorer”功能仅支持浏览Flex布局，但未来可能会扩展到其余类型的布局。

首先你须要使用Flutter 1.12.16或更高版本才能够支持Layout Explorer的功能，选择一个Flex(Row 、Column和Flex等)组件或Flex组件的子组件，而后会在“Details Tree旁边看到一个“Layout Explorer”选项。点击它就会打开布局资源管理器的功能。

Layout Explorer可以可视化的显示Flex小部件及其子组件的布局方式，可以识别水平轴的对齐方式和交叉轴的对齐方式，还支持flex系数，布局约束等。若是属性有多个候选项，那么你能够经过下拉列表修改值。好比如下就是修改对齐方向的属性的示例图，你会发现每一个更改就会显示出可视化的效果图，而且在你的设备上也会同步显示更改的效果。这种方式不会修改你的源代码，他会在热重载时恢复。

Layout Explorer还会显示违反布局约束和渲染溢出错误的状况。违反的布局约束显示为红色，而且在运行中的设备上会以标准的“黄色胶带”的样子显示溢出错误。具体使用效果以下图所示：

2.4 Android Studio支持“Add-to-App”

就是把Flutter添加到原生的应用程序中。好比新建模块时，能够选择“Flutter Module”，添加一个Flutter Module。

此功能的完善得益于如下这些功能的实现：

★ 1.稳定了Java，Kotlin，Objective-C和Swift中用于平台集成的API，包括一组适用于Android的新API。

有关更改的详细信息，请参见Android项目迁移文档： github.com/flutter/flu…

★ 2.添加了对在嵌入的Flutter Module中使用插件的支持。

★ 3.经过Android AAR和iOS提供了额外的集成机制，为了更好地与现有构建系统兼容。

★ 4.从新设计了命令行工具的flutter attach”机制，这样一来让VSCode和IntelliJ插件上能够轻松绑定正在运行的Flutter Module上进行调试，DevTools和热重载（Hot Reload）。

2.5 Hot UI（布局可视化工具）

你能够在Flutter的IntelliJ / Android Studio插件中找到这个新功能，目前仍是预览版。而后你能够在构建组件时能够直接在IDE中查看它们并与之交互，你能够在“HOT UI"上面更改你的组件的属性，而后它会直接在预览界面及你的设备上面更新。

使用动态图解以下图所示：

2.6 VSCode多设备同时调试

你能够同时在多个设备和平台上运行Flutter代码，你还能够在Dart代码上设置一个断点，并能够在多个设备上进行断掉调试，若是代码修改了，当你启动热重载，你就能够看到哪一个设备被激活了并进行断点调试。在大会的现场，Flutter团队使用了7台设备链接了Mac，并进行了现场同时调试这7台设备，得到了雷鸣般的掌声。

---

3、UI视觉交互方面

Flutter今年的活动主要集中在创意技术人员，原型设计师，交互式设计师和视觉编码人员。构建Flutter的一个核心动机是多平台开发不该该在视觉质量上有所妥协。将Flutter视为进行创意表达和探索的画布，由于Flutter消除了面向视觉的开发人员常常面临的许多限制。Flutter有状态的热重装功能使您能够轻松进行更改并实时查看结果，而且使用Flutter绘制的每一个像素，您能够将UI，图形内容，文本和视频与自定义动画和变换混合在一块儿。

Flutter团队特别受到了数字艺术家Robert Felker的启发，Robert Felker用Flutter进行了一系列生成艺术的探索，将几何，纹理和光线巧妙地结合在一块儿，它能够说明Flutter的表达能力以及艺术创造力，下面的图像是用少于60行的Dart代码生成的，是否是美爆了？！

源码请查看：github.com/Solido/flut…

接下来看看本次活动现场发布的一些UI视觉交互方面的产品和工具备哪些：

3.1 Nevercode(云端iOS调试测试Flutter代码)

Nevercode具备一整套全新功能，包括名为Remote Mac的Visual Studio Code插件。Remote Mac扩展程序可以让您直接链接到它们托管在云中的Mac，以测试您的iOS和macOS Flutter代码。

具体的能够查看：

marketplace.visualstudio.com/items?itemN…

3.2 Supernova

Supernova已将Flutter集成到其设计和原型制做工具中，并具备动画支持，Material Design集成以及专为Flutter设计的更新界面。Supernova团队还宣布了一种基于浏览器的新工具Supernova Cloud，该工具彻底由Flutter Web构建而成。

生成原型图的同时还会自动生成Flutter代码，而且支持热重载，能够导入到Andoid Studio中运行。

3.3 Rive全新升级(前身是Flare)

Rive（以前是2Dimensions，曾发布Flare图形工具）宣布将他们的公司名称和产品整合为一个品牌。他们推出了新公司和产品名称Rive，以及许多新产品功能。Rive中最显着的功能也许是支持导入使用Adobe After Effects建立的Lottie文件，从而将Flutter更深刻地集成到现有的动画内容工做流程中。Rive如今支持实时动态分层效果，例如阴影，内部阴影，发光，模糊和遮罩。

Rive消除了在代码中从新建立设计和动画的须要，从而大大简化了设计人员到开发人员的交接过程。这意味着设计师能够随时进行迭代和更改。因为Rive能够输出直接与Flutter集成的真实的资产文件，而不只仅是MP4视频或GIF图像，所以Rive容许您建立复杂而动态的交互，游戏角色，动画图标和内置屏幕。

3.4 Adode XD Flutter插件(自动生成Flutter代码)

Adobe宣布了Flutter在Creative Cloud中的支持，该插件带有一个将设计从Adobe XD导出到Flutter的插件。Adobe XD是Adobe的用户体验设计平台，它使产品设计团队能够把设计和原型图变成移动端，Web，台式机以及其余产品的代码，这是一种全新的体验。使用XD-to-Flutter插件，你能够直接将UI导出到Dart代码它还支持热重载（Hot Reload），当你在Adobe Ex中进行更改并保存时，你能够在模拟器或设备上直接看到更改。除此以外，你还能够给组件设置参数，并容许其在Widget中获取参数。所以，在开发过程当中，您能够在调用逐渐并对其进行更改时提供参数。这个吊炸天有木有？！！！

XD to Flutter插件将于明年年初以开源形式提供。您能够找到有关XD to Flutter的更多信息，并在Adobe网站上注册体验，

地址以下: xd.adobelanding.com/xd-to-flutt…

---

这篇文章花了我一个晚上通宵的研究，每个工具花了时间研究和分析，最终写出了这篇详细的文章。做者写文章不容易，以为好看的话，点个赞支持一下吧，谢谢你们。

更多关于Flutter精彩干货，欢迎关注公众号【Flutter那些事】，干货等你来拿。