Page d'accueil>Ressources de création de sites Web>Téléchargement de polices
Télécharger

Le générateur de code Flutter pour vos actifs, polices, couleurs,… - débarrassez-vous de toutes les API basées sur des chaînes.

Inspiré par Swiftgen.

Motivation

L'utilisation directement de la chaîne de chemin d'actif n'est pas sûre. 

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

Mauvais
Que se passerait-il si vous faisiez une faute de frappe? 

 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

⭕️ bon
Nous voulons l'utiliser en toute sécurité. 

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

Installation

Homebrew

Fonctionne avec macOS et Linux. 

brew install FlutterGen/tap/fluttergen

ASDF

Fonctionne avec macOS et Linux. Asdf-Fluttergen est compatible avec la 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

Voir aussi: Fluttergen / Asdf-Fluttergen

Pub global

Fonctionne avec MacOS, Linux et Windows. 

dart pub global activate flutter_gen

Vous devrez peut-être configurer votre chemin.

Dans le cadre de build_runner

  1. Ajoutez Build_runner et Fluttergen au fichier pubspe.yaml de votre package: 
 dev_dependencies:
  build_runner:
  flutter_gen_runner:
  1. Installer Fluttergen 
flutter pub get
  1. Utilisez Fluttergen 
dart run build_runner build

Actions github

Fonctionne avec macOS et Linux. 

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

Voir aussi: Fluttergen / Configuration-Fluttergen

Usage

Exécutez fluttergen après la configuration pubspec.yaml . 

fluttergen -h

fluttergen -c example/pubspec.yaml

Fichier de configuration

Fluttergen génère des fichiers DART basés sur la clé flutter et flutter_gen de pubspec.yaml .
La configuration par défaut peut être trouvée ici. 

 # 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

Vous pouvez également configurer des options de génération dans le build.yaml , elle sera lue avant le pubspec.yaml si elle 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)

Analyseurs disponibles

Actifs

Suivant le DOC ajoutant des actifs et des images # Spécification des actifs pour spécifier des actifs, Fluttergen générera des fichiers de fléchettes connexes.
Aucune autre configuration spécifique n'est requise.
Ignorer dupliqué. 

 # 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

Ces configurations généreront assets.gen.dart sous le répertoire lib/gen/ par défaut.

Actifs aromatisés

Flutter prend en charge les actifs de regroupement conditionnellement en fonction de la saveur. Les actifs ne sont disponibles qu'avec des saveurs si elles sont spécifiées. flutter_gen générera les flavors spécifiées pour les actifs quelle que soit la saveur actuelle. Le champ flavors accessible cependant .flavors , par exemple: 

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

Excluant la génération pour les actifs

Vous pouvez spécifier flutter_gen > assets > exclude en utilisant des modèles Glob pour exclure des actifs particuliers. 

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

Voir plus de modèles avec le package:glob .

Générer pour les packages

Si vous souhaitez générer des actifs pour un package, utilisez package_parameter_enabled sous flutter_gen > assets > outputs . 

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

Cela ajouterait la constante de package à la classe générée. Par exemple: 

 class Assets {
  Assets ._();

  static const String package = 'test' ;

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

Ensuite, vous pouvez utiliser des actifs avec le package implicitement ou explicitement: 

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

ou 

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

Générer le chemin des répertoires

Si vous souhaitez générer le chemin des répertoires, utilisez directory_path_enabled sous flutter_gen > assets > outputs . 

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

Cela ajouterait le path Getter à la classe d'annuaire générée. Par exemple: 

 class $AssetsImagesGen {
  const $AssetsImagesGen ();

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

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

Y compris les métadonnées supplémentaires

Au moment de la construction, des métadonnées supplémentaires peuvent être incluses dans la classe générée, en utilisant l'option parse_metadata . 

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

Pour les actifs basés sur l'image, un nouveau champ size nullable est ajouté à la classe générée. Par exemple: 

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

Qui peut désormais être utilisé au moment de l'exécution sans analyser les informations de l'actif réel. 

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

Exemple d'utilisation

Fluttergen génère une classe d'image si l'actif est le format d'image pris en charge Flutter.

Exemple de résultats des assets/images/chip.jpg :

  • Assets.images.chip est une implémentation de AssetImage class .
  • Assets.images.chip.image(...) renvoie Image class .
  • Assets.images.chip.provider(...) renvoie ImageProvider class .
  • Assets.images.chip.path renvoie simplement la chaîne de chemin.
  • Assets.images.chip.values renvoie simplement la liste des valeurs. 
 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 vous utilisez des images SVG avec FLUTTER_SVG, vous pouvez utiliser la fonction d'intégration. 

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

Intégrations disponibles

Packages Extension de fichier Paramètre Usage
flutter_svg .svg flutter_svg: true Actifs.images.icons.paint. svg ()
rivaliser .Riv rive: true Actifs.rive.VeHicules. rive ()
lottie .json, .zip, .Lottie lottie: true Assets.lottie.hamburgerarrow. Lottie ()

Dans d'autres cas, l'actif est généré en classe de chaîne. 

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

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

Fluttergen prend également en charge la génération d'un autre style de classe 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

Le répertoire racine sera omis s'il s'agit assets ou 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

Exemple de code généré par Fluttergen

Polices

Suivez simplement le DOC Utilisez une police personnalisée pour spécifier les polices, puis Fluttergen générera des fichiers de fléchettes connexes.
Aucune autre configuration spécifique n'est requise.
Ignorer dupliqué. 

 # 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

Ces configurations généreront fonts.gen.dart sous le répertoire lib/gen/ par défaut.

Générer pour les packages

Si vous souhaitez générer des polices pour un package, utilisez package_parameter_enabled sous flutter_gen > fonts > outputs . 

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

Cela ajouterait la constante de package à la classe générée. Par exemple: 

 class Fonts {
  Fonts ._();

  static const String package = 'test' ;

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

Exemple d'utilisation 

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

Exemple de code généré par Fluttergen

Couleurs

Fluttergen prend en charge la génération de couleurs à partir de fichiers de format XML.
Ignorer dupliqué. 

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

Fluttergen peut générer une classe de couleurs basée sur l'attribut name et la valeur hexagonale de couleur. Si l'élément a le type d'attribut, une couleur spéciale sera générée.

Types de couleurs spéciaux actuellement pris en charge:

  • Mât de matériel
  • Matériaux

Remarqué qu'il n'y a pas d'algorithme officiel de génération de couleurs de matériau. La mise en œuvre est basée sur le projet MCG. 

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

Ces configurations généreront colors.gen.dart sous le répertoire lib/gen/ par défaut.

Exemple d'utilisation 

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

Exemple de code généré par Fluttergen

Crédits

L'implémentation de génération de couleurs de matériau est basée sur MCG et Tinycolor.

Problèmes

Veuillez déposer des problèmes spécifiques à Fluttergen, des bogues ou des demandes de fonctionnalités dans notre tracker de problèmes.

Les problèmes de plugin qui ne sont pas spécifiques à Fluttergen peuvent être déposés dans le tracker Flutter Issue.

Problèmes connus

Mauvais état: aucun élément lors de l'utilisation de build_runner

Si vous obtenez un message d'erreur comme ceci: 

 [SEVERE] flutter_gen_runner:flutter_gen_runner on $package$:

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

Vous avez probablement une build.yaml personnalisée.yaml pour configurer le coureur de construction. Dans ce cas, tout ce que vous avez à faire est d'ajouter le pubspec.yaml comme source de construction à votre build.yaml 

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

Voir # 268 pour la discussion sur la question correspondante.

Erreur d'internationalisation

Veuillez essayer de supprimer generate: true dans votre pubspec.yaml et désactiver synthetic-package dans votre l10n.yaml comme: 

 # 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 vous obtenez

Contributif

Nous recherchons des co-développeurs.

Si vous souhaitez apporter une modification à l'un des plugins existants de ce dépôt, veuillez consulter notre guide de contribution et ouvrir une demande de traction.

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout