Clase 27 de 45 • Curso de Flutter
Contenido del curso
Linus Toolbar
Linus Toolbar
Ann Code
Marcio Alfonso Barrientos Pavón
Bryan Gama Solórzano
Fabian Ardila Castro
Manuel Goncalves Lopez
Edisson Castro
Jonathan Macario
Israel Acetori
Tony Alexander Tafur Bustamante
Edgar Raúl Bañuelos Díaz
Miguel Sarmiento
JAIME URQUIZU
Carlos Sebastian Gracia Yañez
Usuario anónimo
Usuario anónimo
Facundo Nicolás García Martoni
Daniel Alberto Trujillo
Moisés Cedeño
Nicolás Barceló
Alexis Anderson Montenegro Reyes
Alexis Anderson Montenegro Reyes
Ann Code
Jhon Alexander Romero Gonzaga
Joseph Michael Ciriaco Bermudez
Marvin Rafael Ancheta Cuéllar
Alejandro Betancourt
JAIME URQUIZU
Wilson Andrés Camargo Gómez
Julio Armando Vega Salvador
Owen Enríquez
Carlos Enrique Ramírez Flores
Erik Elyager
Javier Batres
erick alejandro de león castillo
Fernando Evelio Rivera Flores
Andrés Emanuel Jara
Eddier Santiago Caicedo Hurtado
Yo para evitar los archivos grandes, y confusos dividí el archivo description_place.dart en
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.
Muy buen aporte Marco. Ese ejercicio te ayudará a reutilizar los Widgets tanto como quieras.
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
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), ), ),
Buen aporte👍
Gracias por tu aporte. Esto fue lo que hice y me gusto mas.
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") ) );
Y me parecería mucho mejor hacerlo de esta manera, así no tendríamos que especificar la tipografía en cada widget Text.
buen aporte viejo...
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
ya me estaba volviendo loco porque no veía los cambios en mi dispositivo :D Gracias por la recomendación!
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.
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
Gracias Pigpen!!!!! Me estaba volviendo loco al no ver los cambios en VS-Code y sí en Android Studio.
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.
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); 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, ], ); } }
Excelente clase ;)
diferencia entre child y children?
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
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, ), ...
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
Me encanta Flutter, es demasiado fácil aprenderlo ❤
Fue un dolor de cabeza, todo por una letra; al fin lo logre!
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
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
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.
Cateto
══╡ 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```
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í
Creen que Yaml sea se mejor que json para las configuraciones?
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.
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.
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:
{ 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
