Flutter En Español ¿Cómo hacer un login? - Flutter en Español ¿Cómo agregar una fuente de letra a mi app?

En Flutter Todo es Widget. Comprame un Cafe para poder seguir con estos proyecto adelante: https://www.buymeacoffee.com/eliecerabsalongarcia Enlace a Github: https://github.com/eliecergarcia Google ha creado una forma sencilla de desarrollar aplicaciones móviles. Imagina piezas de lego con las que puedes armar lo que desees. Ese es el concepto detrás de Flutter y lo puedes aprender en Eliecer Coding próximamente https://www.youtube.com/channel/UCMekkQHCMRVILeMfCD_IkXw4 Instrucciones Importa los archivos de fuentes Declara la fuente en pubspec.yaml Establece una fuente como predeterminada Usa una fuente en un Widget específico Importa los archivos de fuentes Para trabajar con una fuente, necesitamos importar los archivos de fuente al proyecto. Es una práctica común colocar los archivos de fuentes en una carpeta de fonts o assets en la raíz de un proyecto Flutter. Por ejemplo, si queremos importar los archivos de fuentes Raleway y Roboto Mono a nuestro proyecto, la estructura de la carpeta se vería así: content_copy awesome_app/ fonts/ Raleway-Regular.ttf Raleway-Italic.ttf RobotoMono-Regular.ttf RobotoMono-Bold.ttf 2. Declara la fuente en pubspec.yaml Ahora que tenemos una fuente para trabajar, necesitamos decirle a Flutter dónde encontrarla. Podemos hacerlo incluyendo una definición de fuente en pubspec.yaml. content_copy flutter: fonts: - family: Raleway fonts: - asset: fonts/Raleway-Regular.ttf - asset: fonts/Raleway-Italic.ttf style: italic - family: RobotoMono fonts: - asset: fonts/RobotoMono-Regular.ttf - asset: fonts/RobotoMono-Bold.ttf weight: 700 definiciones de opciones de pubspec.yaml La family determina el nombre de la fuente que podemos usar en la propiedad fontFamily de un objeto TextStyle. El asset es una ruta al archivo de fuente, relativa al archivo pubspec.yaml . Estos archivos contienen los contornos de los glifos en la fuente. Al construir nuestra aplicación, estos archivos se incluyen en el paquete de asset de nuestra aplicación. Una sola fuente puede hacer referencia a muchos archivos diferentes con diferentes pesos y estilos de contorno: La propiedad weight especifica el peso de los contornos en el archivo como un múltiplo entero de 100 entre 100 y 900. Estos valores corresponden al FontWeight y se pueden utilizar en la propiedad fontWeight de un objeto TextStyle. La propiedad style especifica si los contornos del archivo son italic o normal. Estos valores corresponden al FontStyle y se pueden utilizar en la propiedad fontStyle de un objeto TextStyle. 3. Establece una fuente como predeterminada Tenemos dos opciones sobre cómo aplicar fuentes al texto: como fuente predeterminada o sólo dentro de Widgets específicos. Para usar una fuente por defecto, podemos establecer la propiedad fontFamily como parte del theme de las aplicaciones. El valor que proporcionamos a fontFamily debe coincidir con el nombre de family declarado en el pubspec.yaml. content_copy MaterialApp( title: 'Custom Fonts', // Establecer Raleway como la fuente predeterminada de la aplicación theme: ThemeData(fontFamily: 'Raleway'), home: MyHomePage(), ); Para obtener más información sobre temas, por favor consulta la receta “Usar Themes para compartir estilos de fuentes y colores”. 4. Usa una fuente en un Widget específico Si queremos aplicar la fuente a un Widget específico, como un Widget de Text , podemos proporcionar un TextStyle al Widget. En este ejemplo, aplicaremos la fuente RobotoMono a un único Widget de Text. Una vez más, la fontFamily debe coincidir con el nombre family que declaramos en pubspec.yaml. content_copy Text( 'Roboto Mono sample', style: TextStyle(fontFamily: 'RobotoMono'), ); Estilo de texto Si un objeto TextStyle especifica un peso o estilo para el que no existe un archivo de fuente exacto, el motor utiliza uno de los archivos más genéricos para la fuente e intenta extrapolar los contornos para el peso y estilo solicitados. Ejemplo completo Fuentes Las fuentes Raleway y RobotoMono se descargaron de Google Fonts. #flutterenespañol #flutterapp #flutterdeveloper #flutterenespanol Video Anterior: Flutter Las Mejores Funcionalidades Que No Tiene Kotlin Ni Swift https://youtu.be/gVH9vHNQBTk Flutter Ventajas Y Desventajas https://youtu.be/cKzldVw8bvQ ¿Por qué Flutter es el futuro del desarrollo de aplicaciones móviles? || Eliecer Garcia https://youtu.be/L2pNhpnsmpU Suscríbete: https://www.youtube.com/channel/UCMekkQHCMRVILeMfCD_IkXw/ Instagram: https://www.instagram.com/eliecer_coding/?hl=es-la