Descargar flutter_gen - Descargar el código fuente flutter

El generador de código Flutter para sus activos, fuentes, colores, ...-deshacerse de todas las API basadas en cadenas.

Inspirado por Swiftgen.

Motivación

El uso de la cadena de ruta de activo directamente no es seguro.

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

Malo
¿Qué pasaría si hicieras un error tipográfico?

 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

⭕️ Bien
Queremos usarlo de manera segura.

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

Instalación

Cerveza casera

Funciona con MacOS y Linux.

brew install FlutterGen/tap/fluttergen

asdf

Funciona con MacOS y Linux. ASDF-FlutterGen es compatible con la mezcla.

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

# install fluttergen
asdf install fluttergen latest

Ver también: Fluttergen/ASDF-Fluttergen

Pub global

Funciona con MacOS, Linux y Windows.

dart pub global activate flutter_gen

Es posible que deba configurar su camino.

Como parte de build_runner

Agregue Build_runner y FlutterGen al archivo pubspec.yaml de su paquete:

 dev_dependencies:
  build_runner:
  flutter_gen_runner:

Instalar Fluttergen

flutter pub get

Usa FlutterGen

dart run build_runner build

Acciones de Github

Funciona con MacOS y Linux.

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

Ver también: Fluttergen/Setup-FlutterGen

Uso

Ejecute fluttergen después de la configuración pubspec.yaml .

fluttergen -h

fluttergen -c example/pubspec.yaml

Archivo de configuración

FlutterGen genera archivos de dardos basados en la tecla flutter y flutter_gen de pubspec.yaml .
La configuración predeterminada se puede encontrar aquí.

 # 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

También puede configurar las opciones Generar en build.yaml , se lee antes del pubspec.yaml si existe.

 # 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)

Analizadores disponibles

Activos

Siguiendo el documento agregando activos e imágenes#especificando activos para especificar activos, entonces FlutterGen generará archivos de dardo relacionados.
No se requiere otra configuración específica.
Ignorar duplicado.

 # 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

Estas configuraciones generarán assets.gen.dart bajo el directorio lib/gen/ de forma predeterminada.

Activos con sabor

Flutter admite activos de agrupación condicionalmente basados en el sabor. Los activos solo están disponibles con sabores si se especifican. flutter_gen generará los flavors especificados para los activos, independientemente del sabor actual. El campo flavors accesible .flavors Sin embargo, Flavors, por ejemplo:

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

Excluyendo la generación de activos

Puede especificar flutter_gen > assets > exclude el uso de patrones Glob para excluir activos particulares.

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

Vea más patrones con el package:glob .

Generar para paquetes

Si desea generar activos para un paquete, use package_parameter_enabled en flutter_gen > assets > outputs .

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

Esto agregaría el paquete constante a la clase generada. Por ejemplo:

 class Assets {
  Assets ._();

  static const String package = 'test' ;

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

Luego puede usar activos con el paquete implícita o explícitamente:

 // 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 ,
  );
}

Generar la ruta de los directorios

Si desea generar la ruta de los directorios, use directory_path_enabled en flutter_gen > assets > outputs .

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

Esto agregaría el getter de path a la clase de directorio generada. Por ejemplo:

 class $AssetsImagesGen {
  const $AssetsImagesGen ();

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

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

Incluyendo metadatos adicionales

En la hora de compilación, se pueden incluir metadatos adicionales en la clase generada, utilizando la opción parse_metadata .

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

Para los activos basados en imágenes, se agrega un nuevo campo size anulable a la clase generada. Por ejemplo:

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

Que ahora se puede usar en tiempo de ejecución sin analizar la información del activo real.

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

Ejemplo de uso

FlutterGen genera la clase de imagen si el activo es Flutter compatible con el formato de imagen.

Ejemplo de resultados de assets/images/chip.jpg :

Assets.images.chip es una implementación de AssetImage class .
Assets.images.chip.image(...) Devuelve Image class .
Assets.images.chip.provider(...) Devuelve ImageProvider class .
Assets.images.chip.path solo devuelve la cadena de ruta.
Assets.images.chip.values solo devuelve la lista de valores.

 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);
}

Si está utilizando imágenes SVG con Flutter_SVG, puede usar la función de integración.

 # 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
  );
}

Integraciones disponibles

Paquetes	Extensión de archivo	Configuración	Uso
flutter_svg	.svg	`flutter_svg: true`	Assets.Images.icons.Paint. svg ()
hender	.riv	`rive: true`	Assets.rive.Vehicles. hender()
lottie	.json, .zip, .lottie	`lottie: true`	Activos.lottie.hamburgarrow. lottie ()

En otros casos, el activo se genera como clase de cadena.

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

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

Fluttergen también admite generar otro estilo de clase 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

El directorio raíz se omitirá si se trata de assets o 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

Ejemplo de código generado por Fluttergen

Fuentes

Simplemente siga el documento Use una fuente personalizada para especificar fuentes, luego FlutterGen generará archivos de dardo relacionados.
No se requiere otra configuración específica.
Ignorar duplicado.

 # 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

Estas configuraciones generarán fonts.gen.dart lib/gen/

Generar para paquetes

Si desea generar fuentes para un paquete, use package_parameter_enabled en flutter_gen > fonts > outputs .

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

Esto agregaría el paquete constante a la clase generada. Por ejemplo:

 class Fonts {
  Fonts ._();

  static const String package = 'test' ;

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

Ejemplo de uso

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

Ejemplo de código generado por Fluttergen

Bandera

FlutterGen admite la generación de colores a partir de archivos de formato XML.
Ignorar duplicado.

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

FlutterGen puede generar una clase de color basada en el atributo name y el valor de color hexadecimal. Si el elemento tiene el type de atributo, se generará un color especialmente.

Tipos de color especiales compatibles actualmente:

Cazadora de material
Materialaccentcolor

Notó que no hay un algoritmo oficial de generación de color de material. La implementación se basa en el proyecto MCG.

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

Estas configuraciones generarán colors.gen.dart bajo el directorio lib/gen/ de forma predeterminada.

Ejemplo de uso

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

Ejemplo de código generado por Fluttergen

Créditos

La implementación de la generación de color del material se basa en MCG y Tinycolor.

Asuntos

Aplique problemas, errores o solicitudes de funciones de FlutterGen en nuestro rastreador de problemas.

Los problemas de complemento que no son específicos para FlutterGen se pueden archivar en el rastreador de problemas de Flutter.

Problemas conocidos

Bad State: no hay elemento cuando se usa build_runner

Si recibe un mensaje de error como este:

 [SEVERE] flutter_gen_runner:flutter_gen_runner on $package$:

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

Lo más probable es que tenga una build.yaml personalizada.yaml para configurar el corredor de compilación. En ese caso, todo lo que tiene que hacer es agregar el pubspec.yaml como fuente de compilación a su build.yaml

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

Vea #268 para la discusión del tema correspondiente.

Error con la internacionalización

Intente eliminar generate: true en su pubspec.yaml y deshabilite synthetic-package en su l10n.yaml como:

 # 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️

Si obtienes

Que contribuye

Estamos buscando co-desarrolladores.

Si desea contribuir con un cambio a cualquiera de los complementos existentes en este repositorio, revise nuestra guía de contribución y abra una solicitud de extracción.

Expandir