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:
 5.23.00 p. m..png)
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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter