FlutterAssetsGenerator，一款Flutter資源索引生成插件

引言

​ 在Flutter中，資源的引用通常都須要如今根目錄下定義一個目錄，例如assets，而後在pubspec.yaml中配置目錄，最後引用，寫法通常以下：

Image.asset(
  'assets/images/add.png',
  width: 40,
  height: 40,
),
複製代碼

​ 這樣引入資源總感受很容易寫錯，目錄和文件名都得寫完整，手滑了一下就容易寫錯。於是又有了下面一種簡化的方法：

///獲取資源目錄
String assetsPath(String name,
    {String rootPath = 'assets/images/',
    String dir = '',
    String fileType = '.png'}) {
  return '$rootPath$dir$name$fileType';
}
複製代碼

​ 先定義一個相似於上面的方法，方法中對路徑進行一下封裝，於是使用資源文件的方式變成了下面這種：

Image.asset(
  assetsPath('add'),
  width: 40,
  height: 40,
)
複製代碼

​ 看起來是減小了很多要手寫的地方，然而仍是要手寫一下文件名，文件後綴不一樣也須要再額外多寫一點內容。並且還要再包一個方法，看起來也不是很好看。

​ FlutterAssetsGenerator就是爲了解決Flutter中資源引用這一個蛋疼的方式而來的。

介紹

​ 若是有作過Android開發的朋友應該都知道，在Android中，資源的索引會有一個R文件，這是一個自動生成的文件。放進資源drawable目錄裏的資源，通常引用就用R.drawable.xx方式引用，這樣找資源首先很方便，再來也不會出現什麼差錯。

​ 本插件想要實現的效果就是這樣的，首先插件會遍歷項目下的assets目錄，而後整理出文件索引，最後生成一個assets.dart文件，如：

///This file is automatically generated. DO NOT EDIT, all your changes would be lost.
class Assets {
  Assets._();

  static const String imagesAdd = 'assets/images/add.png';
  static const String imagesArrowDown = 'assets/images/arrow_down.png';
  static const String imagesBack = 'assets/images/back.png';
  static const String imagesBackWhite = 'assets/images/back_white.png';
  static const String imagesBounds = 'assets/images/bounds.png';
  static const String imagesCloseWhite = 'assets/images/close_white.png';

}
複製代碼

​ 最後引用資源就能夠以下了：

Image.asset(
  Assets.imagesAdd,
  width: 40,
  height: 40,
)
複製代碼

​ 這樣有什麼好處呢？首先資源整理到一塊兒，方便查看，再來引用的時候都是直接引用常量，有代碼提醒，也不怕寫錯了。插件實現的功能其實都是很簡單的，也能夠本身手寫成這樣。本插件的目的就是爲了省略手寫這一步驟，提升生產力。

使用

一、安裝

插件已上傳插件市場，於是打開Preferences->Plugins，在Marketplace能夠直接搜索安裝。

二、配置assets目錄

​ 插件會從pubspec.yaml文件下讀取assets目錄，所以要使用本插件，你須要在pubspec.yaml下配置資源目錄：

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
複製代碼

三、使用

配置完成目錄後，便可生成資源索引文件了：

插件默認的快捷鍵是Alt/Opt + G。

​ 插件也會自動檢測assets目錄下的文件變更，若是發生變更會自動生成新的內容。若是你不須要這個，你也能夠關掉。

資源左側的icon是能夠點擊的，點擊能夠定位到文件處。若是資源是svg，還會顯示預覽。（至於圖片預覽爲啥還沒顯示，目前調試有點問題，因此還沒展現）

四、設置

​ 插件默認生成的文件目錄在lib/generated目錄下，若是你不喜歡，你能夠本身更改，目錄支持多級，以/分割。索引文件的類名默認是Assets，若是你但願Android一點，你也能夠改成R。

​ 插件默認打開了自動檢測功能，若是不須要的時候能夠關掉。

​ 資源索引默認命名是小駝峯式，更符合dart語言規範。開啓Named with parent會爲資源索引加上一級文件夾名，若是有重名的會再多取一級，若是想要索引短一點，能夠關掉此選項。

最後附上github地址，歡迎star，使用插件有什麼問題或者建議，歡迎提出！