🐱

【flutter】FlutterGenを使う

2022/06/01に公開

Flutter

tech

FlutterGenとは

FlutterGenでできること

自動生成により画像などのリソースファイルへアクセスできるようになる

実装する時にコード補完が効くのでタイポしなくなる

静的解析ができるので存在しないファイルの指定などによる実行時のエラーを防ぐ

FlutterGenのインストール

pubspec.yaml

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

https://pub.dev/packages/build_runner

flutter pub getを忘れずに。

FlutterGenを使う

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

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ファイルなどの画像ファイル(assets/images/にsmile_picture.pngをおいた場合)

普通に書く

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 を使用しています、assets/images/にsmile_icon.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を使用
fontFamily: FontFamily.notoSansJP