Recursos en Flutter: Tipografías y Google Fonts

Resumen

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.

Linus Toolbar

student•

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.

Linus Toolbar

student•

P.D.: Tambien agrege nombres mas declarativos a las variables. Ej.: nameOfThePlace, descriptionOfThePlace, amountOfStars, ya que por lo que leí es valido usar Camel Case en variables, y este estilo me parece mas claro para leer.

Ann Code

teacher•

Muy buen aporte Marco. Ese ejercicio te ayudará a reutilizar los Widgets tanto como quieras.

Marcio Alfonso Barrientos Pavón

student•

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

Bryan Gama Solórzano

student•

Buen aporte👍

Fabian Ardila Castro

student•

Gracias por tu aporte. Esto fue lo que hice y me gusto mas.

Manuel Goncalves Lopez

student•

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: &quot;Lato&quot;,
        primarySwatch: Colors.blue,
      ),home: Scaffold(
        appBar: AppBar(
            title: Text(&quot;My Aplication&quot;) ,
        ),
        body: new DescriptionPlace(&quot;Bahamas&quot;,4,&quot;Description&quot;)
      )
    );

Edisson Castro

student•

Y me parecería mucho mejor hacerlo de esta manera, así no tendríamos que especificar la tipografía en cada widget Text.

Jonathan Macario

student•

buen aporte viejo...

Israel Acetori

student•

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

Tony Alexander Tafur Bustamante

student•

ya me estaba volviendo loco porque no veía los cambios en mi dispositivo :D Gracias por la recomendación!

Edgar Raúl Bañuelos Díaz

student•

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.

Miguel Sarmiento

student•

Otra cosa, en VSCode recordar que si se está en debuging cuando se agregan o se hacen cambios a las fuentes en pubspec.yaml deben pulsar stop y F5 de nuevo para que los cambios tengan efecto. Las nuevas fuentes no se aplican en hot reload

JAIME URQUIZU

student•

Gracias Pigpen!!!!! Me estaba volviendo loco al no ver los cambios en VS-Code y sí en Android Studio.

Carlos Sebastian Gracia Yañez

student•

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

Usuario anónimo

user•

🐱‍💻 Utilizando fuentes en la aplicación.

Usuario anónimo

user•

name: platzi_trips
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  fonts:
    - family: Lato
      fonts:
        - asset: fonts/Lato-Regular.ttf

import 'package:flutter/material.dart';

class DescriptionPlace extends StatelessWidget {
  String namePlace;
  int stars;
  String descriptionPlace;

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

  @override
  Widget build(BuildContext context) {
    final star_half = Container(
      margin: EdgeInsets.only(
        top: 323.0,
        right: 3.0,
      ),
      child: Icon(
        Icons.star_half,
        color: Color(0xFFF2C611),
      ),
    );

    final star_border = Container(
      margin: EdgeInsets.only(
        top: 323.0,
        right: 3.0,
      ),
      child: Icon(
        Icons.star_border,
        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: [
        Container(
          margin: EdgeInsets.only(
            top: 320.0,
            left: 20.0,
            right: 20.0,
          ),
          child: Text(
            namePlace,
            style: TextStyle(
              fontFamily: 'Lato',
              fontSize: 30.0,
              fontWeight: FontWeight.w900,
            ),
            textAlign: TextAlign.left,
          ),
        ),
        Row(
          children: [
            star,
            star,
            star,
            star,
            star_half,
          ],
        ),
      ],
    );

    final description = Container(
      margin: EdgeInsets.only(
        top: 20.0,
        left: 20.0,
        right: 20.0,
      ),
      child: Text(
        descriptionPlace,
        style: TextStyle(
          fontFamily: 'Lato',
          fontSize: 16.0,
          fontWeight: FontWeight.bold,
          color: Color(0xFF56575a),
        ),
      ),
    );

    return Column(
      children: [
        title_stars,
        description,
      ],
    );
  }
}

Facundo Nicolás García Martoni

teacher•

Excelente clase ;)

Daniel Alberto Trujillo

student•

diferencia entre child y children?

Moisés Cedeño

student•

La diferencia es que child retorna un widget simple:

child: Text('foo')

Y children retorna una lista:

children: <Widget>[Text('foo'), Text('bar')]

Nicolás Barceló

student•

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

Alexis Anderson Montenegro Reyes

student•

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

Alexis Anderson Montenegro Reyes

student•

  fonts:
    - family: Lato,
      fonts:
        - asset: fonts/Lato-Regular.ttf
    - family: Charm,
      fonts:
        - asset: fonts/Charm-Regular.ttf

...
          child: Text(
            description,
            style: TextStyle(
              fontFamily: 'Charm'
            ),
            textAlign: TextAlign.left,
          ),
...

Ann Code

teacher•

Revisa el espacio que hay entre el guión y family.
Te debe quedar así, te puse con este simbolo: · los espacios

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

Jhon Alexander Romero Gonzaga

student•

Me encanta Flutter, es demasiado fácil aprenderlo ❤

Joseph Michael Ciriaco Bermúdez

student•

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

Marvin Rafael Ancheta Cuéllar

student•

Los espacios eran lo más difícil. Siempre me decía que había un error en el archivo pubspec.yaml. Al final lo pude arrreglar.

  fonts:
    - family: Lato
      fonts:
        - asset: fonts/Lato-Regular.ttf
        - asset: fonts/Lato-Black.ttf
        - asset: fonts/Lato-Italic.ttf
        - asset: fonts/Lato-BlackItalic.ttf

Alejandro Betancourt

student•

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

JAIME URQUIZU

student•

Como se nota que no has programado en Android, donde tenías que hacer todo esto por lados diferentes (xml, java, diseño...). Flutter hace que en la mitad de tiempo invertido hagas el triple.

Wilson Andrés Camargo Gómez

student•

Cateto

Julio Armando Vega Salvador

student•

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3332): The following assertion was thrown during layout:
I/flutter ( 3332): A RenderFlex overflowed by 63 pixels on the bottom.
I/flutter ( 3332): 
I/flutter ( 3332): The relevant error-causing widget was:
I/flutter ( 3332):   Column file:///home/julio/Android/proyectsFluter/flutter_app/lib/descripcion_place.dart:69:12```

Owen Enríquez

student•

A juzgar por lo que dicen, te excedes por 63px hacia abajo, intenta reducir el tamaño o el margen, o si lo quieres llevar a otro nivel, puedes probar utilizar MediaQuery, te dejo el link de sus especificaciones aquí

Carlos Enrique Ramírez Flores

student•

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

Erik Elyager

student•

Ciertamente hay claras ventajas de usar YAML sobre JSON para configuraciones: soporta comentarios, soporta muchos tipos de datos, quita el ruido de las comas, llaves etc.

En general es más limpio y fácil de entender.

Javier Batres

student•

Para configuración creo que si es mejor opción. Es más limpio y dinamico que lo complejo que se puede volver un JSON.

erick alejandro de león castillo

student•

jajajaj miren lo que hice con las fuentes

Fernando Evelio Rivera Flores

student•

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

Andrés Emanuel Jara

student•

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

Eddier Santiago Caicedo Hurtado

student•

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