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️

如果你得到

贡献

我们正在寻找共同开发人员。

如果您想对本仓库中的任何现有插件进行更改，请查看我们的贡献指南并打开“拉”请求。