flutter_genダウンロードflutter_genソースコードのダウンロード

資産、フォント、色などのフラッターコードジェネレーターは、すべての文字列ベースのAPIを取り除きます。

Swiftgenに触発されました。

モチベーション

アセットパス文字列を直接使用することは安全ではありません。

 # pubspec.yaml
flutter :
  assets :
    - assets/images/profile.jpg

悪い
あなたがタイプミスをしたらどうなりますか？

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

// The following assertion was thrown resolving an image codec:
// Unable to load asset: assets/images/profile.jpeg

⭕️良い
安全に使用したいです。

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

インストール

ホームブリュー

MacOSおよびLinuxで動作します。

brew install FlutterGen/tap/fluttergen

ASDF

MacOSおよびLinuxで動作します。 ASDF-FluttergenはMISEと互換性があります。

 # add plugin
asdf plugin add fluttergen
# or
asdf plugin add fluttergen https://github.com/FlutterGen/asdf-fluttergen.git

# install fluttergen
asdf install fluttergen latest

参照：FlutterGen/ASDF-Fluttergen

パブグローバル

MacOS、Linux、Windowsで動作します。

dart pub global activate flutter_gen

パスをセットアップする必要があるかもしれません。

build_runnerの一部として

build_runnerとfluttergenをパッケージのpubspec.yamlファイルに追加します。

 dev_dependencies:
  build_runner:
  flutter_gen_runner:

Fluttergenをインストールします

flutter pub get

フラッターゲンを使用します

dart run build_runner build

githubアクション

MacOSおよびLinuxで動作します。

- uses : FlutterGen/setup-fluttergen@v1
  with :
    version : ${{ fluttergen_version }}

参照：FlutterGen/Setup-Fluttergen

使用法

構成pubspec.yaml後にfluttergenを実行します。

fluttergen -h

fluttergen -c example/pubspec.yaml

構成ファイル

Fluttergenは、 pubspec.yamlのキーflutterとflutter_genに基づいてDARTファイルを生成します。
デフォルトの構成はここにあります。

 # pubspec.yaml
# ...

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

  # Optional
  integrations :
    flutter_svg : true
    rive : true
    lottie : true

  colors :
    inputs :
      - assets/color/colors.xml

flutter :
  uses-material-design : true
  assets :
    - assets/images/

  fonts :
    - family : Raleway
      fonts :
        - asset : assets/fonts/Raleway-Regular.ttf
        - asset : assets/fonts/Raleway-Italic.ttf
          style : italic

build.yaml

build.yamlで生成オプションを構成することもできます。存在する場合は、 pubspec.yamlの前に読み取られます。

 # build.yaml
# ...

targets :
  $default :
    builders :
      flutter_gen_runner : # or flutter_gen
        options : 
          output : lib/build_gen/ # Optional (default: lib/gen/)
          line_length : 120 # Optional (default: 80)

利用可能なパーサー

資産

アセットと画像を追加するドキュメントに続いて、アセットを指定してアセットを指定すると、Fluttergenは関連するDARTファイルを生成します。
他の特定の構成は必要ありません。
複製されたことを無視します。

 # pubspec.yaml
flutter :
  assets :
    - assets/images/
    - assets/images/chip3/chip.jpg
    - assets/images/chip4/chip.jpg
    - assets/images/icons/paint.svg
    - assets/images/icons/[email protected]
    - assets/json/fruits.json
    - assets/flare/Penguin.flr
    - assets/rive/vehicles.riv
    - pictures/ocean_view.jpg

これらの構成は、デフォルトでlib/gen/ディレクトリの下でassets.gen.dartを生成します。

風味のある資産

Flutterは、フレーバーに基づいて条件付きバンドル資産をサポートします。資産は、指定されている場合にのみフレーバーで利用できます。 flutter_gen 、現在のフレーバーに関係なく、資産の指定されたflavorsを生成します。 flavorsフィールドにアクセスできますが、 .flavorsなど：

 print ( MyAssets .images.chip4.flavors); // -> {'extern'}

資産の生成を除外します

