FlutterGenとは

Flutterでは画像などのファイルを指定する場合、
パスを文字列で指定する。

Widget build(BuildContext context) {
  return Image.asset('assets/images/profile.jpeg');
}

ただ、打ち間違いやいちいち確認しないといけないので、めんどう。。

コードを生成することで、補完が効くようになり、
安全＆楽チンにリソースファイルを扱うことができるツール

Widget build(BuildContext context) {
  return Assets.images.profile.image();
}

インストール

Homebrew、Dart Command-line、build_runnerという、
3つのパターンで実行できる方法が用意されてる

# Homebrew
$ brew install FlutterGen/tap/fluttergen
$ fluttergen

# Dart Command-line
$ dart pub global activate flutter_gen
$ fluttergen

# build_runner
$ fvm flutter pub add dev:build_runner dev:flutter_gen_runner
$ fvm flutter pub get
$ fvm flutter run build_runner build

HomebrewとDart Command-lineは単体で動くため生成速度が早く、
build_runnerは他のものと一緒に動くけど、その分時間がかかる感じ。

一般的なプロジェクトだと、build_runnerで十分っぽく、
コマンドを打ち直すのも大変なので、build_runner方式にした

設定

pubspec.yamlでいろいろ設定できる

# pubspec.yaml
flutter_gen:
  output: lib/gen/ # Optional (default: lib/gen/)
  line_length: 80 # Optional (default: 80)
  
  # Optional
  integrations:
    flutter_svg: true
    flare_flutter: true
    rive: true
    lottie: true
  
  colors:
    inputs:
      - assets/color/colors.xml

カラーリストも生成できて、こんなXMLを入力できる

<color name="milk_tea">#F5CB84</color>
<color name="cinnamon" type="material">#955E1C</color>
<color name="yellow_ocher" type="material material-accent">#DF9527</color>

使い方

自動生成されたファイルはこんな感じで使える
integrationsを使うと、対応した関数が生えてくる感じ

font名やcolor名も自動生成してくれる

// assets.gen.dart
final AssetImage assetImage = Assets.images.profile;
final Image image = Assets.images.profile.image(/*...*/);
final String path = Assets.images.profile.path;
final ImageProvider provider = Assets.images.profile.provider(/*...*/);

// integrations : flutter_svg
final SvgPicture svg = Assets.images.profile.svg(/*...*/);

// colors.gen.dart
final Color color = ColorName.cinnamon;

// fonts.gen.dart
final String fontname = FontFamily.robotoMono;

以上!! 便利。。(*´ω｀*)

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

FlutterGenでリソースファイルのパスを安全に扱う(画像/色/フォント名)

FlutterGenとは

インストール

設定

使い方

参考にしたサイトさま