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

阳光穿透心脏的1/2处 2022-11-06 13:59 8阅读 0赞

## 谷歌开发者官文 ##

[https://mp.weixin.qq.com/s/EzS3dtpZB\_i9p358qqlBpg][https_mp.weixin.qq.com_s_EzS3dtpZB_i9p358qqlBpg]

![6061713729db71994a54b58ee433d552.png][]

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

![0c5e7cca3b6cea52797e7907d0594227.png][]

![bce36520117cc425850e7fdd2f1809cf.png][]

*  [https://flutter.gskinner.com/][https_flutter.gskinner.com]
 *  [https://github.com/gskinnerTeam/flutter-folio][https_github.com_gskinnerTeam_flutter-folio]

## web 平台优化、进入稳定版 ##

*  3 个方向
    
     *  pwa: 缓存、push 推送服务、桌面快捷、消息提示
     *  spa: 单页程序类似 vue rect
     *  expanding mobile: 快速迁移 app、复用代码
 *  irobot 构建基于 flutter

![2a228bd7e2860b60bd3d29ef663fce54.png][]

[https://edu.irobot.com/the-latest/building-a-coding-experience-for-all][https_edu.irobot.com_the-latest_building-a-coding-experience-for-all]

*  技术架构

![daff27cf45a82d912372377b8dec1bcd.png][]

2D 3D 渲染 WebGL Skia WebAssembly Canvas

*  稳定的版本

![bc4fd376ddf26c469b418a83e688657e.png][]

*  性能
    
     *  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.
 *  试水项目
    
     *  编辑器  
        [https://rive.app/][https_rive.app]
     *  动画  
        [https://flutterplasma.dev/][https_flutterplasma.dev]
     *  invoice  
        [https://www.invoiceninja.com/][https_www.invoiceninja.com]

## canonical 支持 ##

[https://medium.com/flutter/announcing-flutter-linux-alpha-with-canonical-19eb824590a9][https_medium.com_flutter_announcing-flutter-linux-alpha-with-canonical-19eb824590a9]

[https://canonical.com/][https_canonical.com]

> Canonical 公司是一个私营公司，由南非的企业家马克·沙特尔沃思创建，主要为了促进开源软件项目。 Canonical 在马恩岛登记注册，其雇员分布在世界各地，其主要办事处在伦敦，在蒙特利尔也有办事处。Canonical 公司支持并创建了几个项目，主要都是自由/开源软件（FOSS）或是一些旨在改善自由软件开发者和贡献者的工具。

*  why canonical 大力推 flutter !，主要以下几点
    
     *  快速增长的 flutter 应用
     *  多平台支持
     *  设备优化的好
     *  丰富的组件库
     *  IDE 环境成熟 Visual Studio Code, Android Studio, and IntelliJ
 *  简易安装

[https://snapcraft.io/flutter][https_snapcraft.io_flutter]

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
</pre> </td> 
   <td> <pre>$ snap install --classic flutter
$ snap install --classic code
$ code --install-extension dart-code.flutter
</pre> </td> 
  </tr> 
 </tbody> 
</table>

*  快速模板

![465e2f482498995556f608602f84d354.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
</pre> </td> 
   <td> <pre>$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-linux-desktop

$ flutter create counter
$ cd counter
$ flutter run -d linux
</pre> </td> 
  </tr> 
 </tbody> 
</table>

现有项目升级

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
</pre> </td> 
   <td> <pre>$ cd my_flutter_app
$ flutter create .
</pre> </td> 
  </tr> 
 </tbody> 
</table>

*  代码示例
    
     *  [https://github.com/flutter/samples/tree/master/experimental/desktop\_photo\_search][https_github.com_flutter_samples_tree_master_experimental_desktop_photo_search]
    
    ![bc58792ae5f7753b0291374a5edabf84.png][]
    
     *  [https://github.com/flutter/gallery][https_github.com_flutter_gallery]
    
    ![a8e2f7c35b3595c5be15690c3fab8bfa.png][]
 *  教程 Write a Flutter desktop application

[https://codelabs.developers.google.com/codelabs/flutter-github-graphql-client/index.html\#0][https_codelabs.developers.google.com_codelabs_flutter-github-graphql-client_index.html_0]

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

*  新增 iOS 功能
    
     *  CupertinoSearchTextField  
        [https://api.flutter-io.cn/flutter/cupertino/CupertinoSearchTextField-class.html][https_api.flutter-io.cn_flutter_cupertino_CupertinoSearchTextField-class.html]  
        ![f148edb99bb49d38e25b75d4edd8c8da.png][]
     *  CupertinoFormSection、CupertinoFormRow 和 CupertinoTextFormFieldRow  
        [https://api.flutter.cn/flutter/cupertino/CupertinoFormSection-class.html][https_api.flutter.cn_flutter_cupertino_CupertinoFormSection-class.html]  
        [https://api.flutter.cn/flutter/cupertino/CupertinoFormRow-class.html][https_api.flutter.cn_flutter_cupertino_CupertinoFormRow-class.html]  
        [https://api.flutter.cn/flutter/cupertino/CupertinoTextFormFieldRow-class.html][https_api.flutter.cn_flutter_cupertino_CupertinoTextFormFieldRow-class.html]  
        ![3dbd6bd1e60fba09ef210187497cce22.png][]
     *  整体性能优化  
        [https://github.com/flutter/flutter/issues/60267\#issuecomment-762786388][https_github.com_flutter_flutter_issues_60267_issuecomment-762786388]
 *  新增 Widget: Autocomplete 和 ScaffoldMessenger
    
     *  AutocompleteCore  
        [https://github.com/flutter/flutter/pull/62927][https_github.com_flutter_flutter_pull_62927]  
        ![64418cef995bddd1c0261efb1e574a9f.png][]
     *  ScaffoldMessenger  
        [https://github.com/flutter/flutter/pull/64101][https_github.com_flutter_flutter_pull_64101]  
        ![a876e2c80f9e82cd1a37d613d8e0e8fd.png][]

## Flutter for Surface Duo & 折叠屏 ##

![be3a8109c3914b9c872530f2f3e67961.png][]

![966d57981bcc2903d79e986d44a880ca.png][]

*  [https://docs.microsoft.com/zh-cn/dual-screen/flutter/][https_docs.microsoft.com_zh-cn_dual-screen_flutter]
 *  [https://docs.microsoft.com/zh-cn/dual-screen/flutter/mediaquery][https_docs.microsoft.com_zh-cn_dual-screen_flutter_mediaquery]

## 混合编程 ##

[https://flutter.cn/docs/development/add-to-app][https_flutter.cn_docs_development_add-to-app]

![c0715dc75bc31ff6304f3aa9aafc7428.png][]

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

## Dart Null Safety ##

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

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

*  [https://dartpad.dev/][https_dartpad.dev]
 *  [https://nullsafety.dartpad.dev/][https_nullsafety.dartpad.dev]

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
</pre> </td> 
   <td> <pre>void main() {
  ps(null);
}

void ps(List&lt;String&gt; files) {
  for (var file in files) {
    print(file.isEmpty());
  }
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
</pre> </td> 
   <td> <pre>analyzer:
 enable-experiment:
 - non-nullable
</pre> </td> 
  </tr> 
 </tbody> 
</table>

## flutter fix ##

*  统计

*  应用

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
</pre> </td> 
   <td> <pre>dart fix --apply
</pre> </td> 
  </tr> 
 </tbody> 
</table>

## flutter DevTools 开发工具升级 ##

*  性能监控

[https://flutter.dev/docs/perf/rendering/ui-performance][https_flutter.dev_docs_perf_rendering_ui-performance]

.vscode/launch.json

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre> </td> 
   <td> <pre>{
  // 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"
    }
  ]
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

![602de6e4519b0c1a70fc44b57b0abbaf.png][]

*  Invert Oversized Images

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

![375972c3f687f78f9cc914bf19f3187b.png][]

![57398e7fc1c6f61289ed04f6ab9cdc2e.png][]

*  弹性布局

![bcbd70121c3ea27be40254aa3a6b6231.png][]

## Android Studio/IntelliJ 扩展 ##

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

![1a81032c4b4a93a9bdea429f90c7a835.png][]

![ba2fa39cc3ed4a5812c4d2fafcf8566e.png][]

## Visual Studio Code 扩展 ##

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

![b0ed21178d719bb9026322e5fa8c99db.png][]

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

![70048f9005ec48efb5ed8e9b6693b51f.png][]

![924b80583a94142bcc4983cd31e6c742.png][]

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

![497bdafd94aece8ff3491740b0067d98.png][]

## sentry 升级对 flutter 的支持 ##

[https://docs.sentry.io/platforms/flutter/][https_docs.sentry.io_platforms_flutter]

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

## upgraded firebase plugins for flutter ##

[https://firebase.flutter.dev/][https_firebase.flutter.dev]

![1a6b623a090839357585f45f427e613e.png][]

## Flutter Community Plus Plugins ##

[https://plus.fluttercommunity.dev/][https_plus.fluttercommunity.dev]

## google mobile ads for flutter ##

![2ceff9930661c9e762a7952cd71630e6.png][]

## DartPad 升级到支持 Flutter 2 ##

![9e728141c906afd7316924c2b73650cc.png][]

[https://dartpad.dev/][https_dartpad.dev]

## 配置 flutter 2 ##

*  下载 Dev channel (macOS)

[https://flutter.dev/docs/development/tools/sdk/releases?tab=macos][https_flutter.dev_docs_development_tools_sdk_releases_tab_macos]

*  fvm 切换

[https://github.com/leoafarias/fvm][https_github.com_leoafarias_fvm]

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

*  启用特性

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
</pre> </td> 
   <td> <pre>flutter config --enable-macos-desktop
flutter config --enable-windows-desktop
flutter config --enable-linux-desktop
</pre> </td> 
  </tr> 
 </tbody> 
</table>

*  编译

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
</pre> </td> 
   <td> <pre>flutter run -d windows
flutter run -d macos
flutter run -d linux
flutter run -d android
flutter run -d ios
flutter run -d web
</pre> </td> 
  </tr> 
 </tbody> 
</table>

## 参考 ##

*  [https://flutter.gskinner.com/][https_flutter.gskinner.com]
 *  [https://github.com/gskinnerTeam/flutter-folio][https_github.com_gskinnerTeam_flutter-folio]
 *  [https://mp.weixin.qq.com/s/EzS3dtpZB\_i9p358qqlBpg][https_mp.weixin.qq.com_s_EzS3dtpZB_i9p358qqlBpg]
 *  [https://docs.sentry.io/platforms/flutter/][https_docs.sentry.io_platforms_flutter]
 *  [https://snapcraft.io/flutter][https_snapcraft.io_flutter]
 *  [https://plus.fluttercommunity.dev/][https_plus.fluttercommunity.dev]
 *  [https://medium.com/flutter/flutter-web-support-hits-the-stable-milestone-d6b84e83b425][https_medium.com_flutter_flutter-web-support-hits-the-stable-milestone-d6b84e83b425]
 *  [https://rive.app/][https_rive.app]
 *  [https://medium.com/flutter/announcing-flutter-linux-alpha-with-canonical-19eb824590a9][https_medium.com_flutter_announcing-flutter-linux-alpha-with-canonical-19eb824590a9]
 *  [https://www.windowscentral.com/surface-duo][https_www.windowscentral.com_surface-duo]

--------------------

[https://ducafecat.tech][https_ducafecat.tech]

[https://ducafecat.gitee.io][https_ducafecat.gitee.io]

[https_mp.weixin.qq.com_s_EzS3dtpZB_i9p358qqlBpg]: https://mp.weixin.qq.com/s/EzS3dtpZB_i9p358qqlBpg
[6061713729db71994a54b58ee433d552.png]: /images/20221023/7bd7b299232046d38f6cb9c3bcaf5d99.png
[0c5e7cca3b6cea52797e7907d0594227.png]: /images/20221023/b6709405b50842d28907430b3beaf8ee.png
[bce36520117cc425850e7fdd2f1809cf.png]: /images/20221023/159c27b5738845b9a38f212163688545.png
[https_flutter.gskinner.com]: https://flutter.gskinner.com/
[https_github.com_gskinnerTeam_flutter-folio]: https://github.com/gskinnerTeam/flutter-folio
[2a228bd7e2860b60bd3d29ef663fce54.png]: /images/20221023/68edd3a1af394e25b8ffc712a45eec26.png
[https_edu.irobot.com_the-latest_building-a-coding-experience-for-all]: https://edu.irobot.com/the-latest/building-a-coding-experience-for-all
[daff27cf45a82d912372377b8dec1bcd.png]: /images/20221023/01e4a0800b084657a1922ff21bb02f35.png
[bc4fd376ddf26c469b418a83e688657e.png]: /images/20221023/e8d2e1852d9d407b82e40e63268c0a4e.png
[https_rive.app]: https://rive.app/
[https_flutterplasma.dev]: https://flutterplasma.dev/
[https_www.invoiceninja.com]: https://www.invoiceninja.com/
[https_medium.com_flutter_announcing-flutter-linux-alpha-with-canonical-19eb824590a9]: https://medium.com/flutter/announcing-flutter-linux-alpha-with-canonical-19eb824590a9
[https_canonical.com]: https://canonical.com/
[https_snapcraft.io_flutter]: https://snapcraft.io/flutter
[465e2f482498995556f608602f84d354.png]: /images/20221023/2764d54a32464809a250894e9e549391.png
[https_github.com_flutter_samples_tree_master_experimental_desktop_photo_search]: https://github.com/flutter/samples/tree/master/experimental/desktop_photo_search
[bc58792ae5f7753b0291374a5edabf84.png]: /images/20221023/1a904f83f757468c8c7dddd41a713b7d.png
[https_github.com_flutter_gallery]: https://github.com/flutter/gallery
[a8e2f7c35b3595c5be15690c3fab8bfa.png]: /images/20221023/4254a0681aad471ca774f8df8e8cd9e6.png
[https_codelabs.developers.google.com_codelabs_flutter-github-graphql-client_index.html_0]: https://codelabs.developers.google.com/codelabs/flutter-github-graphql-client/index.html#0
[https_api.flutter-io.cn_flutter_cupertino_CupertinoSearchTextField-class.html]: https://api.flutter-io.cn/flutter/cupertino/CupertinoSearchTextField-class.html
[f148edb99bb49d38e25b75d4edd8c8da.png]: /images/20221023/2b147434cf554d23882e1afcc082083f.png
[https_api.flutter.cn_flutter_cupertino_CupertinoFormSection-class.html]: https://api.flutter.cn/flutter/cupertino/CupertinoFormSection-class.html
[https_api.flutter.cn_flutter_cupertino_CupertinoFormRow-class.html]: https://api.flutter.cn/flutter/cupertino/CupertinoFormRow-class.html
[https_api.flutter.cn_flutter_cupertino_CupertinoTextFormFieldRow-class.html]: https://api.flutter.cn/flutter/cupertino/CupertinoTextFormFieldRow-class.html
[3dbd6bd1e60fba09ef210187497cce22.png]: /images/20221023/4f25707e0bf443fcb162abc3398317cb.png
[https_github.com_flutter_flutter_issues_60267_issuecomment-762786388]: https://github.com/flutter/flutter/issues/60267#issuecomment-762786388
[https_github.com_flutter_flutter_pull_62927]: https://github.com/flutter/flutter/pull/62927
[64418cef995bddd1c0261efb1e574a9f.png]: /images/20221023/c820c9d602ec444fa588c937b8452aa0.png
[https_github.com_flutter_flutter_pull_64101]: https://github.com/flutter/flutter/pull/64101
[a876e2c80f9e82cd1a37d613d8e0e8fd.png]: /images/20221023/940cc1e6412d42bca83352d7637bc09c.png
[be3a8109c3914b9c872530f2f3e67961.png]: /images/20221023/22ae4cbd60584408a3dc1161ea43fbb3.png
[966d57981bcc2903d79e986d44a880ca.png]: /images/20221023/1a98e003a9964ea38dae969db5fc45b8.png
[https_docs.microsoft.com_zh-cn_dual-screen_flutter]: https://docs.microsoft.com/zh-cn/dual-screen/flutter/
[https_docs.microsoft.com_zh-cn_dual-screen_flutter_mediaquery]: https://docs.microsoft.com/zh-cn/dual-screen/flutter/mediaquery
[https_flutter.cn_docs_development_add-to-app]: https://flutter.cn/docs/development/add-to-app
[c0715dc75bc31ff6304f3aa9aafc7428.png]: /images/20221023/092676a25cfc4af38cbac526bf69e9cb.png
[https_dartpad.dev]: https://dartpad.dev/
[https_nullsafety.dartpad.dev]: https://nullsafety.dartpad.dev/
[https_flutter.dev_docs_perf_rendering_ui-performance]: https://flutter.dev/docs/perf/rendering/ui-performance
[602de6e4519b0c1a70fc44b57b0abbaf.png]: /images/20221023/dbf56d48a6f54b908ae7181e69d6be72.png
[375972c3f687f78f9cc914bf19f3187b.png]: /images/20221023/2beb423723dc466c87dfa061fab11da0.png
[57398e7fc1c6f61289ed04f6ab9cdc2e.png]: /images/20221023/94d33655e941412a8c7da526ce4ac8d0.png
[bcbd70121c3ea27be40254aa3a6b6231.png]: /images/20221023/c04b2e08f7664975b4fe11d81f142652.png
[1a81032c4b4a93a9bdea429f90c7a835.png]: /images/20221023/7c8763d7478f44db9906b25e0b37a381.png
[ba2fa39cc3ed4a5812c4d2fafcf8566e.png]: /images/20221023/40a0b92551fe4b76a01c25d195563d71.png
[b0ed21178d719bb9026322e5fa8c99db.png]: /images/20221023/dd139e4e979240b2b5594577d5f120ec.png
[70048f9005ec48efb5ed8e9b6693b51f.png]: /images/20221023/1b5dba275d964b9bb3903f3284383ff3.png
[924b80583a94142bcc4983cd31e6c742.png]: /images/20221023/eba2434658cf4f07a70598b9b9e900a4.png
[497bdafd94aece8ff3491740b0067d98.png]: /images/20221023/9dbf96879ba34a34bb56e83728c65d32.png
[https_docs.sentry.io_platforms_flutter]: https://docs.sentry.io/platforms/flutter/
[https_firebase.flutter.dev]: https://firebase.flutter.dev/
[1a6b623a090839357585f45f427e613e.png]: /images/20221023/85d79c1c5c784940b4e175fd21b8460f.png
[https_plus.fluttercommunity.dev]: https://plus.fluttercommunity.dev/
[2ceff9930661c9e762a7952cd71630e6.png]: /images/20221023/b0205d6bc7af48209efa1650ef21712e.png
[9e728141c906afd7316924c2b73650cc.png]: /images/20221023/810a8dc212744fac93fd2e8a6b75be12.png
[https_flutter.dev_docs_development_tools_sdk_releases_tab_macos]: https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
[https_github.com_leoafarias_fvm]: https://github.com/leoafarias/fvm
[https_medium.com_flutter_flutter-web-support-hits-the-stable-milestone-d6b84e83b425]: https://medium.com/flutter/flutter-web-support-hits-the-stable-milestone-d6b84e83b425
[https_www.windowscentral.com_surface-duo]: https://www.windowscentral.com/surface-duo
[https_ducafecat.tech]: https://ducafecat.tech/
[https_ducafecat.gitee.io]: https://ducafecat.gitee.io/