Beranda>Sumber daya pembuatan situs web>Pengunduhan font
Unduh

Generator kode flutter untuk aset, font, warna, ...-singkirkan semua API berbasis string.

Terinspirasi oleh Swiftgen.

Motivasi

Menggunakan string jalur aset secara langsung tidak aman. 

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

Buruk
Apa yang akan terjadi jika Anda membuat kesalahan ketik? 

 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

⭕️ Bagus
Kami ingin menggunakannya dengan aman. 

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

Instalasi

Homebrew

Bekerja dengan MacOS dan Linux. 

brew install FlutterGen/tap/fluttergen

asdf

Bekerja dengan MacOS dan Linux. ASDF-FLuttergen kompatibel dengan 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

Lihat juga: Fluttergen/ASDF-Fluttergen

Pub Global

Bekerja dengan macOS, Linux dan Windows. 

dart pub global activate flutter_gen

Anda mungkin perlu mengatur jalur Anda.

Sebagai bagian dari build_runner

  1. Tambahkan build_runner dan fluttergen ke file pubspec.yaml paket Anda: 
 dev_dependencies:
  build_runner:
  flutter_gen_runner:
  1. Pasang Fluttergen 
flutter pub get
  1. Gunakan Fluttergen 
dart run build_runner build

Tindakan GitHub

Bekerja dengan MacOS dan Linux. 

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

Lihat juga: Fluttergen/Setup-Fluttergen

Penggunaan

Jalankan fluttergen setelah konfigurasi pubspec.yaml . 

fluttergen -h

fluttergen -c example/pubspec.yaml

File konfigurasi

Fluttergen menghasilkan file DART berdasarkan flutter utama dan flutter_gen dari pubspec.yaml .
Konfigurasi default dapat ditemukan di sini. 

 # 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

Anda juga dapat mengonfigurasi opsi menghasilkan di build.yaml , itu akan dibaca sebelum pubspec.yaml jika ada. 

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

Parser yang tersedia

Aktiva

Mengikuti DOC menambahkan aset dan gambar#menentukan aset untuk menentukan aset, maka Fluttergen akan menghasilkan file DART terkait.
Tidak diperlukan konfigurasi spesifik lainnya.
Abaikan duplikasi. 

 # 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

Konfigurasi ini akan menghasilkan assets.gen.dart di bawah lib/gen/ direktori secara default.

Aset rasa

Flutter mendukung aset bundling kondisional berdasarkan rasa. Aset hanya tersedia dengan rasa jika ditentukan. flutter_gen akan menghasilkan flavors yang ditentukan untuk aset terlepas dari rasa saat ini. Field flavors dapat diakses .flavors , misalnya: 

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

Tidak termasuk menghasilkan aset

Anda dapat menentukan flutter_gen > assets > exclude menggunakan pola Glob untuk mengecualikan aset tertentu. 

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

Lihat lebih banyak pola dengan package:glob .

Menghasilkan paket

Jika Anda ingin menghasilkan aset untuk paket, gunakan package_parameter_enabled di bawah flutter_gen > assets > outputs . 

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

Ini akan menambahkan paket konstan ke kelas yang dihasilkan. Misalnya: 

 class Assets {
  Assets ._();

  static const String package = 'test' ;

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

Maka Anda dapat menggunakan aset dengan paket secara implisit atau eksplisit: 

 // Implicit usage for `Image`/`SvgPicture`/`Lottie`.
Widget build ( BuildContext context) {
  return Assets .images.icons.paint. svg (
    width : 120 ,
    height : 120 ,
  );
}

atau 

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

Hasilkan jalur direktori

Jika Anda ingin menghasilkan jalur direktori, gunakan directory_path_enabled di bawah flutter_gen > assets > outputs . 

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

Ini akan menambah path pengambil ke kelas direktori yang dihasilkan. Misalnya: 

 class $AssetsImagesGen {
  const $AssetsImagesGen ();

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

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

Termasuk metadata tambahan

Pada waktu pembangunan, metadata tambahan dapat dimasukkan dalam kelas yang dihasilkan, dengan menggunakan opsi parse_metadata . 

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

Untuk aset berbasis gambar, bidang size nullable baru ditambahkan ke kelas yang dihasilkan. Misalnya: 

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

Yang sekarang dapat digunakan saat runtime tanpa menguraikan informasi dari aset yang sebenarnya. 

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

Contoh Penggunaan

Fluttergen menghasilkan kelas gambar jika asetnya adalah format gambar yang didukung flutter.

Contoh hasil assets/images/chip.jpg :

  • Assets.images.chip adalah implementasi AssetImage class .
  • Assets.images.chip.image(...) Mengembalikan Image class .
  • Assets.images.chip.provider(...) mengembalikan ImageProvider class .
  • Assets.images.chip.path hanya mengembalikan string path.
  • Assets.images.chip.values hanya mengembalikan daftar nilai. 
 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);
}

