dynamic_cached_fonts Téléchargement - dynamic_cached

dynamic_cached_fonts

Téléchargement de polices

v1.2.0

Télécharger

Polices dynamiques en cache

Un chargeur de police simple, facile à utiliser mais personnalisable pour utiliser les polices Web.

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

Introduction

Les polices dynamiques en cache vous permettent de charger dynamiquement une police à partir de toute URL et de la mettre en cache. De cette façon, vous pouvez réduire la taille de votre bundle et charger la police si et quand il est nécessaire.

Un autre avantage des polices de chargement dynamique est que vous pouvez désormais offrir facilement une option à vos utilisateurs pour choisir une police d'application. Cela permet un plus grand niveau de personnalisation.

La mise en cache est une mise à niveau des performances supplémentaire car la police ne sera téléchargée qu'une seule fois et utilisée plusieurs fois, réduisant l'utilisation du réseau et de la batterie.

? Commencer

Pour utiliser le package, ajoutez dynamic_cached_fonts comme dépendance.

⚒️ Utilisation

Chargement des polices à la demande

Vous pouvez charger la police à la demande, par exemple - lorsqu'une page se charge

 @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),
)

Ou quand un bouton est cliqué

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

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

Si vous voulez modifier la taille du cache ou peut-être combien de temps la police reste dans le cache, passez en maxCacheObjects et cacheStalePeriod .

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

TextStyle.fontFamily s ne sont appliqués qu'après que load() est appelée.

Appeler load() plus d'une fois lance une StateError

Et si vous avez besoin de charger plusieurs polices, de poids et de styles variables, en tant que seule famille ... pour cela, vous pouvez utiliser le constructeur DynamicCachedFonts.family .

Il accepte une liste d'URL, pointant vers différentes polices dans la même famille, que urls .

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

Le package prend également en charge le chargement des polices en tant que Stream ! Le loadStream renvoie un seul flux d'abonnement qui émet les fichiers de police.

loadStream accepte un rappel, downloadProgressListener , qui s'appelle à chaque fois qu'un événement DownloadProgress est reçu. Cela ne se produit que lorsque la police est réellement téléchargée à partir de l'URL fournie. Les demandes ultérieures, qui sont généralement desservies par le cache, n'émettent aucun événement de progression. Si le fichier de police a expiré, le fichier sera à nouveau téléchargé pour lequel les événements de progression seront diffusés sur downloadProgressListener .

Lorsque loadStream est appelé avec une seule URL de police, itemCountProgressListener ne sera appelé qu'une seule fois lorsque la police a été chargée dans le moteur.

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

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

Et lorsque loadStream est utilisé pour charger une famille de polices entière, itemCountProgressListener sera appelé une fois pour chaque police de la famille. Dans l'exemple ci-dessous, itemCountProgressListener sera appelé 4 fois, une fois que chaque police a été chargée dans le moteur 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) {},
);

Appeler loadStream plus d'une fois lance une StateError

Si vous avez besoin de plus de contrôle, utilisez les méthodes statiques!

`cacheFont`

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

Vous pouvez également passer dans maxCacheObjects et cacheStalePeriod ici.

`canLoadFont` , `loadCachedFont` , `loadCachedFamily`

canLoadFont est utilisé pour vérifier si la police est disponible en cache. Il est généralement utilisé en combinaison avec les méthodes loadCached* .

Tout d'abord, vérifiez si la police est déjà en cache. Si c'est le cas, chargez la police.

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

Maintenant, si la police n'est pas disponible en cache, téléchargez-la!

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

`cacheFontStream`

cacheFontStream est utilisé pour télécharger et mettre en cache la police. Cette méthode est similaire à cacheFont mais renvoie un seul Stream d'abonnement qui émet la progression du téléchargement. Le téléchargement est diffusé sur le rappel progressListener qui s'appelle chaque fois qu'un événement DownloadProgress est reçu. Cela ne se produit que lorsque la police est réellement téléchargée à partir de l'URL fournie. Les demandes ultérieures, qui sont généralement desservies par le cache, n'émettent aucun événement de progression. Si le fichier de police a expiré, le fichier sera à nouveau téléchargé pour lequel les événements de progression seront diffusés sur downloadProgressListener .

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

`loadCachedFamilyStream`

Utilisez canLoadFont pour vérifier si la police est disponible en cache.

loadCachedFamilyStream est utilisé pour charger plusieurs polices dans le moteur de flottement, en tant que famille de polices. Cette méthode est similaire à loadCachedFamily mais renvoie un flux.

Lorsque loadCachedFamilyStream est appelé avec une seule URL de police, progressListener ne sera appelé qu'une seule fois lorsque la police a été chargée dans le moteur.

Et lorsque loadCachedFamilyStream est utilisé pour charger une famille de polices entière, progressListener sera appelé une fois pour chaque police de la famille. Dans l'exemple ci-dessous, progressListener sera appelé 4 fois, une fois que chaque police a été chargée dans le moteur de flottement.

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

`removeCachedFont`

Pour supprimer une police du cache en permanence , utilisez removeCachedFont .

Remarque - Cela ne modifie pas la police immédiatement jusqu'à un redémarrage complet de l'application.

Enfin, si vous souhaitez personnaliser leur implémentation, étendez RawDynamicCachedFonts et remplacez les méthodes statiques.

Vous avez une police personnalisée à charger à partir du stockage du cloud Firebase? Optez pour le constructeur DynamicCachedFonts.fromFirebase ! Il accepte un emplacement de stockage Google Cloud qui est une URL commençant par gs:// . En dehors de cela, il est similaire au constructeur par défaut.

CONSEIL: Utilisez DynamicCachedFonts.toggleVerboseLogging pour enregistrer les statuts et configurations détaillés pour le débogage.

? Rapports de bogues et aide

Si vous trouvez un bogue, veuillez ouvrir un problème sur GitHub ou si vous avez besoin d'aide, discutons des discussions GitHub!

? Contributif

Pour faciliter les choses, vous pouvez utiliser Docker Compose pour configurer un environnement de développement. Exécutez simplement docker compose run linux pour configurer un environnement Linux Dev ou exécuter docker compose run windows pour configurer un environnement Linux Dev.