dynamic_cached_fonts Download - dynamic_cached

dynamic_cached_fonts

Pengunduhan font

v1.2.0

Unduh

Font cache dinamis

Font loader yang sederhana, mudah digunakan namun dapat disesuaikan untuk menggunakan font web.

Demo: https://sidrao2006.github.io/dynamic_cached_fonts

Perkenalan

Font cache dinamis memungkinkan Anda untuk memuat font secara dinamis dari URL apa pun dan cache. Dengan cara ini, Anda dapat mengurangi ukuran bundel dan memuat font jika dan saat diperlukan.

Keuntungan lain dari font yang memuat secara dinamis adalah Anda sekarang dapat dengan mudah memberikan opsi kepada pengguna Anda untuk memilih font aplikasi. Ini memungkinkan tingkat kustomisasi yang lebih besar.

Caching adalah peningkatan kinerja tambahan karena font akan diunduh hanya sekali dan digunakan beberapa kali, mengurangi jaringan dan penggunaan baterai.

? Mulai

Untuk menggunakan paket, tambahkan dynamic_cached_fonts sebagai ketergantungan.

⚒️ penggunaan

Memuat font sesuai permintaan

Anda dapat memuat font sesuai permintaan, misalnya - saat halaman memuat

 @override
void initState () {
  final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts (
    fontFamily : fontFamilyName, // The font family name to be passed to TextStyle.fontFamily
    url : fontUrl, // A valid url pointing to a font file (.ttf or .otf files only) 
  );
  dynamicCachedFont. load (); // Downloads the font, caches and loads it.

  super . initState ();
}
...
Text (
  'Some Text' ,
  style : TextStyle (fontFamily : fontFamilyName),
)

Atau saat tombol diklik

 ElevatedButton (
  onPressed : () {
    final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts (
      fontFamily : fontFamilyName,
      url : fontUrl,
    );

    dynamicCachedFont. load ();
  },
  child : const Text ( 'Load Font' ),
),

Jika Anda ingin mengubah seberapa besar cache dapat atau mungkin berapa lama font tetap di cache, lewati maxCacheObjects dan cacheStalePeriod .

 DynamicCachedFonts (
  fontFamily : fontFamilyName,
  url : fontUrl,
  maxCacheObjects : 150 ,
  cacheStalePeriod : const Duration (days : 100 ),
);

TextStyle.fontFamily S diterapkan hanya setelah load() dipanggil.

Memanggil load() lebih dari sekali melempar StateError

Bagaimana jika Anda perlu memuat beberapa font, dari berbagai bobot dan gaya, sebagai satu keluarga ... untuk itu, Anda dapat menggunakan DynamicCachedFonts.family Constructor.

Ia menerima daftar URL, menunjuk ke font yang berbeda dalam keluarga yang sama, seperti urls .

 DynamicCachedFonts . family (
  urls : < String > [
    fontFamilyNameBoldUrl,
    fontFamilyNameItalicUrl,
    fontFamilyNameRegularUrl,
    fontFamilyNameThinUrl,
  ],
  fontFamily : fontFamilyName,
);

Paket ini juga mendukung memuat font sebagai Stream ! loadStream mengembalikan aliran berlangganan tunggal yang memancarkan file font.

loadStream menerima panggilan balik, downloadProgressListener , yang disebut setiap kali acara DownloadProgress yang diterima. Ini terjadi hanya ketika font sebenarnya sedang diunduh dari URL yang disediakan. Permintaan selanjutnya, yang biasanya dilayani dari cache, tidak memancarkan peristiwa kemajuan apa pun. Jika file font telah kedaluwarsa, maka file akan diunduh lagi yang acara kemajuan akan dialirkan ke downloadProgressListener .

Ketika loadStream dipanggil dengan URL font tunggal, maka itemCountProgressListener akan dipanggil hanya sekali ketika font telah dimuat ke dalam mesin.

 final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts (
  fontFamily : fontFamilyName,
  url : fontUrl,
);

dynamicCachedFont. loadStream (
  itemCountProgressListener : ( double progress, int totalItems, int downloadedItems) {},
  downloadProgressListener : ( DownloadProgress progress) {},
);

Dan ketika loadStream digunakan untuk memuat seluruh keluarga font, itemCountProgressListener akan dipanggil sekali untuk setiap font dalam keluarga. Dalam contoh yang diberikan di bawah ini, itemCountProgressListener akan disebut 4 kali, sekali setelah setiap font dimuat ke mesin flutter.

 final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts . family (
  urls : < String > [
    fontFamilyNameBoldUrl,
    fontFamilyNameItalicUrl,
    fontFamilyNameRegularUrl,
    fontFamilyNameThinUrl,
  ],
  fontFamily : fontFamilyName,
);

dynamicCachedFont. loadStream (
  itemCountProgressListener : ( double progress, int totalItems, int downloadedItems) {},
  downloadProgressListener : ( DownloadProgress progress) {},
);