Jika Anda menggunakan gambar SVG dengan flutter_svg, Anda dapat menggunakan fitur integrasi. 

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

Integrasi yang tersedia

Paket Ekstensi file Pengaturan Penggunaan
Flutter_svg .svg flutter_svg: true Aset.images.icons.Paint. svg ()
membelah .riv rive: true Aset.rive.vehicles. membelah()
Lottie .json, .zip, .lottie lottie: true Aset.lottie.hamburgerarrow. lottie ()

Dalam kasus lain, aset dihasilkan sebagai kelas string. 

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

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

Fluttergen juga mendukung menghasilkan kelas Assets gaya lain: 

 # 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

Direktori root akan dihilangkan jika assets atau 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

Contoh kode yang dihasilkan oleh Fluttergen

Font

Cukup ikuti DOC Gunakan font khusus untuk menentukan font, kemudian Fluttergen akan menghasilkan file DART terkait.
Tidak diperlukan konfigurasi spesifik lainnya.
Abaikan duplikasi. 

 # 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

Konfigurasi ini akan menghasilkan fonts.gen.dart di bawah lib/gen/ direktori secara default.

Menghasilkan paket

Jika Anda ingin menghasilkan font untuk paket, gunakan package_parameter_enabled di bawah flutter_gen > fonts > outputs . 

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

Ini akan menambahkan paket konstan ke kelas yang dihasilkan. Misalnya: 

 class Fonts {
  Fonts ._();

  static const String package = 'test' ;

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

Contoh Penggunaan 

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

Contoh kode yang dihasilkan oleh Fluttergen

Warna

Fluttergen mendukung menghasilkan warna dari file format XML.
Abaikan duplikasi. 

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

Fluttergen dapat menghasilkan kelas warna berdasarkan atribut name dan nilai warna hex. Jika elemen memiliki type atribut, maka warna khusus akan dihasilkan.

Saat ini didukung jenis warna khusus:

  • Materialcolor
  • Materialaccentcolor

Memperhatikan bahwa tidak ada algoritma generasi warna material resmi. Implementasi didasarkan pada proyek MCG. 

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

Konfigurasi ini akan menghasilkan colors.gen.dart di bawah lib/gen/ direktori secara default.

Contoh Penggunaan 

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

Contoh kode yang dihasilkan oleh Fluttergen

Kredit

Implementasi pembuatan warna material didasarkan pada MCG dan Tinycolor.

Masalah

Harap ajukan masalah khusus, bug, atau permintaan fitur di pelacak edisi kami.

Masalah plugin yang tidak spesifik untuk Fluttergen dapat diajukan dalam pelacak Flutter Issue.

Masalah yang diketahui

Keadaan buruk: tidak ada elemen saat menggunakan build_runner

Jika Anda mendapatkan pesan kesalahan seperti ini: 

 [SEVERE] flutter_gen_runner:flutter_gen_runner on $package$:

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

Anda kemungkinan besar memiliki build.yaml yang disesuaikan untuk mengkonfigurasi runner build. Dalam hal ini, yang harus Anda lakukan adalah menambahkan pubspec.yaml sebagai sumber build ke build.yaml Anda 

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

Lihat #268 untuk diskusi masalah yang sesuai.

Kesalahan dengan internasionalisasi

Silakan coba hapus generate: true di pubspec.yaml Anda dan nonaktifkan synthetic-package di l10n.yaml Anda seperti: 

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

Jika Anda mendapatkan

Berkontribusi

Kami mencari co-developer.

Jika Anda ingin menyumbangkan perubahan ke salah satu plugin yang ada di repo ini, silakan tinjau panduan kontribusi kami dan buka permintaan tarik.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua