flutter_gen Download - flutter_gen Código fonte download

O gerador de código de vibração para seus ativos, fontes, cores,…-Livre-se de todas as APIs baseadas em cordas.

Inspirado por Swiftgen.

Motivação

O uso diretamente do caminho do ativo não é seguro.

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

Ruim
O que aconteceria se você fizesse um erro de digitação?

 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

⭕️ Bom
Queremos usá -lo com segurança.

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

Instalação

Homebrew

Funciona com macOS e Linux.

brew install FlutterGen/tap/fluttergen

ASDF

Funciona com macOS e Linux. asdf-fluttergen é compatível com 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

Veja também: Fluttergen/Asdf-Fluttergen

Pub global

Funciona com macOS, Linux e Windows.

dart pub global activate flutter_gen

Pode ser necessário configurar seu caminho.

Como parte de Build_runner

Adicione Build_runner e Fluttergen ao arquivo PubSpec.yaml do seu pacote:

 dev_dependencies:
  build_runner:
  flutter_gen_runner:

Instale o Fluttergen

flutter pub get

Use Fluttergen

dart run build_runner build

Ações do GitHub

Funciona com macOS e Linux.

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

Veja também: Fluttergen/Setup-FlutterGen

Uso

Run fluttergen após a configuração pubspec.yaml .

fluttergen -h

fluttergen -c example/pubspec.yaml

Arquivo de configuração

O FlutterGen gera arquivos de DART com base no flutter e flutter_gen da chave do pubspec.yaml .
A configuração padrão pode ser encontrada aqui.

 # 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

Você também pode configurar as opções de geração no build.yaml , ele será lido antes do pubspec.yaml se existir.

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

Analisadores disponíveis

Ativos

Seguindo o documento adicionando ativos e imagens#Especificando ativos para especificar ativos, o FlutterGen gerará arquivos DART relacionados.
Nenhuma outra configuração específica é necessária.
Ignore 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

Essas configurações gerarão assets.gen.dart no diretório lib/gen/ por padrão.

Ativos com sabor

A Flutter suporta ativos condicionalmente agrupados com base no sabor. Os ativos estão disponíveis apenas com sabores, se especificado. flutter_gen gerará os flavors especificados para ativos, independentemente do sabor atual. Os flavors são acessíveis ao campo .flavors , por exemplo:

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

Excluindo a geração de ativos

Você pode especificar flutter_gen > assets > exclude usando padrões Glob para excluir ativos específicos.

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

Veja mais padrões com o package:glob .

Gerar para pacotes

Se você deseja gerar ativos para um pacote, use package_parameter_enabled em flutter_gen > assets > outputs .

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

Isso adicionaria o pacote constante à classe gerada. Por exemplo:

 class Assets {
  Assets ._();

  static const String package = 'test' ;

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

Então você pode usar ativos com o pacote implicitamente ou explicitamente:

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

Gerar caminho de diretórios

Se você deseja gerar o caminho dos diretórios, use directory_path_enabled em flutter_gen > assets > outputs .

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

Isso adicionaria o path para a classe Gerated Directory. Por exemplo:

 class $AssetsImagesGen {
  const $AssetsImagesGen ();

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

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

Incluindo metadados adicionais

No momento da construção, metadados adicionais podem ser incluídos na classe gerada, usando a opção parse_metadata .

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

Para ativos baseados em imagem, um novo campo size anulado é adicionado à classe gerada. Por exemplo:

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

Que agora pode ser usado em tempo de execução sem analisar as informações do ativo real.

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

Exemplo de uso

O FlutterGen gera classe de imagem se o ativo for o formato de imagem suportado pelo Flutter.

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

Assets.images.chip é uma implementação da AssetImage class .
Assets.images.chip.image(...) retorna Image class .
Assets.images.chip.provider(...) retorna ImageProvider class .
Assets.images.chip.path apenas retorna a sequência do caminho.
Assets.images.chip.values apenas retorna a 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);
}

Se você estiver usando imagens SVG com flutter_svg, poderá usar o recurso de integração.

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

Integrações disponíveis

Pacotes	Extensão de arquivo	Contexto	Uso
flutter_svg	.svg	`flutter_svg: true`	Assets.images.icons.paint. svg ()
rive	.riv	`rive: true`	Assets.rive.vehicles. rive ()
Lottie	.json, .zip, .lottie	`lottie: true`	Assets.Lottie.hamburgerRow. Lottie ()

Em outros casos, o ativo é gerado como classe de string.

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

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

A Fluttergen também suporta gerar outro estilo 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

O diretório raiz será omitido se for 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

Exemplo de código gerado por Fluttergen

Fontes

Basta seguir o documento, use uma fonte personalizada para especificar fontes, e o FlutterGen gerará arquivos de DART relacionados.
Nenhuma outra configuração específica é necessária.
Ignore 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

Essas configurações gerarão fonts.gen.dart no diretório lib/gen/ por padrão.

Gerar para pacotes

Se você deseja gerar fontes para um pacote, use package_parameter_enabled em flutter_gen > fonts > outputs .

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

Isso adicionaria o pacote constante à classe gerada. Por exemplo:

 class Fonts {
  Fonts ._();

  static const String package = 'test' ;

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

Exemplo de uso

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

Exemplo de código gerado por Fluttergen

Cores

O FlutterGen suporta a geração de cores a partir de arquivos de formato XML.
Ignore duplicado.

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

O Fluttergen pode gerar uma classe de cores com base no atributo name e no valor hexadecimal da cor. Se o elemento tiver o type de atributo, uma cor especialmente será gerada.

Atualmente suportado tipos de cores especiais:

Materialcolor
MaterialAccentColor

Percebeu que não há algoritmo oficial de geração de cores material. A implementação é baseada no projeto MCG.

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

Essas configurações gerarão colors.gen.dart no diretório lib/gen/ por padrão.

Exemplo de uso

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

Exemplo de código gerado por Fluttergen

Créditos

A implementação de geração de cores do material é baseada em MCG e Tinycolor.

Problemas

Por favor, arquive problemas, bugs ou solicitações de recursos específicos da FlutterGen em nosso rastreador de problemas.

Os problemas do plug -in que não são específicos para o FlutterGen podem ser arquivados no rastreador de problemas do Flutter.

Questões conhecidas

Estado ruim: nenhum elemento ao usar Build_runner

Se você receber uma mensagem de erro como esta:

 [SEVERE] flutter_gen_runner:flutter_gen_runner on $package$:

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

Você provavelmente tem uma build.yaml personalizada. Yaml para configurar o corredor de construção. Nesse caso, tudo o que você precisa fazer é adicionar o pubspec.yaml como fonte de construção à sua build.yaml

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

Consulte #268 para a discussão da questão correspondente.

Erro com internacionalização

Tente remover generate: true no seu pubspec.yaml e desative synthetic-package em seu 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️

Se você conseguir

Contribuindo

Estamos procurando co-desenvolvedores.

Se você deseja contribuir com uma alteração para qualquer um dos plug -ins existentes neste repositório, revise nosso guia de contribuição e abra uma solicitação de tração.

Expandir