Lorsque vos développez une application mobile, que ce soit la votre ou celle d'un client, une des premières demandes est d'avoir une identité graphique, cela passe en partie par l'utilisation d'une police bien à vous, qui sera propre à votre application.

Dans cet article, nous allons dont voir comment utiliser des polices personnalisées (ou encore custom font, pour ne vexer personne j'alternerais le terme utilisé au cours de cet article) dans une application Flutter.

Import de nos nouvelles polices

De nombreux sites proposent de télécharger des fonts (gratuitement ou contre quelques euros), libre à vous de choisir celle qui vous plaira et qui correspondra à votre application. Vous pouvez également décider de créer et dessiner vous-même votre propre police. Quelque soit votre décision ici, je ne pourrais pas vous aider. :)

Votre choix est fait ? Pour ma part j'ai choisi une police au hasard sur dafont.

Alors importons nos fichiers fraichement téléchargés (ou pas) dans notre application Flutter. Pour cela, créez un dossier à la racine de votre projet dans lequel vous placerez ces fichiers. Personnellement, par habitude, je place mes fichiers dans MyApp/assets/fonts/my-font.ttf.

Il faut maintenant déclarer ces fonts dans le fichier pubspec.yaml

flutter:
  fonts: 
    - family: DayRoman
      fonts :
        - asset: assets/fonts/DayRoman.ttf

J'ai renseigné DayRoman dans family car c'est le nom que je souhaite donner à ma police. Vous pouvez nommer votre police comme vous le désirez, c'est le nom que vous utiliserez lorsque que vous renseignerez l'attribut font-family de votre texte. Ensuite, assets est, vous l'aurez deviné, le chemin vers votre fichier.

Utilisation de la nouvelle font

Vous pouvez maintenant utiliser votre nouvelle police en définissant le style avec l'attribut font-family

Text(widget.title, style: TextStyle(fontFamily: 'DayRoman'))

TADA ! Ah qu'elle est jolie la police de mon pays ♫ 

Définir comme police par défaut

Maintenant, il n'est pas rare d'avoir à définir une police personnalisée comme police par défaut de l'application. Pour cela, il suffit de définir la font-family dans votre thème :

ThemeData(fontFamily: 'DayRoman');

Et TADA! Vous pouvez maintenant utiliser des polices personnalisées dans vos applications Flutter.

Et le code source sur la base du même projet que les autres articles, c'est par ici. Afin d'éviter les mélanges, chaque article devrait avoir sa branche à partir de maintenant.

Pour ceux qui n'auraient pas suivi la série, voici la liste des articles sur Flutter:

• Qu'est ce que Flutter ?
• L'installation de Flutter pour Windows
• L'installation de Flutter pour Mac
• Créer une première application Flutter
• Ajouter un thème à notre application Flutter
• Ajouter un splashscreen à notre application Flutter
• Naviguer d'une page à l'autre avec Flutter
• Flutter : Classification d'image avec TensorFlow Lite