flutter_gen > assets > excludeを指定できます> Globパターンの使用を除外して特定の資産を除外します。

 flutter_gen :
  assets :
    exclude :
      - folder-your-want-to-exclude/**
      - specified-asset.jpg

package:glob 。

パッケージ用に生成します

パッケージのアセットを生成する場合は、 flutter_gen > assets > outputsでpackage_parameter_enabled使用します。

 flutter_gen :
  assets :
    outputs :
      package_parameter_enabled : true # <- Add this line.

これにより、生成されたクラスにパッケージ定数が追加されます。例えば：

 class Assets {
  Assets ._();

  static const String package = 'test' ;

  static const $AssetsImagesGen images = $AssetsImagesGen ();
  static const $AssetsUnknownGen unknown = $AssetsUnknownGen ();
}

次に、パッケージを暗黙的または明示的に使用することができます。

 // Implicit usage for `Image`/`SvgPicture`/`Lottie`.
Widget build ( BuildContext context) {
  return Assets .images.icons.paint. svg (
    width : 120 ,
    height : 120 ,
  );
}

または

 // Explicit usage for `Image`/`SvgPicture`/`Lottie`.
Widget build ( BuildContext context) {
  return SvgPicture . asset (
    Assets .images.icons.paint.path,
    package : Assets .package,
    width : 120 ,
    height : 120 ,
  );
}

ディレクトリパスを生成します

ディレクトリのパスを生成する場合は、 flutter_gen > assets > outputsでdirectory_path_enabled使用します。

 flutter_gen :
  assets :
    outputs :
      directory_path_enabled : true # <- Add this line.

これにより、 path Getterが生成されたディレクトリクラスに追加されます。例えば：

 class $AssetsImagesGen {
  const $AssetsImagesGen ();

  ///******///

  /// Directory path: assets/images
  String get path => 'assets/images' ;
}

追加のメタデータを含む

ビルド時に、 parse_metadataオプションを使用して、追加のメタデータを生成されたクラスに含めることができます。

 flutter_gen :
  parse_metadata : true # <- Add this line (default: false)

画像ベースのアセットの場合、生成されたクラスに新しいNullable sizeフィールドが追加されます。例えば：

 AssetGenImage get logo => 
  const AssetGenImage ( 'assets/images/logo.png' , size : Size ( 209.0 , 49.0 ));

これは、実際の資産から情報を解析することなく、実行時に使用できるようになりました。

 Widget build ( BuildContext context) {
  return Assets .images.logo.size ! .width;
}

使用例

Fluttergenは、アセットがサポートされている画像形式である場合、画像クラスを生成します。

assets/images/chip.jpgの例の例：

Assets.images.chipはAssetImage classの実装です。
Assets.images.chip.image(...) Image classを返します。
Assets.images.chip.provider(...) ImageProvider classを返します。
Assets.images.chip.pathパス文字列を返すだけです。
Assets.images.chip.values値を返すだけです。

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

