flutter_custom_fonts

flutter_custom_fonts

Cómo agregar fuentes personalizadas en Flutter

Introducción:

En este artículo aprenderemos cómo agregar fuentes personalizadas en la aplicación Flutter. Agregaremos fuentes .ttf en este ejemplo. Google Fonts proporciona fuentes gratuitas, por lo que descargaremos fuentes desde allí. Agregaremos fuentes Pacifico y robotocondensadas en este ejemplo. Así que agregemos fuentes personalizadas en la aplicación Flutter en el siguiente ejemplo.

Producción:

Pasos:

Paso 1: Primero y básico paso para crear una nueva aplicación en Flutter. Si eres un principiante en Flutter, puedes consultar mi blog Crear una primera aplicación en Flutter. He creado una aplicación llamada "Flutter_Custom_Fonts".

Paso 2: Ahora, descargue fuentes de Google Fonts o desde otro sitio y coloque el proyecto de fuentes. Cree una carpeta llamada "fuentes" en Project Root Directory y coloque las fuentes en esa carpeta. Echa un vistazo a la siguiente captura de pantalla para obtener más comprensión.

Paso 3: ahora configure las fuentes en el archivo pubspec.yaml. El archivo pubspec.yaml es el archivo de configuración para complementos, fuentes, imágenes, etc., consulte el siguiente código que necesita configurar en su archivo pubspec.yaml.

 fonts:
   - family: Pacifico
     fonts:
       - asset: fonts/Pacifico-Regular.ttf
   - family: RobotoCondensed
     fonts:
       - asset: fonts/RobotoCondensed-Regular.ttf
       - asset: fonts/RobotoCondensed-Bold.ttf
         weight: 700

Paso 4: ahora en el archivo Main.Dart Usaremos las fuentes para diseñar nuestro texto. A continuación se muestra la implementación de programación de eso.

 import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.purple,
     ),
     home: MyHomePage(),
   );
 }
}
 
class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Flutter Custom Fonts'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'Pacifico Regular',
             style: TextStyle(
                 fontFamily: 'Pacifico', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'Pacifico Bold',
             style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontWeight: FontWeight.bold,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Regular',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Bold',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed',
                 fontWeight: FontWeight.w700,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
         ],
       ),
     ),
   );
 }
}

Hurrey ... Ejecute la aplicación y pruebelo en emulador/simulador o dispositivo :)))

Conclusión:

Hemos aprendido que cómo agregar fuentes personalizadas en la aplicación Flutter. Hay tres pasos para eso 1. Descargue las fuentes y colóquelo en la carpeta Fonts 2. Configure las fuentes en el archivo pubspec.yaml y 3. Use las fuentes para peinar el texto.

Repo de git: https://github.com/myvsparth/flutter_custom_fonts

Relacionado con las etiquetas: Flutter, Fuentes personalizadas, Fuentes de Google