flutter_gen
v5.8.0
ตัวสร้างรหัส Flutter สำหรับสินทรัพย์ฟอนต์สี…-กำจัด APIs ที่ใช้สตริงทั้งหมด
แรงบันดาลใจจาก 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ทำงานร่วมกับ 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คุณอาจต้องตั้งค่าเส้นทางของคุณ
dev_dependencies:
build_runner:
flutter_gen_runner:
flutter pub getdart 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 มันจะถูกอ่านก่อน 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) หลังจากเอกสารที่เพิ่มสินทรัพย์และรูปภาพ#ระบุสินทรัพย์เพื่อระบุสินทรัพย์จากนั้น 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 รองรับสินทรัพย์ที่รวมกันตามเงื่อนไขตามรสชาติ สินทรัพย์มีให้เฉพาะกับรสชาติหากระบุ flutter_gen จะสร้าง flavors ที่ระบุสำหรับสินทรัพย์โดยไม่คำนึงถึงรสชาติปัจจุบัน ฟิลด์ 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 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 สร้างคลาสรูปภาพหากสินทรัพย์เป็นรูปแบบภาพที่รองรับ
ตัวอย่างผลลัพธ์ของ assets/images/chip.jpg :
Assets.images.chip เป็นการดำเนินการของ AssetImage classAssets.images.chip.image(...) ส่งคืน Image classAssets.images.chip.provider(...) ส่งคืน ImageProvider classAssets.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 | essets.images.icons.paint SVG () |
| รั่วไหล | . RIV | rive: true | Assets.rive.vehicles rive () |
| ลอตตี้ | .json, .zip, .lottie | lottie: true | essets.lottie.hamburgerarrow Lottie () |
ในกรณีอื่น ๆ สินทรัพย์ถูกสร้างขึ้นเป็นคลาสสตริง
// 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/ ไดเรกทอรีโดยค่าเริ่มต้น
หากคุณต้องการสร้างแบบอักษรสำหรับแพ็คเกจให้ใช้ 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 และค่า hex สี หากองค์ประกอบมี type แอตทริบิวต์จะมีการสร้างสีเป็นพิเศษ
ประเภทสีพิเศษที่รองรับในปัจจุบัน:
สังเกตว่าไม่มีอัลกอริทึมการสร้างสีวัสดุอย่างเป็นทางการ การดำเนินการขึ้นอยู่กับโครงการ 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 ข้อบกพร่องหรือคำขอคุณสมบัติในตัวติดตามปัญหาของเรา
ปัญหาปลั๊กอินที่ไม่เฉพาะเจาะจงสำหรับ fluttergen สามารถยื่นในตัวติดตามปัญหา Flutter
หากคุณได้รับข้อความแสดงข้อผิดพลาดเช่นนี้:
[SEVERE] flutter_gen_runner:flutter_gen_runner on $package$:
Bad state: No element
[SEVERE] Failed after 16.0s
คุณน่าจะมี build.yaml ที่กำหนดเองเพื่อกำหนดค่าการสร้าง Runner ในกรณีนี้สิ่งที่คุณต้องทำคือเพิ่ม 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️ถ้าคุณได้รับ
เรากำลังมองหาผู้พัฒนาร่วม
หากคุณต้องการมีส่วนร่วมในการเปลี่ยนแปลงปลั๊กอินใด ๆ ที่มีอยู่ใน repo นี้โปรดตรวจสอบคู่มือการบริจาคของเราและเปิดคำขอดึง