Widget build ( BuildContext context) {
  return Assets .images.chip. image (
    width : 120 ,
    height : 120 ,
    fit : BoxFit .scaleDown,
  );

Widget build ( BuildContext context) {
  // Assets.images.chip.path = 'assets/images/chip3/chip3.jpg'
  return Image . asset ( Assets .images.chip.path);
}

flutter_svgを使用してSVG画像を使用している場合は、統合機能を使用できます。

 # pubspec.yaml
flutter_gen :
  integrations :
    flutter_svg : true

flutter :
  assets :
    - assets/images/icons/paint.svg

 Widget build ( BuildContext context) {
  return Assets .images.icons.paint. svg (
    width : 120 ,
    height : 120
  );
}

利用可能な統合

パッケージ	ファイル拡張子	設定	使用法
flutter_svg	.svg	`flutter_svg: true`	assets.images.icons.paint。 svg（）
rive	.riv	`rive: true`	assets.rive.vehicles。 rive（）
ロッティ	.json、.zip、.lottie	`lottie: true`	assets.lottie.hamburgerArrow。 lottie（）

それ以外の場合、資産は文字列クラスとして生成されます。

 // If don't use the Integrations.
final svg = SvgPicture . asset ( Assets .images.icons.paint);

final json = await rootBundle. loadString ( Assets .json.fruits);

フラッターゲンは、他のスタイルのAssetsクラスの生成もサポートしています。

 # pubspec.yaml
flutter_gen :
  assets :
    outputs : 
      # Assets.imagesChip
      # style: camel-case

      # Assets.images_chip
      # style: snake-case

      # Assets.images.chip (default style)
      # style: dot-delimiter

flutter :
  assets :
    - assets/images/chip.png

ルートディレクトリは、 assetsまたはassetいずれかである場合は省略されます。

 assets/images/chip3/chip.jpg      => Assets.images.chip3.chip
assets/images/chip4/chip.jpg      => Assets.images.chip4.chip
assets/images/icons/paint.svg     => Assets.images.icons.paint
assets/images/icons/[email protected] => Assets.images.icons.dartTest
assets/json/fruits.json           => Assets.json.fruits
pictures/ocean_view.jpg           => Assets.pictures.oceanView

Fluttergenによって生成されたコードの例

フォント

ドキュメントに従ってカスタムフォントを使用してフォントを指定し、Fluttergenが関連するDARTファイルを生成します。
他の特定の構成は必要ありません。
複製されたことを無視します。

 # pubspec.yaml
flutter :
  fonts :
    - family : Raleway
      fonts :
        - asset : assets/fonts/Raleway-Regular.ttf
        - asset : assets/fonts/Raleway-Italic.ttf
          style : italic
    - family : RobotoMono
      fonts :
        - asset : assets/fonts/RobotoMono-Regular.ttf
        - asset : assets/fonts/RobotoMono-Bold.ttf
          weight : 700

これらの構成は、デフォルトでlib/gen/ディレクトリの下にあるfonts.gen.dartを生成します。

パッケージ用に生成します

パッケージ用のフォントを生成する場合は、 flutter_gen > fonts > outputsでpackage_parameter_enabledを使用します。

 flutter_gen :
  fonts :
    outputs :
      package_parameter_enabled : true # <- Add this line.

これにより、生成されたクラスにパッケージ定数が追加されます。例えば：

 class Fonts {
  Fonts ._();

  static const String package = 'test' ;

  static const String raleway = 'packages/$ package /Raleway' ;
  static const String robotoMono = 'packages/$ package /RobotoMono' ;
}

使用例

 Text (
  'Hi there, I ' m FlutterGen' ,
  style : TextStyle (
    fontFamily : FontFamily .robotoMono,
    fontFamilyFallback : const [ FontFamily .raleway],
  ),
)

Fluttergenによって生成されたコードの例

色

Fluttergenは、XML形式のファイルからの生成の生成をサポートしています。
複製されたことを無視します。

 # pubspec.yaml
flutter_gen :
  colors :
    inputs :
      - assets/color/colors.xml
      - assets/color/colors2.xml

Fluttergenは、 name属性とColor Hex値に基づいてカラークラスを生成できます。要素に属性typeがある場合、特別な色が生成されます。

現在サポートされている特別なカラータイプ：

マテリアルカラー
MaterialAccentColor

公式の材料カラー生成アルゴリズムがないことに気付きました。実装はMCGプロジェクトに基づいています。

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

これらの構成は、デフォルトでlib/gen/ディレクトリの下でcolors.gen.dartを生成します。

使用例

 Text (
  'Hi there, I ' m FlutterGen' ,
  style : TextStyle (
    color : ColorName .denim,
  ),

Fluttergenによって生成されたコードの例

クレジット

マテリアルカラー生成の実装は、MCGとTinycolorに基づいています。

問題

問題トラッカーにFluttergenの特定の問題、バグ、または機能リクエストを提出してください。

フラッターゲンに固有のプラグインの問題は、Flutter Issue Trackerに提出できます。

既知の問題

悪い状態：build_runnerを使用する場合の要素はありません

このようなエラーメッセージが表示された場合：

 [SEVERE] flutter_gen_runner:flutter_gen_runner on $package$:

Bad state: No element
[SEVERE] Failed after 16.0s

あなたはおそらく、ビルドランナーを構成するためのカスタマイズされたbuild.yaml持っています。その場合、あなたがしなければならないのは、 build.yamlにビルドソースとしてpubspec.yaml追加することだけです。

 targets :
  $default :
    sources :
      include :
        - pubspec.yaml  # add this line
        - ...

対応する問題の議論については、＃268を参照してください。

国際化によるエラー

generate: true in your pubspec.yamlを削除して、 l10n.yamlのsynthetic-packageを無効にしてください。

 # pubspec.yaml
flutter :
  generate : true <--- ️Remove this line️

 # l10n.yaml
arb-dir : lib/l10n
template-arb-file : app_en.arb
output-localization-file : app_localizations.dart
synthetic-package : false <--- ️Add this line️

あなたが得るなら

貢献

共同開発者を探しています。

このリポジトリの既存のプラグインの変更を提供したい場合は、貢献ガイドを確認して、プルリクエストを開きます。

拡大する