Flutter在2020年更新版本速度很快,前段时间发布了2020年的首个稳定版本1.17。

除了品质方面的改进,这个版本中加入了一些新功能,包括 iOS 系统中的 Metal 支持、全新的 Material 组件、全新的网络跟踪工具等

Flutter 1.17 更新

移动端性能和文件体积优化

本次版本更新属于一个很大的版本变化,所以性能优化和体积优化毫无疑问,按照官方的说法:

Metal 将 iOS 性能提升 50%

Apple 的 Metal API 使开发者几乎直接访问底层 GPU,它也是 Apple 推荐使用的图形 API。在支持 Metal 的 iOS 设备上,Flutter 将默认使用 Metal,使得应用在绝大多数情况下都运行得更快,渲染速度平均提升约 50% (具体取决于设备的工作负载)。
分别使用 OpenGL 与 Metal 的 iOS 应用单帧渲染时间(越低越好)

Material 小部件:NavigationRail、DatePicker 等

在新版本中添加了 NavigationRail,这是一个提供响应式应用导航模型的小部件。它是由 Google Material Design 团队设计和实现的。NavigationRail 非常适合可以在移动和桌面端屏幕之间切换的应用,因为随着应用屏幕尺寸的增加,它很容易换成 BottomNavigator。
也就是屏幕尺寸小的时候,比如手机上使用BottomNavigationBar 来导航,而在网页版和桌面端的时候可以考虑使用NavigationRail,如果要做到响应式自动切换,应该需要自己来判断处理。

新的 NavigationRail 小部件
更新了 Material DatePicker 小部件

新的Material motion 规范实现的Animations 包

在这篇文章中,Material 设计团队定义了四个过渡模式,用于描述组件和全屏视图之间的动画:分别是Container transform, Shared axis, Fade through, 和Fade。虽然这些动画一直都能在 Flutter 中实现,但是 Animations 包大大简化了实现步骤。
后续我也会系统学习一下原来的动画方案和新增的过渡动画,并记录成博客。

来自 Animations 包的 Container 过渡的示例

Flutter Web更新

PWA支持

渐进式Web应用程序的爱好者将很高兴得知,Web应用程序的默认Flutter模板现在包括对可安装的,具有离线功能的PWA应用程序所需的核心功能的支持,在Flutter的web app以PWA的形式安装在浏览器之后,在Mac OS上就如同一个普通的桌面应用。

新的Web插件

同时也有一些文章来教我们如何写Web端的插件:how to write a web plugin

使用CanvasKit提高渲染性能

Flutter Web最初选择了基于HTML DOM的模型,该模型结合了HTML,CSS和Canvas API来表达Flutter框架产生的输出。我们将此实现称为DomCanvas渲染系统。
Flutter Web正在尝试使用CanvasKit来做渲染。 CanvasKit使用WebAssemblyWebGLSkia引入网络,从而启用了硬件加速的绘图surface,从而提高了有效渲染复杂和密集图形的能力。
DomCanvas和CanvasKit在不同情况下均具有优势,因此我们支持两种渲染模型。



默认情况下,Flutter Web支持使用DomCanvas,但是您可以使用以下命令启用CanvasKit渲染引擎:

flutter run -d chrome --release 
        --dart-define=FLUTTER_WEB_USE_SKIA=true

CanvasKit引擎仍然有一些粗糙之处。 对于将Flutter投入生产的早期采用者,DomCanvas引擎提供了最大的稳定性。

一个支持在网页上开发和预览Flutter的网站 :CodePen

CodePen(数百万前端开发人员和设计师的领先社交开发环境)将增加对Flutter的支持! 对于Web开发人员而言,CodePen一直是共享设计探索,新技术和思想的好地方。 现在,随着Flutter的推出,CodePen使新的受众可以学习,共享和促进他们的创造力。

CodePen拥有活跃的设计社区的优势,您可以在其中共享,评论,宣传,试用设计思想并从其他设计师那里获取意见。

下面展示来自CodePen的两个Flutter编写的动画效果:
“Light effect” animation by Mariano Zorrilla

“Gooey edge” animation by Grant Skinner

Flutter的Web支持仍处于测试阶段,并且由于性能和浏览器兼容性方面的工作仍在进行中,因此应谨慎将其部署到生产环境中。
更多相关资料可以参考:flutter.dev/web

Dart 2.8 更新

空安全

在Dart 2.8中空安全仍处于experiment阶段,需要在编译时开启,现在可以先在DartPad上体验一下:

// 下列变量可空。
int? j = 1;  // 之后可被赋予 null 值。
final Foo? c = getFoo();  // 方法可以返回 null。
String? n;  // 初始即为 null,之后任何时间也可以为 null。

还有一些智能推断功能,都和Kotlin中的空安全类似,这也是Dart的一个里程碑式的类型系统更新。Dart 核心库也全部迁移至空安全。
想要试用空安全,最快的方法是访问 nullsafety.dartpad.cn,这是一个启用了空安全的 DartPad 版本。打开 Learn with Snippets 下拉菜单即可找到一系列的练习项目,里面包含新的语法介绍和空安全的基础知识。

使用late修饰变量,这个类似Kotlin中的lateinit

class Goo {
    late Viscosity v;

    Goo(Material m) {
        v = m.computeViscosity();
    }
}

使用 pub outdated 管理依赖

Dart SDK 现在通过 pub outdated 支持发现新版本。如果您使用的是支持 Dart 或 Flutter 的 IDE,请使用 Pub outdated 指令,这个指令在 pubspec.yaml 文件被打开时会显示。或者通过终端运行 pub outdated 或者 flutter pub outdated 命令:
pubOutdated.jpg
上面的输出结果表明,我们可以使用 pub upgrade 自动升级到 foo 1.3.1,也就是 foo 的最新可用版本。与此同时,虽然我们可以自动升级到 bar 2.1.0,但最新可用的版本其实是 3.0.3。升级到 bar 3.0.3 属于大版本升级,所以我们需要编辑 pubspec.yaml 文件,才能完成升级。
在编辑完 pubspec 并运行 pub upgrade 之后,pub outdated 会报告所有的依赖均已是最新版本。

总结:Flutter团队一直在不断努力,以使得其在跨平台方面表现优异,加之现在的移动端开发都会考察Flutter相关技术,所以还没入坑的快点上车。

参考:Flutter web support updates
Announcing Flutter 1.17

如果觉得我的文章对你有用,请随意赞赏