홈페이지>웹사이트 구축 리소스>글꼴 다운로드
다운로드

자산, 글꼴, 색상에 대한 플러터 코드 생성기…-모든 문자열 기반 API를 제거하십시오.

Swiftgen에서 영감을 얻었습니다.

동기 부여

자산 경로 문자열을 직접 사용하는 것은 안전하지 않습니다. 

 # 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. Packing의 pubspec.yaml 파일에 build_runner 및 fluttergen을 추가하십시오. 
 dev_dependencies:
  build_runner:
  flutter_gen_runner:
  1. Fluttergen을 설치하십시오 
flutter pub get
  1. Fluttergen을 사용하십시오 
dart run build_runner build

Github 동작

MacOS 및 Linux와 함께 작동합니다. 

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

Fluttergen/Setup-Fluttergen도 참조하십시오

용법

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

사용 가능한 파서

자산

자산을 지정하기 위해 자산 지정 자산 및 이미지 추가 DOC에 따라 FlutterGen은 관련 다트 파일을 생성합니다.
다른 특정 구성이 필요하지 않습니다.
중복을 무시하십시오. 

 # 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은 자산이 Flutter 지원 이미지 형식 인 경우 이미지 클래스를 생성합니다.

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 assets.images.icons.paint. SVG ()
찢다 .riv rive: true Assets.rive.vehicles. 찢다()
로티 .json, .zip, .lottie lottie: true assets.lottie.hamburgerarrow. 로티 ()

다른 경우 자산은 문자열 클래스로 생성됩니다. 

 // 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이 생성 한 코드의 예

글꼴

Doc을 따르면 사용자 정의 글꼴을 사용하여 글꼴을 지정하면 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 속성과 색 16 진수 값에 따라 색상 클래스를 생성 할 수 있습니다. 요소에 속성 type 있으면 특수한 색상이 생성됩니다.

현재 지원되는 특수 색상 유형 :

  • 재료 검색
  • MaterialAccentColor

공식 재료 색상 생성 알고리즘이 없음을 알았습니다. 구현은 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 특정 문제, 버그 또는 기능 요청을 제출하십시오.

Fluttergen에만 해당되지 않는 플러그인 문제는 Flutter 문제 추적기에 제출할 수 있습니다.

알려진 문제

잘못된 상태 : build_runner를 사용할 때는 요소가 없습니다

다음과 같은 오류 메시지가 표시되면 다음과 같습니다. 

 [SEVERE] flutter_gen_runner:flutter_gen_runner on $package$:

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

당신은 대부분의 Build Runner를 구성하기 위해 사용자 정의 된 build.yaml 가지고있을 것입니다. 이 경우 pubspec.yaml 을 빌드 소스로 build.yaml 에 추가하는 것입니다. 

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

해당 문제 토론은 #268을 참조하십시오.

국제화 오류

generate: true in 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️

당신이 얻는다면

기여

우리는 공동 개발자를 찾고 있습니다.

이 Repo의 기존 플러그인에 대한 변경 사항을 기여하려면 기여 가이드를 검토하고 풀 요청을 열십시오.

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체