Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Recursos en Flutter: Tipografías y Google Fonts

22/38
Recursos

Cuando hablamos de Tipografías nos referimos precisamente al tipo y estilo de letras que usaremos en los textos de nuestra interfaz, esta característica estará determinada por las indicaciones que nos haya suministrado nuestro equipo de diseño.

Un sitio web muy utilizado e interesante para obtener tipografías que puedes usar en tus proyectos es Google Fonts.

Para incorporar las tipografías personalizadas a nuestro proyecto crearemos una carpeta particular llamada fonts/ en la que guardaremos los archivos que descarguemos desde Google Fonts. Seguidamente, debemos declarar este recurso en el archivo pubspecs.yaml. Este archivo contiene las especificaciones de todos los recursos públicos que estarán disponibles para ser usados en nuestro proyecto. La sintaxis yaml está inspirada en json y xml y se usa en Flutter para definir la estructura de recursos y configuraciones globales de nuestra aplicación.

La forma de declarar los recursos de tipografía que usaremos en nuestro proyecto es la siguiente:

...
fonts:
        - family: 
        fonts:
                - asset: 
...

Algo que se debe tener en cuenta es que yaml es bastante estricto con la indentación de los datos. En otras palabras, la sangría, tabulación o espaciado de cada línea debe estar indicada correctamente para que no haya problemas con la lectura y procesamiento posterior de las configuraciones.

Para aplicar la nueva tipografía a nuestro código bastará con incluir en el widget TextStyle, la propiedad fontFamily e indicar en ella el nombre de la fuente que hemos declarado en nuestro archivo de configuración.

Aportes 42

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Yo para evitar los archivos grandes, y confusos dividí el archivo description_place.dart en

  • stars.dart
  • description_body.dart
  • description_head.dart
  • description.dart (El cual se llama desde el main.dart)
    Y todos estos estan en /lib/components/place.
    Haciendo estos cambios el código se me hizo mas mantenible.

Aportando al curso, es bueno agregar que ahora el manejo de las fuentes en Flutter con Google Fonts ahora es mucho mas fácil, solo es de instalar el plugin de google fonts desde https://pub.dev/

Y luego agregarlas como estilos

Text(
  'Hola mundo mundial',
  style: GoogleFonts.lato(),
),

Si se quisieran agregar estilos adicionales como color se tiene que hacer de esta forma

Text(
  'Hola mundo mundial',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
),

En el caso que se desee cambiar la tipografia por defecto a toda la app, ésta debe ser declarado dentro de tema de la aplicación

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: "Lato",
        primarySwatch: Colors.blue,
      ),home: Scaffold(
        appBar: AppBar(
            title: Text("My Aplication") ,
        ),
        body: new DescriptionPlace("Bahamas",4,"Description")
      )
    );

Si no notan el cambio de la fuente deténganlo y vuelvan a iniciar el proceso de virtualización , en el caso de VS Code Stop y F5

OpenSans para el que le interese un font diferente

fonts:
    - family: OpenSans
      fonts:
        - asset: fonts/OpenSans-Bold.ttf
          weight: 700
          style: normal
        - asset: fonts/OpenSans-BoldItalic.ttf
          weight: 700
          style: italic
        - asset: fonts/OpenSans-ExtraBold.ttf
          weight: 800
          style: normal
        - asset: fonts/OpenSans-ExtraBoldItalic.ttf
          weight: 800
          style: italic
        - asset: fonts/OpenSans-Italic.ttf
          weight: 400
          style: italic
        - asset: fonts/OpenSans-Light.ttf
          weight: 300
          style: normal
        - asset: fonts/OpenSans-LightItalic.ttf
          weight: 300
          style: italic
        - asset: fonts/OpenSans-Regular.ttf
          weight: 400
          style: normal
        - asset: fonts/OpenSans-SemiBold.ttf
          weight: 600
          style: normal
        - asset: fonts/OpenSans-SemiBoldItalic.ttf
          weight: 600
          style: italic

Para los que estén usando VS Code como en mi caso, no hay necesidad de hacer el Packages upgrade, el editor lo realiza cuando compilas el código.

🐱‍💻 Utilizando fuentes en la aplicación.

