flutter_custom_fonts

flutter_custom_fonts

Comment ajouter des polices personnalisées en flottement

Introduction:

Dans cet article, nous apprendrons à ajouter des polices personnalisées dans l'application Flutter. Nous ajouterons des polices .TTF dans cet exemple. Les polices Google offrent des polices gratuites afin que nous téléchargerons des polices à partir de là. Nous ajouterons des polices Pacifico et robotoconded dans cet exemple. Ajoutons donc les polices personnalisées dans l'application Flutter dans l'exemple ci-dessous.

Sortir:

Mesures:

Étape 1: Première étape de base pour créer une nouvelle application dans Flutter. Si vous êtes un débutant en flottement, vous pouvez consulter mon blog Créer une première application dans Flutter. J'ai créé une application nommée «flutter_custom_fonts».

Étape 2: Maintenant, téléchargez des polices à partir de polices Google ou d'un autre site et mettez le projet Fonts. Créez un dossier nommé «Fonts» sous Root Directory du projet et placez les polices dans ce dossier. Découvrez ci-dessous Capture d'écran pour plus de compréhension.

Étape 3: Configurez maintenant les polices dans le fichier pubspe.yaml. Le fichier PubSpec.yaml est un fichier de configuration pour les plugins, les polices, les images, etc. Consultez le code ci-dessous que vous devez configurer dans votre fichier pubSpe.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

Étape 4: Maintenant, dans le fichier main.dart, nous utiliserons les polices pour styliser notre texte. Vous trouverez ci-dessous la mise en œuvre de la programmation de cela.

 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…. Exécutez l'application et testez-la sur l'émulateur / simulateur ou le périphérique :)))

Conclusion:

Nous avons appris que comment ajouter des polices personnalisées dans l'application Flutter. Il y a trois étapes pour cela 1. Téléchargez les polices et placer dans le dossier des polices 2. Configurez les polices dans le fichier pubspe.yaml et 3. Utilisez les polices pour styliser le texte.

Git repo: https://github.com/myvsparth/flutter_custom_fonts

Lié aux balises: flottement, polices personnalisées, polices Google