2021 關於 Flutter v2 我整理了16個重要特性

會煮咖啡的貓發表於2021-03-09
Flutter

B站

www.bilibili.com/video/BV1eK…

谷歌開發者官文

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

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

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.

  • 試水專案

canonical 支援

medium.com/flutter/ann…

canonical.com/

Canonical 公司是一個私營公司，由南非的企業家馬克·沙特爾沃思建立，主要為了促進開源軟體專案。 Canonical 在馬恩島登記註冊，其僱員分佈在世界各地，其主要辦事處在倫敦，在蒙特利爾也有辦事處。Canonical 公司支援並建立了幾個專案，主要都是自由/開源軟體（FOSS）或是一些旨在改善自由軟體開發者和貢獻者的工具。

  • 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 .
複製程式碼

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

元件庫升級、對 ios 支援加強

Flutter for Surface Duo & 摺疊屏

混合程式設計

flutter.cn/docs/develo…

過去，額外 Flutter 例項的記憶體佔用量與第一個 Flutter 例項相同。在 Flutter 2 中，我們將建立額外 Flutter 引擎的靜態記憶體佔用量降低了約 99%，使每個例項的佔用量大約為 180kB。

Dart Null Safety

Dart 是一種型別安全的語言，這意味著當開發者獲取某種型別的變數時，編譯器可以保證它是該型別，但是型別安全本身不能保證變數不是 null。

Null errors 非常常見的問題，在 GitHub 上 可以搜尋到成千上萬由於 null 導致 Dart 程式碼出現異常的問題，甚至有成千上萬的 commits 試圖解決這些問題。

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
複製程式碼

參考

相關文章