flutter_gen

用於您的資產，字體，顏色的撲動代碼生成器，… - 擺脫所有基於字符串的API。

受斯威夫根的啟發。

動機

直接使用資產路徑字符串是不安全的。

 # 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的一部分

1. 將build_runner和fluttergen添加到包裝的pubspec.yaml文件：

 dev_dependencies:
  build_runner:
  flutter_gen_runner:

2. 安裝Fluttergen

flutter pub get

3. 使用Fluttergen

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生成飛鏢文件。
默認配置可以在此處找到。

 # 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/ Directory下生成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)

對於基於圖像的資產，將一個新的可確定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	資產。 Images.icons.paint。 svg（）
Rive	.riv	rive: true	資產。 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);

Fluttergen還支持生成其他風格的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將生成相關的飛鏢文件。
無需其他具體配置。
忽略重複的。

 # 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/ Directory下生成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屬性和顏色十六進制值生成顏色類。如果元素具有屬性type ，則將生成特殊的顏色。

目前支持的特殊顏色類型：

• 材料顏色
• 材料centcentcolor

注意到沒有官方的材料發電算法。該實施基於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/ Directory下默認情況下生成colors.gen.dart 。

用法示例

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

Fluttergen生成的代碼示例

學分

材料產生的實現基於MCG和TinyColor。

問題

請在我們的問題跟踪器中提交Fluttergen特定問題，錯誤或功能請求。

可以在Flutter Issure Tracker中提交非特定於Fluttergen的插件問題。

已知問題

不良狀態：使用build_runner時沒有元素

如果您收到這樣的錯誤消息：

 [SEVERE] flutter_gen_runner:flutter_gen_runner on $package$:

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

您很可能具有自定義build.yaml來配置構建跑步者。在這種情況下，您要做的就是將pubspec.yaml添加為build.yaml源。

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

有關相應的問題討論，請參見＃268。

國際化錯誤

請嘗試刪除generate: true在您的pubspec.yaml中true，並在您的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️

如果你得到

貢獻

我們正在尋找共同開發人員。

如果您想對本倉庫中的任何現有插件進行更改，請查看我們的貢獻指南並打開“拉”請求。