Recursos en Flutter: Tipografías y Google Fonts

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

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.

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

🐱‍💻 Utilizando fuentes en la aplicación.

Excelente clase 😉

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

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

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

jajajaj miren lo que hice con las fuentes

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

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

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

  textAlign: TextAlign.justify,

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

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 😦

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!