Memanggil loadStream lebih dari sekali melempar StateError

Jika Anda membutuhkan lebih banyak kontrol, gunakan metode statis!

`cacheFont`

onPressed : () {
  DynamicCachedFonts . cacheFont (fontUrl);
},
child : const Text ( 'Download font' ),

Anda dapat lulus di maxCacheObjects dan cacheStalePeriod di sini juga.

`canLoadFont` , `loadCachedFont` , `loadCachedFamily`

canLoadFont digunakan untuk memeriksa apakah font tersedia dalam cache. Biasanya digunakan dalam kombinasi dengan metode loadCached* .

Pertama, periksa apakah font sudah dalam cache. Jika ya, maka muat font.

 if ( DynamicCachedFonts . canLoadFont (fontUrl)) {
  // To load a single font...
  DynamicCachedFonts . loadCachedFont (
    fontUrl,
    fontFamily : fontFamilyName,
  );

  // Or if you want to load multiple fonts as a family...
  DynamicCachedFonts . loadCachedFamily (
    < String > [
      fontFamilyNameBoldUrl,
      fontFamilyNameItalicUrl,
      fontFamilyNameRegularUrl,
      fontFamilyNameThinUrl,
    ],
    fontFamily : fontFamilyName,
  );
}

Sekarang, jika font tidak tersedia dalam cache, unduh!

 if ( DynamicCachedFonts . canLoadFont (fontUrl)) {
  ...
} else {
  DynamicCachedFonts . cacheFont (fontUrl);
}

`cacheFontStream`

cacheFontStream digunakan untuk mengunduh dan menyimpan font. Metode ini mirip dengan cacheFont tetapi mengembalikan Stream berlangganan tunggal yang memancarkan kemajuan unduhan. Unduhan dijalankan ke callback progressListener yang disebut setiap kali acara DownloadProgress yang diterima. Ini terjadi hanya ketika font sebenarnya sedang diunduh dari URL yang disediakan. Permintaan selanjutnya, yang biasanya dilayani dari cache, tidak memancarkan peristiwa kemajuan apa pun. Jika file font telah kedaluwarsa, maka file akan diunduh lagi yang acara kemajuan akan dialirkan ke downloadProgressListener .

 DynamicCachedFonts . cacheFontStream (
  fontUrl,
  progressListener : ( DownloadProgress progress) {},
);

`loadCachedFamilyStream`

Gunakan canLoadFont untuk memeriksa apakah font tersedia dalam cache.

loadCachedFamilyStream digunakan untuk memuat beberapa font ke dalam mesin flutter, sebagai keluarga font tunggal. Metode ini mirip dengan loadCachedFamily tetapi mengembalikan aliran.

Ketika loadCachedFamilyStream dipanggil dengan URL font tunggal, progressListener akan dipanggil hanya sekali ketika font telah dimuat ke dalam mesin.

Dan ketika loadCachedFamilyStream digunakan untuk memuat seluruh keluarga font, progressListener akan dipanggil sekali untuk setiap font dalam keluarga. Dalam contoh yang diberikan di bawah ini, progressListener akan disebut 4 kali, sekali setelah setiap font dimuat ke mesin flutter.

 DynamicCachedFonts . loadCachedFamilyStream (
  < String > [
    fontFamilyNameBoldUrl,
    fontFamilyNameItalicUrl,
    fontFamilyNameRegularUrl,
    fontFamilyNameThinUrl,
  ],
  fontFamily : fontFamilyName,
  progressListener : ( double progress, int totalItems, int downloadedItems) {},
);

`removeCachedFont`

Untuk menghapus font dari cache secara permanen , gunakan removeCachedFont .

Catatan - Ini tidak segera mengubah font sampai aplikasi lengkap restart.

Akhirnya, jika Anda ingin menyesuaikan implementasinya, memperluas RawDynamicCachedFonts dan mengesampingkan metode statis.

Punya font khusus untuk memuat dari Firebase Cloud Storage? Pergi untuk konstruktor DynamicCachedFonts.fromFirebase ! Ia menerima lokasi penyimpanan cloud Google yang merupakan URL yang dimulai dengan gs:// . Selain itu, mirip dengan konstruktor default.

Tip: Gunakan DynamicCachedFonts.toggleVerboseLogging untuk mencatat status dan konfigurasi terperinci untuk debugging.

? Laporan dan Bantuan Bug

Jika Anda menemukan bug, silakan buka masalah di GitHub atau jika Anda memerlukan bantuan, mari kita bahas tentang diskusi github!

? Berkontribusi

Untuk membuat segalanya lebih mudah, Anda dapat menggunakan Docker Compose untuk mengatur lingkungan dev. Cukup jalankan docker compose run linux untuk mengatur lingkungan Linux Dev atau run docker compose run windows untuk mengatur lingkungan Linux Dev.