dynamic_cached_fonts

Fuentes dinámicas en caché

Un cargador de fuentes simple y fácil de usar pero personalizable para usar fuentes web.

Demostración: https://sidrao2006.github.io/dynamic_cached_fonts

Introducción

Las fuentes en caché dinámicas le permiten cargar dinámicamente una fuente de cualquier URL y almacenarla en caché. De esta manera, puede reducir el tamaño de su paquete y cargar la fuente si es necesario.

Otra ventaja de las fuentes de carga dinámica es que ahora puede proporcionar fácilmente una opción a sus usuarios para elegir una fuente de aplicación. Esto permite un mayor nivel de personalización.

El almacenamiento en caché es una actualización de rendimiento adicional ya que la fuente se descargará solo una vez y se usará varias veces, reduciendo el uso de redes y baterías.

? Empezar

Para usar el paquete, agregue dynamic_cached_fonts como dependencia.

⚒️ Uso

Carga de fuentes a pedido

Puede cargar fuente a pedido, por ejemplo, cuando se carga una página

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

O cuando se hace clic en un botón

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

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

Si desea cambiar cuán grande puede ser el caché o tal vez cuánto tiempo permanezca la fuente en caché, pase en maxCacheObjects y cacheStalePeriod .

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

TextStyle.fontFamily s se aplica solo después de que se llama load() .

Llamar load() más de una vez arroja un StateError

¿Qué pasa si necesita cargar múltiples fuentes, de diferentes pesos y estilos, como una sola familia ... para eso, puede usar el DynamicCachedFonts.family . Family Constructor.

Acepta una lista de URL, señalando diferentes fuentes en la misma familia, que urls .

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

¡El paquete también admite cargar las fuentes como Stream ! loadStream devuelve una secuencia de suscripción única que emite los archivos de fuentes.

loadStream acepta una devolución de llamada, downloadProgressListener , que se llama cada vez que se recibe un evento DownloadProgress . Esto sucede solo cuando la fuente se descarga de la URL proporcionada. Las solicitudes posteriores, que generalmente se sirven desde el caché, no emiten ningún evento de progreso. Si el archivo de fuentes ha expirado, el archivo se descargará nuevamente para el cual los eventos de progreso se transmitirán para downloadProgressListener .

Cuando se llama loadStream con una sola URL de fuente, el itemCountProgressListener se llamará solo una vez cuando la fuente se haya cargado en el motor.

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

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

Y cuando loadStream se usa para cargar una familia de fuentes completa, itemCountProgressListener se llamará una vez para cada fuente de la familia. En el ejemplo que se da a continuación, itemCountProgressListener se llamará 4 veces, una vez después de que cada fuente se haya cargado en el motor de aleteo.

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

Llamar loadStream más de una vez arroja un StateError

Si necesita más control, ¡use los métodos estáticos!

cacheFont

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

Puede pasar por maxCacheObjects y cacheStalePeriod aquí también.

canLoadFont , loadCachedFont , loadCachedFamily

canLoadFont se usa para verificar si la fuente está disponible en caché. Por lo general, se usa en combinación con los métodos loadCached* .

Primero, verifique si la fuente ya está en caché. Si es así, entonces cargue la fuente.

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

Ahora, si la fuente no está disponible en caché, ¡descárgala!

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

cacheFontStream

cacheFontStream se usa para descargar y almacenar en caché la fuente. Este método es similar a cacheFont pero devuelve un Stream de suscripción único que emite el progreso de la descarga. La descarga se transmite a la devolución de llamada progressListener , que se llama cada vez que se recibe un evento DownloadProgress . Esto sucede solo cuando la fuente se descarga de la URL proporcionada. Las solicitudes posteriores, que generalmente se sirven desde el caché, no emiten ningún evento de progreso. Si el archivo de fuentes ha expirado, el archivo se descargará nuevamente para el cual los eventos de progreso se transmitirán para downloadProgressListener .

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

loadCachedFamilyStream

Use canLoadFont para verificar si la fuente está disponible en caché.

loadCachedFamilyStream se usa para cargar múltiples fuentes en el motor Flutter, como una familia de fuentes. Este método es similar a loadCachedFamily pero devuelve una secuencia.

Cuando loadCachedFamilyStream se llama con una sola URL de fuente, progressListener se llamará solo una vez cuando la fuente se haya cargado en el motor.

Y cuando loadCachedFamilyStream se usa para cargar una familia de fuentes completa, progressListener se llamará una vez para cada fuente de la familia. En el ejemplo que se da a continuación, progressListener se llamará 4 veces, una vez después de que cada fuente se haya cargado en el motor de aleteo.

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

removeCachedFont

Para eliminar una fuente de la caché de forma permanente , use removeCachedFont .

Nota: esto no cambia la fuente inmediatamente hasta que se reinicie una aplicación completa.

Finalmente, si desea personalizar su implementación, extienda RawDynamicCachedFonts y anule los métodos estáticos.

¿Tiene una fuente personalizada para cargar desde el almacenamiento de la nube de Firebase? ¡Vaya por el DynamicCachedFonts.fromFirebase Constructor! Acepta una ubicación de almacenamiento en la nube de Google que es una URL que comienza con gs:// . Aparte de eso, es similar al constructor predeterminado.

Consejo: Use DynamicCachedFonts.toggleVerboseLogging para registrar estados y configuraciones detalladas para la depuración.

? Informes de errores y ayuda

Si encuentra un error, abra un problema en GitHub o si necesita ayuda, ¡discutamos sobre las discusiones de Github!

? Que contribuye

Para facilitar las cosas, puede usar Docker Compose para configurar un entorno de desarrollo. Simplemente ejecute docker compose run linux para configurar un entorno de desarrollo de Linux o ejecutar docker compose run windows para configurar un entorno de desarrollo de Linux.

Debe estar en una máquina de Windows para poder configurar un entorno Docker Windows.

Para contribuir al paquete, bifurca el repositorio y abra una solicitud de extracción.