flutterでasset登録するフォルダの階層が深い場合の対策

最近、flutterを触る機会があったのですが、assetにファイルを大量に登録したい場合に、登録してもファイルが読み込めず困ったことがありました。
その際つまずいたポイントについてご紹介しようと思います。

asset登録はサブフォルダに適応されない?

早速結論になります。
flutterではasset登録する際にファイルだけでなくフォルダを指定できますが、そのフォルダの直下のファイルしか適応されず、サブフォルダは適応されません。

分かってしまえばどうってことない話ですが、flutter初心者だった私は、「フォルダ登録してあるしな〜」と思い、別の要因だと決めつけてなかなか気づけませんでした。。

よく見ると公式サイトにも説明が書いてありました。。。。

Note: Only files located directly in the directory are included unless there are files with the same name inside a subdirectory (see Asset Variants). To add files located in subdirectories, create an entry per directory.

https://docs.flutter.dev/ui/assets-and-images

フォルダに直接配置されているファイルのみが登録されるということのようです。。。

asset内のファイルを一気に登録する方法

さて、サブフォルダは登録されないことが分かりましたが、「そうはいってもassetフォルダ内にいっぱいサブフォルダがあって全部手動で登録するのは大変だよ〜」って場合もあるかと思います。

そんな場合は「asset_fill」というライブラリを使って解決できます。
このライブラリを使用するとassetフォルダにあるファイルを全て一括でpubspec.yamlに登録することができます。

使い方は簡単で、まずpubspec.yamlのasset登録部に、placeholderと追記します。

flutter:
  assets:
    - placeholder

その後、asset登録したいflutterプロジェクトのルートパスでコマンドプロンプトを開き、以下コマンドを実行します。

flutter pub run asset_fill

そうするとpubspec.yamlにassetフォルダ内のファイルが全て登録されるので、役目を終えた「placeholder」を削除します。

使用方法については、asset_fillの公式ドキュメントもありますので合わせてご確認ください

まとめ

ライブラリって便利ですね~。
ただライブラリの存在を知らないと使えない(当たり前!)ので少しずつ勉強していきたいところです。

この記事を書いた人

目次