【Flutter】FlutterGenを使う

FlutterGenとは

Flutterには画像や文字列などのリソースを安全にアクセス出来るようにするためのファイルを自動生成する機能はなく、 pubspec.yaml の assets に指定したリソースを文字列で指定しないといけません。これらの手間とタイポなどのリスクをなるべくなくせるように作られたパッケージがFlutterGenです。

コード自動生成の FlutterGen を作りました。

FlutterGenでできること

主に以下の3つです

• 自動生成により画像などのリソースファイルへアクセスできるようになる
• 実装する時にコード補完が効くのでタイポしなくなる
• 静的解析ができるので存在しないファイルの指定などによる実行時のエラーを防ぐ

FlutterGenのインストール

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_gen_runner: ^4.2.1
  build_runner: ^2.1.11

flutter_gen_runner

build_runner

flutter pub getを忘れずに。

FlutterGenを使う

assetsファイル内にディレクトリや画像またはフォントファイルがある。かつ、以下のようにpubspec.yamlにアクセスするファイルのパスが指定してあることが前提です。

  assets:
    - images/smile_picture.png
    - images/smile_icon.svg

  fonts:
    - family: notoSansJP
      fonts:
        - asset: fonts/notoSansJP.ttf

1.ファイルの生成

FlutterGenを使うために、build_runnerを使ってファイルを自動生成します。

$ flutter pub run build_runner build --delete-conflicting-outputs

lib/gen/assets.gen.dartファイルが自動生成されるはずです。 そのファイルには、assetsディレクトリ内においてある画像やフォントファイルなどのパス情報が書いてあります。

2.ファイルのパスを指定する

補完も表示されるのでとっても使いやすいです。

.pngや.jpegファイルなどの画像ファイル

普通に書く

Image.asset(
  'assets/images/smile_picture.png',
  width: 150.0,
),

FlutterGenを使用して書く

// Image classとして使用する. Image classが持つパラメーターを使用できます
Assets.images.smilePicture.image(
  width: 150.0,
),

// Stringとして使用する
Image.asset(
  Assets.images.smilePicture.path,
  width: 150.0,
),

.svg ファイル(flutter_svg を使用しています)

普通に書く

final svg = SvgPicture.asset('assets/images/smile_icon.svg');

FlutterGenを使用して書く

final svg = SvgPicture.asset(Assets.images.smileIcon);

フォント(assets/font/にnotoSansJP.ttfをおいた場合)

普通に書く

fontFamily: "notoSansJP"

FlutterGenを使用して書く

//FlutterGenを使用
fontFamily: FontFamily.notoSansJP

最後に

思った以上に便利で感動しました。画像やフォントをたくさん使うプロジェクトには絶対に入れるべきだと思います。

参考

【Flutter/コード自動生成】FlutterGenを使ってみる。