持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第18天，點選檢視活動詳情

spider

一個小型 dart 庫，用於從 assets 資料夾生成 Assets dart 程式碼。它生成 dart 類，其中包含靜態 const 變數，可用於在 Flutter 應用程式中的任何位置安全地引用資產。

示例

使用前

Widget build(BuildContext context) {  return Image(image: AssetImage('assets/background.png')); }

使用後

Widget build(BuildContext context) {  return Image(image: AssetImage(Assets.background)); }

生成的資源

class Assets {  static const String background = 'assets/background.png'; }

此方法不允許字串拼寫錯誤的錯誤範圍。此外，它在 IDE 中提供自動完成功能，當您擁有大量資產時非常方便。

安裝

使用 pub

這個包是一個獨立的庫，未連結到您的專案。因此，無需將其新增到您的 Flutter 專案中，因為它可以作為您所有專案的全域性命令列工具。所以我們可以全域性安裝

pub global activate spider

使用 Homebrew 安裝

brew tap birjuvachhani/spider brew install spider

執行以下命令以檢視幫助：

spider create

用法

建立配置檔案

Spider 提供了一種非常簡單直接的方式來建立配置檔案。執行以下命令，它將建立一個包含預設配置的配置檔案。

spider create

要將配置附加到pubspec.yaml檔案中，請執行以下命令。

spider create --add--in-pubspec

要為配置檔案使用自定義目錄路徑，請執行以下命令。

spider create -p ./directory/path/for/config

現在您可以修改可用的配置，Spider 將在生成 dart 程式碼時使用這些配置。

使用 JSON 配置檔案

雖然上面的命令建立YAML了配置檔案的格式，但spider也支援JSON配置檔案的格式。使用此命令建立JSON配置檔案而不是YAML.

```

Create in root directory

spider create --json ​

or

​

custom directory path

spider create -p ./directory/path/for/config --json ```

無論您使用哪種配置格式，JSON或者YAML，spider 都會自動檢測到它並將其用於程式碼生成。

這是配置檔案中的預設配置：

```

Generated by Spider

​

Generates unit tests to verify that the assets exists in assets directory

generate_tests: true ​

Use this to remove vcs noise created by the generated comments in dart code

no_comments: true ​

Exports all the generated file as the one library

export: true ​

This allows you to import all the generated references with 1 single import!

use_part_of: true ​

Location where all the generated references will be stored

package: resources ​ groups: - path: assets/images   class_name: Images   types: [ .png, .jpg, .jpeg, .webp, .webm, .bmp ] ```

生成程式碼

執行以下命令生成dart程式碼：

spider build

如果您為配置檔案使用自定義目錄路徑，那麼您可以像這樣指定配置檔案路徑：

spider -p ./path/to/config/file/spider.yaml build

手動

觀看目錄

Spider 還可以監視給定目錄的檔案更改並自動重建 dart 程式碼。使用以下命令監視更改：

spider build --watch

有關更多資訊，請參閱幫助：

spider build --help

按副檔名分類

預設情況下，Spider 允許在 dart 程式碼中引用任何檔案。但你可以改變這種行為。您可以指定要引用的檔案。

path: assets class_name: Assets package: res types: [ jpg, png, jpeg, webp, bmp, gif ]

使用字首

您可以為生成的飛鏢引用的名稱使用字首。字首將附加到格式化的參考名稱。

path: assets class_name: Assets package: res prefix: ic

輸出

class Assets {  static const String icCamera = 'assets/camera.png';  static const String icLocation = 'assets/location.png'; }

高階配置

Spider 支援多種配置和分類。如果你想按模組、型別或任何東西對你的資產進行分組，你可以groups在蜘蛛中使用。

示例

假設您的專案中有向量（SVG）和光柵影象，並且您希望我將它們分別分類，以便您可以將它們與單獨的類一起使用。您可以在此處使用組。將向量和光柵影象儲存在單獨的資料夾中，並在配置檔案中指定它們。

spider.yaml groups: - path: assets/images   class_name: Images   package: res - path: assets/vectors   class_name: Svgs   package: res

這裡，列表中的第一項表示將assets/images資料夾的資產分組在類named下，第二項表示將目錄Images資產分組在類name下。assets/vectors``Svgs

因此，當您參考Images類時，自動完成僅建議光柵影象，並且您知道您可以將它們與向量渲染庫一起使用，AssetImage而另一個則與向量渲染庫一起使用。

多路徑配置

從 Spiderv0.4.0中，可以為單個組指定多個路徑以從多個目錄收集引用並生成單個 dart 類下的所有引用。

例子

groups: - paths:     - assets/images     - assets/more_images/   class_name: Images   package: res   types: [ .png, .jpg, .jpeg, .webp, .webm, .bmp ]

通過使用paths，可以指定多個源目錄。assets/images上面的示例將assets/more_images/在一個名為Images.

這個庫還是蠻吸引人的，推薦你在專案中使用，這樣可以更好的管理你的圖片資源。