자산, 글꼴, 색상 등을 위한 Flutter 코드 생성기 — 모든 문자열 기반 API를 제거합니다.

여러분, FlutterGen을 만들었습니다.

자산, 글꼴, 색상 등을 위한 Flutter 코드 생성기입니다. — 모든 문자열 기반 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();
}

설치

구성 fluttergen 후 실행pubspec.yaml .

이 패키지를 실행 파일로 사용

홈브류 공식 사용

설치 FlutterGen

$ brew install FlutterGen/tap/fluttergen

용도 FlutterGen

$ fluttergen -h

$ fluttergen -c example/pubspec.yaml

Dart 명령줄 사용

설치 FlutterGen

$ pub global activate flutter_gen

$ export PATH="$PATH":"$HOME/.pub-cache/bin"

용도 FlutterGen

$ fluttergen -h

$ fluttergen -c example/pubspec.yaml

build_runner의 일부로 이 패키지 사용

패키지의 pubspec.yaml 파일에 build_runner 및 FlutterGen을 추가합니다.

dev_dependencies:
  build_runner:
  flutter_gen_runner:

설치 FlutterGen

$ flutter pub get

용도 FlutterGen

$ flutter packages pub run build_runner build

구성 파일

FlutterGen은 flutter 의 키 flutter_gen 및 pubspec.yaml를 기반으로 다트 파일을 생성합니다.

# pubspec.yaml
# ...

flutter_gen:
  output: lib/gen/ # Optional (default: lib/gen/)
  lineLength: 80 # Optional (default: 80)

  integrations:
    flutter_svg: 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

사용 가능한 파서

자산

문서Adding assets and images#Specifying assets를 따라 자산을 지정하면 FlutterGen이 관련 dart 파일을 생성합니다.
다른 특정 구성이 필요하지 않습니다.
중복 무시.

# pubspec.yaml
flutter:
  assets:
    - assets/images/
    - assets/images/chip3/chip.jpg
    - assets/images/chip4/chip.jpg
    - assets/images/icons/paint.svg
    - assets/json/fruits.json
    - pictures/ocean_view.jpg

이러한 구성은 기본적으로 assets.gen.dart 디렉토리 아래에 lib/gen/를 생성합니다.

사용 예

자산이 Flutter 지원 이미지 형식인 경우 FlutterGen은 Image 클래스를 생성합니다.
assets/images/chip.jpg의 결과 예:

Assets.images.chip는 AssetImage class 의 구현입니다.

Assets.images.chip.image(...)는 Image class 을 반환합니다.

Assets.images.chip.path는 경로 문자열만 반환합니다.

Widget build(BuildContext context) {
  return Image(image: Assets.images.chip);
}

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

다른 경우에는 자산이 String 클래스로 생성됩니다.

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

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

루트 디렉토리는 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/json/fruits.json       => Assets.json.fruits
pictures/ocean_view.jpg       => Assets.pictures.oceanView

글꼴

문서Use a custom font를 따라 글꼴을 지정하면 FlutterGen이 관련 dart 파일을 생성합니다.
다른 특정 구성이 필요하지 않습니다.
중복 무시.

# 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

이러한 구성은 기본적으로 fonts.gen.dart 디렉토리 아래에 lib/gen/를 생성합니다.

사용 예

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

그림 물감

FlutterGen은 XML 형식 파일에서 색상 생성을 지원합니다.
중복 무시.

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

FlutterGen 생성 MaterialColor 클래스
요소에 type="material" 속성이 있으면 일반Color 클래스가 생성됩니다.

<color name="milk_tea">#F5CB84</color>
<color name="cinnamon" type="material">#955E1C</color>

이러한 구성은 기본적으로 colors.gen.dart 디렉토리 아래에 lib/gen/를 생성합니다.

사용 예

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

결론

공동 개발자를 찾고 있습니다. 😃