Excelente clase 😉

Tengo mi telefono conectado, y no se visualizan los cambios de la tipografía, ya revisé el código y todo está bien, y el hot reloading está funcionando correctamente, intenté cerrar el hot reloading, desintalar la aplicacion y volver a correr flutter run pero no funciona

Me encanta Flutter, es demasiado fácil aprenderlo ❤

Fue un dolor de cabeza, todo por una letra; al fin lo logre!

Hasta aquí vamos mal, acabo de escribir 32 líneas de código solo para mostrar un nombre con unas estrellas al lado? Espero que más adelante la cosa se simplifique

cuando se colocar algo en el pubspec no se le da package upgrade porque esto hace que se actualices todas las libreritas y esto puede crear un compatibilidades. En el caso de colocar el fontfamily es darle en packages get

Sucede algo interesante al descargar las fuentes desde google fonts e instalar el plugin https://pub.dev/packages/google_fonts.
El plugin automáticamente hara un match de las fuentes descargadas y las usara en vez de descargarlas via HTTP en runTime, para que esto funcione tienen que dejar las fuentes en una carpeta google_fonts y agregarla al pubspec.yaml’s de la siguiente manera:

  • assets:
    • google_fonts/
      PD: El plugin automáticamente rapea los estilos de las fuentes basados en el nombre de estas, así que no es recomendable renombrarlas
{
  FontWeight.w100: 'Thin',
  FontWeight.w200: 'ExtraLight',
  FontWeight.w300: 'Light',
  FontWeight.w400: 'Regular',
  FontWeight.w500: 'Medium',
  FontWeight.w600: 'SemiBold',
  FontWeight.w700: 'Bold',
  FontWeight.w800: 'ExtraBold',
  FontWeight.w900: 'Black',
}

Aquí un ejemplo de como use el tipo de letra Spectral en modo italic

child: Text(
        description_place,
        style: GoogleFonts.spectral(
          fontSize: 18.0,
          fontWeight: FontWeight.w300,
          fontStyle: FontStyle.italic
        )
      ),

Hoy en día es mucho mejor utilizar el siguient package para asignar fuentes en la aplicación:
https://pub.dev/packages/google_fonts

Tambien puedes instalar la fuente desde https://pub.dev/ y luego agregarla al tema de la siguiente forma

theme: ThemeData(
fontFamily: GoogleFonts.lato().fontFamily,
primarySwatch: Colors.blue,
),

Si alguien tiene problemas en windows como este Execution failed for task ‘:app:processDebugResources’. > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade > Android resource linking failed AAPT: error: failed writing to ‘C:…\R.txt’: Datos no válidos.
El problema que me ayudo a resolverlo es desactivar mi antivirus en mi caso es avast.

Cambiando la fuente.

Tenía problemas, estaba poniendo tab en lugar de espacios, posteriormente pare y volví a arrancar el programa

excelente, se entiende todo a la perfección!

Genial!!

Hola Ann…

No logro hacer funcionar mis tipografías, he revisado decenas de veces el código y no logro ver cuál es el error:

  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/Montserrat-Regular.ttf
    - family: Thasadith
      fonts:
        - asset: fonts/Thasadith-Regular.ttf
    - family: IndieFlower
      fonts:
        - asset: fonts/IndieFlower.ttf
child: Text(
              "Duwilli Ella",
              style: TextStyle(
                fontFamily: "IndieFlower",
                fontSize: 30.0,
               // fontWeight: FontWeight.bold
              ),
              textAlign: TextAlign.left,
            )

Buen dato sobre el uso de nuevas fuentes 😃

Muy fácil el uso de fuentes en Flutter

import ‘package:flutter/material.dart’;

