Instalar, configurar y usar fuentes tipográficas en Flutter

- Andrés Cruz

In english
Instalar, configurar y usar fuentes tipográficas en Flutter

Este artículo trata principalmente de cambiar la familia de fuentes tipográficas, pero como está relacionado con que fuentes debes usar o recomendadas si no solamente como puedes emplear una fuente tipográfica en Flutter

Flutter puede funcionar con fuentes personalizadas y puede aplicar una fuente personalizada en una aplicación completa o en widgets individuales. Este turorial te mostrará como crea una aplicación que usa fuentes de terceros con los siguientes pasos:

  • Importe los archivos de fuentes.
  • Declare la fuente en pubspec.
  • Establezca una fuente como predeterminada.
  • Usa una fuente en un widget específico.

Las fuentes tipográficas juegan un rol importante en el diseño y desarrollo de aplicaciones, ya que son un factor determinante en la legibilidad, la estética y la identidad visual de una interfaz de usuario. Cada fuente tiene sus propias características, como el grosor, la altura de las letras y el estilo, que pueden afectar la forma en que los usuarios interactúan con la aplicación y cómo se perciben los contenidos que se presentan. En el diseño de aplicaciones, es importante elegir cuidadosamente la fuente tipográfica que mejor se adapte al propósito y al público objetivo de la aplicación, asegurándose de que sea legible y estéticamente agradable. Además, en algunos casos, puede ser necesario utilizar diferentes fuentes para diferentes partes de la aplicación, como encabezados, textos de botones o cuerpo de texto, para mejorar la usabilidad y la accesibilidad general de la aplicación.

Con esto, podras usar fuentes como la de font awesome o mejor aun, la de Google Fonts, las cuales te permite descargar los archivos de fuentes de manera independiente en tu PC y copiarlos a tu proyecto.

Roboto y San Fransisco son la familia de fuentes predeterminada para Android e iOS, respectivamente. Es posible que tenga una fuente creada a medida por un diseñador, o que haya descargado una fuente de cualquier otro recurso como Google Fonts. De cualquier manera, deberá descargar el archivo de fuente (.ttf) e importarlo a su proyecto Flutter.

Fuentes de textos personalizadas de los sistemas operativos

La fuente predeterminada en Android es Roboto y en iOS es .SF UI Display o .SF UI Text; y es algo que debes de tener presente al momento de trabajar con las fuentes

Si desea utilizar una fuente diferente, deberá agregarla a su aplicación que es lo que vamos a presentar en esta entrada

Tus propias fuentes personalizadas

1. Agrega una fuente a tu proyecto.

Para agregar una fuente custom a tu proyecto, haga clic derecho en la carpeta de su proyecto y vaya a Nuevo> Directorio. Llámalo assets. Debería estar en el directorio raíz de tu proyecto.
Copie y pegue su fuente en el nuevo directorio de activos. Solo estoy usando una sola fuente en mi ejemplo, la fuente de script de baile regular. Lo renombré a dancing_script.ttf.

Agregue una fuente a su carpeta de activos.
2. Registre la fuente en pubspec.yaml.

Abra su archivo pubspec.yaml.
Agrega la información de las fuentes en la sección de Flutter. La sangría es obligatoria.

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  fonts:
    - family: GreyQoRegular     
      fonts:
        - asset: assets/GreyQo-Regular.ttf

3. Utilice la fuente en su código especificando fontFamily.

Text(
 'Hello world',
 style: TextStyle(
   fontFamily: 'GreyQoRegular',
 ),
)

Finalmente:

4. Reinicia tu aplicación

Siempre que agrego activos, encuentro que necesito hacer una parada completa y reiniciar. De lo contrario, obtengo errores.

Tenga en cuenta estas cosas al declarar fuentes en pubspec:

  • La sangría es crucial, y siempre asegúrese de tener los espacios adecuados según sea necesario.
  • Puede agregar varias familias de fuentes de la misma manera (lo verá más adelante)
  • La familia determina el nombre de la fuente y debe ser única para diferentes familias de fuentes.
  • El activo es la ruta de la fuente desde la raíz del proyecto.
  • La propiedad de peso representa el peso de la fuente, un valor entero de 100 a 900
  • La propiedad de estilo especifica si la fuente es normal o cursiva
     Recuerda que este material forma parte de mi curso completo sobre Flutter.
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.