الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

مولد رمز الرفرفة لأصولك وخطوطك وألوانك ، ...-تخلص من جميع واجهات برمجة التطبيقات القائمة على السلسلة.

مستوحاة من 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. أضف Build_runner و Fluttergen إلى ملف PubSpec.yaml الخاص بالحزمة: 
 dev_dependencies:
  build_runner:
  flutter_gen_runner:
  1. تثبيت fluttergen 
flutter pub get
  1. استخدم fluttergen 
dart run build_runner build

أفعال جيثب

يعمل مع MacOS و Linux. 

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

انظر أيضًا: Fluttergen/Setup-Fluttergen

الاستخدام

قم بتشغيل fluttergen بعد التكوين pubspec.yaml . 

fluttergen -h

fluttergen -c example/pubspec.yaml

ملف التكوين

يقوم Fluttergen بإنشاء ملفات DART استنادًا إلى flutter المفتاح و flutter_gen من pubspec.yaml .
يمكن العثور على التكوين الافتراضي هنا. 

 # 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 سوف تنشئ ملفات DART ذات الصلة.
لا يلزم تكوين محدد آخر.
تجاهل التكرار. 

 # 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

ستقوم هذه التكوينات بإنشاء assets.gen.dart lib/gen/

أصول بنكهة

يدعم الرفرفة الأصول المشروطة على أساس النكهة. الأصول متوفرة فقط مع النكهات إذا تم تحديدها. ستقوم 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 .

توليد الحزم

إذا كنت ترغب في إنشاء أصول لحزمة ما ، فاستخدم package_parameter_enabled ضمن flutter_gen > assets > outputs . 

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

توليد دلائل المسار

إذا كنت ترغب في إنشاء مسار الدلائل ، فاستخدم directory_path_enabled ضمن flutter_gen > assets > outputs . 

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

هذا من شأنه أن يضيف path إلى فئة الدليل التي تم إنشاؤها. على سبيل المثال: 

 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 فئة الصورة إذا كان الأصل هو تنسيق الصورة المدعوم من الرفرفة.

مثال نتائج 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);
}

إذا كنت تستخدم صور SVG مع Flutter_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 الأصول. images.icons.paint. SVG ()
تمزق .riv rive: true الأصول. تمزق()
لوتي .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

الخطوط

ما عليك سوى اتباع المستند استخدم خطًا مخصصًا لتحديد الخطوط ، ثم يقوم 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/ DIRECTORY افتراضيًا.

توليد الحزم

إذا كنت ترغب في إنشاء خطوط لحزمة ، فاستخدم package_parameter_enabled ضمن flutter_gen > fonts > outputs . 

 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 وقيمة سداسي اللون. إذا كان العنصر يحتوي على 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 >

ستؤدي هذه التكوينات إلى إنشاء colors.gen.dart lib/gen/

مثال الاستخدام 

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

مثال على الكود الناتج عن Fluttergen

الاعتمادات

يعتمد تطبيق توليد الألوان المادي على MCG و TinyColor.

مشاكل

يرجى تقديم مشكلات محددة ، أو أخطاء ، أو طلبات ميزة في تعقب المشكلات لدينا.

يمكن تقديم مشكلات البرنامج المساعد التي ليست خاصة بـ Fluttergen في تعقب مشكلة الرفرفة.

القضايا المعروفة

الحالة السيئة: لا يوجد عنصر عند استخدام build_runner

إذا حصلت على رسالة خطأ مثل هذا: 

 [SEVERE] flutter_gen_runner:flutter_gen_runner on $package$:

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

من المرجح أن يكون لديك build.yaml مخصص. yaml لتكوين عداء البناء. في هذه الحالة ، كل ما عليك فعله هو إضافة pubspec.yaml كمصدر للبناء إلى build.yaml 

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

انظر رقم 268 للاطلاع على مناقشة القضية المقابلة.

خطأ في التدويل

يرجى محاولة إزالة generate: true في pubspec.yaml الخاص بك وتعطيل synthetic-package في l10n.yaml مثل: 

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

إذا حصلت

المساهمة

نحن نبحث عن المطورين المشاركين.

إذا كنت ترغب في المساهمة في تغيير في أي من المكونات الإضافية الموجودة في هذا الريبو ، فيرجى مراجعة دليل المساهمة الخاص بنا وفتح طلب سحب.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل