跳到主內容

在構建時轉換資源

如何設定 Flutter 應用中影像(及其他資源)的自動轉換。

你可以配置你的專案,使用相容的 Dart 包在構建時自動轉換資源。

指定資源轉換

#

pubspec.yaml 檔案中,列出需要轉換的資源以及關聯的轉換器包。

yaml
flutter:
  assets:
    - path: assets/logo.svg
      transformers:
        - package: vector_graphics_compiler

透過此配置,assets/logo.svg 在被複制到構建輸出目錄時,會由 vector_graphics_compiler 包進行轉換。該包將 SVG 檔案預編譯為最佳化的二進位制檔案,可以使用 vector_graphics 包進行顯示,如下所示:

dart
import 'package:vector_graphics/vector_graphics.dart';

const Widget logo = VectorGraphic(loader: AssetBytesLoader('assets/logo.svg'));

向資源轉換器傳遞引數

#

要向資源轉換器傳遞引數字串,也可以在 pubspec 中進行指定:

yaml
flutter:
  assets:
    - path: assets/logo.svg
      transformers:
        - package: vector_graphics_compiler
          args: ['--tessellate', '--font-size=14']

鏈式呼叫資源轉換器

#

資源轉換器可以鏈式呼叫,並按宣告的順序應用。考慮以下使用虛構包的示例:

yaml
flutter:
  assets:
    - path: assets/bird.png
      transformers:
        - package: grayscale_filter
        - package: png_optimizer

在此示例中,bird.png 首先由 grayscale_filter 包進行轉換。隨後,輸出內容在被打包進構建後的應用之前,會由 png_optimizer 包進行再次轉換。

編寫資源轉換器包

#

資源轉換器是一個 Dart 命令列應用,呼叫時會執行 dart run,並至少包含兩個引數:--input(包含待轉換檔案的路徑)和 --output(轉換器程式碼必須將輸出寫入的位置)。

如果轉換器以非零退出程式碼結束,應用構建將失敗,並顯示解釋資源轉換失敗的錯誤訊息。轉換器程序寫入 stderr 流的任何內容都會包含在錯誤訊息中。

在呼叫轉換器期間,FLUTTER_BUILD_MODE 環境變數會被設定為所使用的構建模式的 CLI 名稱。例如,如果你使用 flutter run -d macos --release 執行應用,那麼 FLUTTER_BUILD_MODE 將被設定為 release

示例

#

有關使用資源轉換幷包含作為轉換器使用的自定義 Dart 包的 Flutter 示例專案,請檢視 Flutter 示例倉庫中的 asset_transformers 專案