📂

【Flutter】画像を効率的に追加する方法（flutter_gen）

2023/04/14に公開

画像を効率的に追加する方法

アプリを実装する際に、画像やフォントをassetsに追加することがあります。
追加した画像やフォントを反映する際に、assets/images/... や NotoSans など、ソースコード上で文字列の指定が必要です。
文字列の指定 → リロード → 反映の確認のように手順がいくつか発生するので、手順の途中でタイポが発生するかもしれません。
そこで、文字列指定の簡略化とタイポ防止のために、flutter_genを使用してみました。

https://pub.dev/packages/flutter_gen

やったこと

事前準備

flutter_genの有効化

追加作業

pubspec.yamlに記載
fluttergenの実行
画像パスの指定
フォントの指定

`flutter_gen`の有効化

flutter_genのコマンドを有効化するために下記のコマンドを実行

dart pub global activate flutter_gen

pubspec.yamlに記載

pubspec.yamlに追加するassetsを記載します

今回は、下記のような画像とフォントを使用します。

  assets:
    - assets/images/user
    - assets/images/post

  fonts:
    - family: NotoSansJP
      fonts:
        - asset: assets/fonts/Noto_Sans_JP/NotoSansJP-Regular.otf
          weight: 400
        - asset: assets/fonts/Noto_Sans_JP/NotoSansJP-Bold.otf
          weight: 700

`fluttergen`の実行

fluttergenを実行します

$ fluttergen                                                                
FlutterGen v5.2.0 Loading ... project-name/pubspec.yaml
Generated: /project-name/lib/gen/assets.gen.dart
Generated: /project-name/lib/gen/fonts.gen.dart
FlutterGen finished.

画像パスの指定

自動生成されたClassを使用してパスを指定します

Assets.~と入力するとサジェストが出てくるので、
タイポの心配なくパスを指定できます。🙌

フォントの指定

自動生成されたClassを使用してフォントを指定できます

生成されたClassはFontFamilyでプロパティを指定するだけです。

公式ドキュメント

画像の追加

フォントの追加

利用時に検討した点

自動生成されるディレクトリ名を変えたい

FlutterGen also support generating other style of Assets class:

pubspec.yamlに記載して生成されるディレクトリのパスを指定できます。

# pubspec.yaml
# ...

flutter_gen:
  output: lib/gen/ # Optional (default: lib/gen/)
  line_length: 80 # Optional (default: 80)

enum内では、Assetsクラスのパスを利用できない

enumクラスの定義にはconstが必要です。
加えて、constの引数には定数式が必要なためにAssetsクラスを利用できません。

参考

参考になりました🙇‍♂️

まとめ

指定を効率化することでロジックに集中できます。
ご参考いただけると幸いです。

GitHubで編集を提案