class DescriptionPlace extends StatelessWidget{

String namePlace;
int stars;
String Description;

DescriptionPlace(this.namePlace,this.stars,this.Description);

@override
Widget build(BuildContext context) {
// TODO: implement build

final star_border = Container(
    margin: EdgeInsets.only(
        top:323.0,
        right: 3.0
    ),
    child: Icon(
      Icons.star_border,
      color: Color(0xFFF2C611),
    ),
);

final star_half = Container(
    margin: EdgeInsets.only(
        top:323.0,
        right: 3.0
    ),
    child: Icon(
      Icons.star_half,
      color: Color(0xFFF2C611),
    ),
);

final star=Container(
  margin: EdgeInsets.only(
    top:323.0,
    right: 3.0
  ),
  child: Icon(
      Icons.star,
      color: Color(0xFFF2C611),
  )

);

final title_stars =Row(
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(
        top: 320.0,
        left:20.0,
        right: 20.0

      ),
      child:  Text(
        namePlace,
        style: TextStyle(
          fontFamily: "DancingBold" ,
          fontSize: 40.0,
          fontWeight: FontWeight.w900
        ),
        textAlign: TextAlign.left ,
      ),
   ),
    Row(
      children: <Widget>[
        star,
        star,
        star,
        star_half,
        star_border


      ],
    )
  ],
);

final descripcion = Container(
      margin: new EdgeInsets.only(
        top: 2.0,
        left: 20.0,
        right: 20.0,
      ),
      child:
        Text(
        Description
        , style: const TextStyle(
          fontFamily: "Lato",
          fontSize: 15.0, letterSpacing: 0.5
        ),
      ),
);


final descripcionFinal= Column(
  children: <Widget>[
    title_stars,
    descripcion
  ],
);

return descripcionFinal;

}

}

Los archivos de la sección enlaces no se pueden descargar

Esta fuente me gustó mucho:

  fonts:
    - family: IBM Plex Sans
      fonts:
        - asset: assets/fonts/IBMPlexSans-Thin.ttf
          weight: 100
          style: normal
        - asset: assets/fonts/IBMPlexSans-ThinItalic.ttf
          weight: 100
          style: italic
        - asset: assets/fonts/IBMPlexSans-ExtraLight.ttf
          weight: 200
          style: normal
        - asset: assets/fonts/IBMPlexSans-ExtraLightItalic.ttf
          weight: 200
          style: italic
        - asset: assets/fonts/IBMPlexSans-Light.ttf
          weight: 300
          style: normal
        - asset: assets/fonts/IBMPlexSans-LightItalic.ttf
          weight: 300
          style: italic
        - asset: assets/fonts/IBMPlexSans-Regular.ttf
          weight: 400
          style: normal
        - asset: assets/fonts/IBMPlexSans-Italic.ttf
          weight: 400
          style: italic
        - asset: assets/fonts/IBMPlexSans-Medium.ttf
          weight: 500
          style: normal
        - asset: assets/fonts/IBMPlexSans-MediumItalic.ttf
          weight: 500
          style: italic
        - asset: assets/fonts/IBMPlexSans-SemiBold.ttf
          weight: 600
          style: normal
        - asset: assets/fonts/IBMPlexSans-SemiBoldItalic.ttf
          weight: 600
          style: italic
        - asset: assets/fonts/IBMPlexSans-Bold.ttf
          weight: 700
          style: normal
        - asset: assets/fonts/IBMPlexSans-BoldItalic.ttf
          weight: 700
          style: italic

Los datos del peso y el estilo están en Google Fonts.

greattttttt

Lógica básica para interactuar con las estrellas que se reciben como parámetro

Creen que Yaml sea se mejor que json para las configuraciones?

fonts: 
    - family: Lato
      fonts:
        - asset: fonts/Lato-Regular.ttf```

Tenía un error

Unexpected key assets ((String)) under font.

resultaba que yo había escrito assets en lugar de asset, por si a alguno le pasa lo mismo.

buena clase, muy claro todo.

En el titulo utilice Allerta stencil, una de mis fonts favoritas 😃

😮 Interesante!

good

ya no jala 😦

jajajaj miren lo que hice con las fuentes

hola alguien puede ayudarme a hacer esto: Conexión a bases de datos web / consumo de servicios (1 crud con 4
datos diferentes)

Según tengo entendido existen ya varias tipografías incluidas en material, corríjanme si estoy mal por favor.

Error: unable to locate asset entry in pubspec.yaml: “Fonts/RacingSansOne-Regular.ttf”.
Me salta este error al querer arrancar mi app!