[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

アセットの設定

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でアクセスできるように変更されます。

まとめ

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

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

公式ページ