Flutter在2020年更新版本速度很快,前段时间发布了2020年的首个稳定版本1.17。
除了品质方面的改进,这个版本中加入了一些新功能,包括 iOS 系统中的 Metal 支持、全新的 Material 组件、全新的网络跟踪工具等
Flutter 1.17 更新
移动端性能和文件体积优化
本次版本更新属于一个很大的版本变化,所以性能优化和体积优化毫无疑问,按照官方的说法:
Flutter Gallery 范例应用的 Android 版本在去年年底是 9.6MB,现在则是 8.1MB,体积减少了 18.5%。
内存使用方面也有明显的优化,例如在快速滚动大型图片时<p style="color:blue">内存占用减少了 70%</p>,进而提升性能,具体提升的程度取决于设备内存的大小
Metal 将 iOS 性能提升 50%
Apple 的 Metal API 使开发者几乎直接访问底层 GPU,它也是 Apple 推荐使用的图形 API。在支持 Metal 的 iOS 设备上,Flutter 将默认使用 Metal,使得应用在绝大多数情况下都运行得更快,渲染速度平均提升约 50% (具体取决于设备的工作负载)。
Material 小部件:NavigationRail、DatePicker 等
在新版本中添加了 NavigationRail,这是一个提供响应式应用导航模型的小部件。它是由 Google Material Design 团队设计和实现的。NavigationRail 非常适合可以在移动和桌面端屏幕之间切换的应用,因为随着应用屏幕尺寸的增加,它很容易换成 BottomNavigator。
也就是屏幕尺寸小的时候,比如手机上使用BottomNavigationBar 来导航,而在网页版和桌面端的时候可以考虑使用NavigationRail,如果要做到响应式自动切换,应该需要自己来判断处理。
新的Material motion 规范实现的Animations 包
在这篇文章中,Material 设计团队定义了四个过渡模式,用于描述组件和全屏视图之间的动画:分别是Container transform, Shared axis, Fade through, 和Fade。虽然这些动画一直都能在 Flutter 中实现,但是 Animations 包大大简化了实现步骤。
后续我也会系统学习一下原来的动画方案和新增的过渡动画,并记录成博客。
Flutter Web更新
PWA支持
渐进式Web应用程序的爱好者将很高兴得知,Web应用程序的默认Flutter模板现在包括对可安装的,具有离线功能的PWA应用程序所需的核心功能的支持,在Flutter的web app以PWA的形式安装在浏览器之后,在Mac OS上就如同一个普通的桌面应用。
新的Web插件
- audioplayers:同时播放多个音频文件
- connectivity:允许应用发现网络连接并进行相应配置
- cloud_firestore:NoSQL云数据库,可通过Cloud Firestore API访问
- cloud_functions:访问由Firebase托管的无服务器云功能
同时也有一些文章来教我们如何写Web端的插件:how to write a web plugin
使用CanvasKit提高渲染性能
Flutter Web最初选择了基于HTML DOM的模型,该模型结合了HTML,CSS和Canvas API来表达Flutter框架产生的输出。我们将此实现称为DomCanvas渲染系统。
Flutter Web正在尝试使用CanvasKit来做渲染。 CanvasKit使用WebAssembly和WebGL将Skia引入网络,从而启用了硬件加速的绘图surface,从而提高了有效渲染复杂和密集图形的能力。
DomCanvas和CanvasKit在不同情况下均具有优势,因此我们支持两种渲染模型。
默认情况下,Flutter Web支持使用DomCanvas,但是您可以使用以下命令启用CanvasKit渲染引擎:
flutter run -d chrome --release
--dart-define=FLUTTER_WEB_USE_SKIA=true
一个支持在网页上开发和预览Flutter的网站 :CodePen
CodePen(数百万前端开发人员和设计师的领先社交开发环境)将增加对Flutter的支持! 对于Web开发人员而言,CodePen一直是共享设计探索,新技术和思想的好地方。 现在,随着Flutter的推出,CodePen使新的受众可以学习,共享和促进他们的创造力。
CodePen拥有活跃的设计社区的优势,您可以在其中共享,评论,宣传,试用设计思想并从其他设计师那里获取意见。
下面展示来自CodePen的两个Flutter编写的动画效果:
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 命令:
上面的输出结果表明,我们可以使用 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相关技术,所以还没入坑的快点上车。