Exportar fuentes desde un paquete

En lugar de declarar una fuente como parte de una app, puedes declarar una fuente como parte de un paquete separado. Esta es una forma conveniente de compartir la misma fuente entre varios proyectos diferentes, o para programadores que publican sus paquetes en pub.dev. Esta receta utiliza los siguientes pasos:

1. Añadir una fuente a un paquete.
2. Añadir el paquete y la fuente a la app.
3. Usar la fuente.

Para exportar una fuente desde un paquete, necesitas importar los archivos de fuente en la carpeta lib del proyecto del paquete. Puedes colocar los archivos de fuente directamente en la carpeta lib o en un subdirectorio, como lib/fonts.

En este ejemplo, supón que tienes una librería de Flutter llamada awesome_package con fuentes ubicadas en una carpeta lib/fonts.

awesome_package/
  lib/
    awesome_package.dart
    fonts/
      Raleway-Regular.ttf
      Raleway-Italic.ttf

Ahora puedes usar las fuentes en el paquete actualizando el pubspec.yaml en el directorio raíz de la app.

Para añadir el paquete awesome_package como una dependencia, ejecuta flutter pub add:

$ flutter pub add awesome_package

Ahora que has importado el paquete, dile a Flutter dónde encontrar las fuentes de awesome_package.

Para declarar fuentes de un paquete, añade el prefijo packages/awesome_package a la ruta de la fuente. Esto le indica a Flutter que busque la fuente en la carpeta lib del paquete.

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: packages/awesome_package/fonts/Raleway-Regular.ttf
        - asset: packages/awesome_package/fonts/Raleway-Italic.ttf
          style: italic

Usa un TextStyle para cambiar la apariencia del texto. Para usar fuentes de un paquete, declara qué fuente te gustaría usar y a qué paquete pertenece la fuente.

child: Text(
  'Using the Raleway font from the awesome_package',
  style: TextStyle(fontFamily: 'Raleway'),
),

Las fuentes Raleway y RobotoMono se descargaron de Google Fonts.

name: package_fonts
description: An example of how to use package fonts with Flutter
​
dependencies:
  awesome_package:
  flutter:
    sdk: flutter
​
dev_dependencies:
  flutter_test:
    sdk: flutter
​
flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: packages/awesome_package/fonts/Raleway-Regular.ttf
        - asset: packages/awesome_package/fonts/Raleway-Italic.ttf
          style: italic
  uses-material-design: true

import 'package:flutter/material.dart';
​
void main() => runApp(const MyApp());
​
class MyApp extends StatelessWidget {
  const MyApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Package Fonts', home: MyHomePage());
  }
}
​
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default font.
      appBar: AppBar(title: const Text('Package Fonts')),
      body: const Center(
        // This Text widget uses the Raleway font.
        child: Text(
          'Using the Raleway font from the awesome_package',
          style: TextStyle(fontFamily: 'Raleway'),
        ),
      ),
    );
  }
}