2021 关于 Flutter v2 我整理了16个重要特性

B站

www.bilibili.com/video/BV1eK…

谷歌开发者官文

mp.weixin.qq.com/s/EzS3dtpZB…

7 大平台 -> windows、macos、linux、web、embedded、ios、android

• flutter.gskinner.com/
• github.com/gskinnerTea…

web 平台优化、进入稳定版

• 3 个方向

  • pwa: 缓存、push 推送服务、桌面快捷、消息提示
  • spa: 单页程序类似 vue rect
  • expanding mobile: 快速迁移 app、复用代码

• irobot 构建基于 flutter

edu.irobot.com/the-latest/…

• 技术架构

2D 3D 渲染 WebGL Skia WebAssembly Canvas

• 稳定的版本

• 性能

  • HTML renderer: HTML 渲染器: Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size. 使用 HTML 元素、 CSS、 Canvas 元素和 SVG 元素的组合

  • CanvasKit renderer: CanvasKit 渲染器: This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.

• 试水项目

  • 编辑器 rive.app/

  • 动画 flutterplasma.dev/

  • invoice www.invoiceninja.com/

canonical 支持

medium.com/flutter/ann…

canonical.com/

• why canonical 大力推 flutter !，主要以下几点

  • 快速增长的 flutter 应用
  • 多平台支持
  • 设备优化的好
  • 丰富的组件库
  • IDE 环境成熟 Visual Studio Code, Android Studio, and IntelliJ

• 简易安装

snapcraft.io/flutter

$ snap install --classic flutter
$ snap install --classic code
$ code --install-extension dart-code.flutter

• 快速模板

$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-linux-desktop

$ flutter create counter
$ cd counter
$ flutter run -d linux

现有项目升级

$ cd my_flutter_app
$ flutter create .

• 代码示例

  • github.com/flutter/sam…

  

  • github.com/flutter/gal…

  

• 教程 Write a Flutter desktop application

codelabs.developers.google.com/codelabs/fl…

组件库升级、对 ios 支持加强

• 新增 iOS 功能

  • CupertinoSearchTextField api.flutter-io.cn/flutter/cup…

  • CupertinoFormSection、CupertinoFormRow 和 CupertinoTextFormFieldRow api.flutter.cn/flutter/cup… api.flutter.cn/flutter/cup… api.flutter.cn/flutter/cup…

  • 整体性能优化 github.com/flutter/flu…

• 新增 Widget: Autocomplete 和 ScaffoldMessenger

  • AutocompleteCore github.com/flutter/flu…

  • ScaffoldMessenger github.com/flutter/flu…

Flutter for Surface Duo & 折叠屏

• docs.microsoft.com/zh-cn/dual-…

• docs.microsoft.com/zh-cn/dual-…

混合编程

flutter.cn/docs/develo…

过去，额外 Flutter 实例的内存占用量与第一个 Flutter 实例相同。在 Flutter 2 中，我们将创建额外 Flutter 引擎的静态内存占用量降低了约 99%，使每个实例的占用量大约为 180kB。

Dart Null Safety

Dart 是一种类型安全的语言，这意味着当开发者获取某种类型的变量时，编译器可以保证它是该类型，但是类型安全本身不能保证变量不是 null。

Null errors 非常常见的问题，在 GitHub 上 可以搜索到成千上万由于 null 导致 Dart 代码出现异常的问题，甚至有成千上万的 commits 试图解决这些问题。

• dartpad.dev/
• nullsafety.dartpad.dev/

void main() {
  ps(null);
}

void ps(List<String> files) {
  for (var file in files) {
    print(file.isEmpty());
  }
}

最后，个人的额外提醒，目前在根目录的 analysis_options.yaml 添加如下配置就可以开启 null safety，另外 Flutter 需要 dart sdk 2.9 。

analyzer:
 enable-experiment:
 - non-nullable

flutter fix

• 统计

dart fix --dry-run

• 应用

dart fix --apply

flutter DevTools 开发工具升级

• 性能监控

flutter.dev/docs/perf/r…

.vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "flutter_learn_news-1.0.15",
      "request": "launch",
      "type": "dart"
    },
    {
      "name": "profile",
      "request": "launch",
      "type": "dart",
      "flutterMode": "profile"
    }
  ]
}

• Invert Oversized Images

DevTools 的另一个新功能是能够轻松发现所显示的分辨率低于其实际分辨率的图像，这有助于追踪应用过大和内存占用过多等情况。若要启用此功能，请在 Flutter Inspector 中启用 Invert Oversized Images。

• 弹性布局

Android Studio/IntelliJ 扩展

我们也为 IntelliJ 系列 IDE 的 Flutter 插件添加了一些适用于 Flutter 2 的新功能。首先，我们在其中新增了一个项目向导，该向导与 IntelliJ 中的新向导风格一致。

Visual Studio Code 扩展

适用于 Visual Studio Code 的 Flutter 扩展也针对 Flutter 2 进行了优化，我们首先引入了一些测试增强功能，例如重新运行失败测试的能力。

经过两年的逐步发展，对 Dart 的 LSP (语言服务器协议) 支持已经成为在 Flutter 扩展中将 Dart 分析器集成到 Visual Studio Code 中的默认方式。LSP 支持为 Flutter 开发带来了许多改进，包括在当前的 Dart 文件中应用特定的所有修复，以及能够补全代码以生成完整函数调用 (包括括号和所需参数) 的能力。

LSP 支持不仅限于 Dart，它还支持 pubspec.yaml 及 analysis_options.yaml 文件中的代码补全。

sentry 升级对 flutter 的支持

docs.sentry.io/platforms/f…

整合了对设备端错误的收集

upgraded firebase plugins for flutter

firebase.flutter.dev/

Flutter Community Plus Plugins

plus.fluttercommunity.dev/

google mobile ads for flutter

DartPad 升级到支持 Flutter 2

dartpad.dev/

配置 flutter 2

• 下载 Dev channel (macOS)

flutter.dev/docs/develo…

• fvm 切换

github.com/leoafarias/…

复制 sdk 到 /Users/{youname}/.fvm/versions

fvm list
fvm use 2.1.0

• 启用特性

flutter config --enable-macos-desktop
flutter config --enable-windows-desktop
flutter config --enable-linux-desktop

• 编译

flutter run -d windows
flutter run -d macos
flutter run -d linux
flutter run -d android
flutter run -d ios
flutter run -d web

参考

• flutter.gskinner.com/
• github.com/gskinnerTea…
• mp.weixin.qq.com/s/EzS3dtpZB…
• docs.sentry.io/platforms/f…
• snapcraft.io/flutter
• plus.fluttercommunity.dev/
• medium.com/flutter/flu…
• rive.app/
• medium.com/flutter/ann…
• www.windowscentral.com/surface-duo