[FlutterでAssets名を自動生成] 手っ取り早く始めるFlutterGen

プラグイン

FlutterGenとは

Flutterでは、アセット(画像や音楽データのリソース)をアプリに含めてリリースできます。一般的にはAssetsというディレクトリの中にデータを置きます。しかし、ファイルなので、普通に使用すると、ファイル名をコピーしないといけません。そのため、コピーの間違いなどが発生しますし、コピーするのが手間です。それを解決するのが、FlutterGenです。
Assetsの中のディレクトリを見て、ファイル名の代わりに使用できる、クラスを生成します。そのため、

  • エディタの予測機能でファイル名を指定できる
  • クラスなので、ファイル名を間違えない

この投稿では、FlutterGenをお手軽に使うための方法を紹介します。ちなみに作者はwasabeefさん、lcdsmaoさんという日本の方です。

インストール

以下を実施して、pubspec.yamlに依存性を入力します。

flutter pub add flutter_gen_runner --dev
flutter pub add build_runner --dev
flutter pub get

アセットの設定

pubspec.yaml にアセットを設定します。今回の例は、以下のようにアセットの入っているディレクトリを指定します。

  assets:
  - assets/images/
  - assets/sounds/

再帰的にサブフォルダを見ません。そのため、各フォルダを指定する必要があります。

生成

flutter pub run build_runner build

結果

lib/gen/assets.gen.dart が生成されます。このクラスの中にファイル名が記載されます。
soundsの中にwater.mp3という音声ファイルがあった場合、プログラム内からは、Assets.sounds.waterでアクセスできるようになります。
このとき、water.mp3とwater.m4aが存在した場合、waterMp3とwaterM4aでアクセスできるように変更されます。

注意点

実施して気がついたことを書き足していこうと思います。

  • ファイル名が数字やアンダーバーから始まる場合、変換ができない

    • ファイル名の最初にアルファベットをつけましょう。

  • 「The pubspec.lock file has changed since the .dart_tool\package_config.json file was generated, please run “flutter pub get” again.」のエラー

「flutter pub get」を2回繰り返すといけるらしい。駄目な場合、以下のページを参照。

【Flutter】flutter_gen使用時に「pub finished with exit code 65」

まとめ

FlutterGenの使い方について記載いたしました。色々と設定できますが、一番お手軽な方法を記載しました。
以下のようなこともできますので、詳しい方法は、公式を参照してください。

  • OS依存の設定をして高速に生成(たまにしかアセットを更新しないので､使用してません)
  • 生成するクラスのディレクトリやファイル名の変更
  • フォントや色のアセットの設定

公式ページ