Bonjour à tous et bienvenue dans ce nouveau tuto Flutter sur l’utilisation du package Google Fonts.

Dans ce petit tutoriel, nous allons voir comment utiliser ce package pour que vous puissiez vous amuser un peu avec le design dans vos applications.

Pour l’utiliser c’est très simple, vous allez sur le site de Google Fonts afin de choisir vos polices et ensuite vous n’avez plus qu’à faire appel aux différentes polices depuis votre code.

Nous allons créer une petite application simple pour prendre en main le package et tester différentes polices:

Pour créer cette application, nous allons suivre les étapes suivantes:

  1. La police de base de Flutter
  2. Installation du package Google Fonts
  3. Test de différentes polices
  4. Télécharger les polices de Google Fonts

Vous pouvez également télécharger le code source de l’application pour la tester plus rapidement.

1. La police de base de Flutter

Alors pour commencer, j'ai choisi de démarrer avec l'application de base de Flutter pour le tuto, mais n'importe quelle application fera l'affaire.

Avant d'utiliser ce package, il faut savoir que vous avez déjà accès par défaut à des fonctionnalités intégrées dans Flutter pour modifier vos textes.

Pour pouvoir modifier vos widgets Text(), il vous suffit d'ajouter à la suite de votre chaîne de caractère le champ style qui vous donne accès à la classe TextStyle(): 

const Text(
  'You have pushed the button this many times:'
  style: TextStyle()
),

Cette classe va vous donner par défaut accès à toutes les propriétés de modification de police.

Par exemple, pour modifier la taille de la police, il faudra utiliser la propriété fontSize :

const Text(
  'You have pushed the button this many times:'
  style: TextStyle(
    fontSize: 30,
  ),
),

Pour mettre le texte en gras, la propriété fontWeight:

const Text(
  'You have pushed the button this many times:'
  style: TextStyle(
    fontSize: 30,
  	fontWeight: FontWeight.bold,
  ),
),

Et pour modifier la couleur du texte, en bleu par exemple, il vous suffit d'entrer le champ color:

const Text(
  'You have pushed the button this many times:'
  style: TextStyle(
    fontSize: 30,
  	fontWeight: FontWeight.bold,
  	color: Colors.blueAccent,
  ),
),

Voilà déjà ce que vous pouvez faire comme modifications sur vos polices avec la classe TextStyle() de Flutter.

C'est déjà très pratique et dans les faits la plupart du temps pour nos applications ces propriétés sont suffisantes pour le design.

Par exemple, pour l'application de cryptomonnaie que je développe pour l'atelier de la Flutter Académie, j'ai utilisé la classe TextStyle():

L'avantage avec Google Fonts c'est que vous avez accès à des centaines de polices différentes et que vous pouvez vraiment créer un design personnalisé.

2. Installation du package Google Fonts

Pour l'installation de Google Fonts, vous trouverez le lien du site juste ici: https://fonts.google.com/

Nous allons utiliser le package google_fonts dont je vous laisse récupérer la dernière version : https://pub.dev/packages/google_fonts

Vous pouvez ajouter les dépendances de ce package dans votre fichier Yaml, juste à la suite du package cupertino_icons comme ceci:

cupertino_icons: ^1.0.2
google_fonts: ^2.3.1

Entrez ensuite la commande suivante pour le télécharger dans votre application :

flutter pub get

Vous pouvez maintenant importer ce package dans votre fichier Dart comme ceci :

import 'package:google_fonts/google_fonts.dart';

Ensuite pour utiliser le package, c'est tout simple, au lieu d'utiliser la classe TextStyle() comme précédemment, on va utiliser la syntaxe suivante :

const Text(
  'You have pushed the button this many times:'
  style: GoogleFonts.LE_NOM_DE_VOTRE_POLICE()
 ),

Quand vous allez mettre le point derrière GoogleFonts, un menu déroulant va apparaître avec la liste de toutes les polices proposées par le package.

On peut tester avec la police Oswald par exemple:

Text(
  'You have pushed the button this many times:'
  style: GoogleFonts.oswald(),
 ),

Comme vous pouvez le voir, j'ai enlevé le "const" en début de code, car comme à chaque utilisation du package, on va chercher la police directement sur Internet.

Une fois que vous avez choisi votre police, comme vous le faisiez avec la classe TextStyle, vous pouvez utiliser les différentes propriétés pour changer l'aspect de la police : la taille, le gras, la couleur, etc.

Text(
  'You have pushed the button this many times:'
  style: GoogleFonts.oswald(
  	fontSize : 30,
  	color: Colors.blueAccent,
  	fontWeight: FontWeight.w700,
  ),
),

Pour les propriétés de mise en gras du texte, vous avez différentes valeurs qui apparaissent en plus de normal, il faut savoir qu'au-delà de w500 c'est plus épais que pour un bold classique.

Vous pouvez maintenant vous amuser avec le design en modifiant la police, la couleur, etc.

3. Test de différentes polices

Vous pouvez aussi afficher une ListeTile() pour présenter vos différentes polices comme ceci avec l'exemple de la police Oswald :

Card(
  child: ListTile(
    title: Text(
      'Hello World',
      style: GoogleFonts.oswald(
        fontSize: 30,
        fontWeight: FontWeight.bold,
        color: Colors.blueAccent,
      ),
    ),
    subtitle: const Text('Oswald'),
  ),
),

Vous pouvez vraiment créer des styles et des ambiances différentes comme vous le voyez avec les polices que je vous ai sélectionné juste ici:

Column(
  children: [
    const SizedBox(height: 10),
    Card(
      child: ListTile(
        title: Text(
          'Hello World',
          style: GoogleFonts.oswald(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.blueAccent,
          ),
        ),
        subtitle: const Text('Oswald'),
      ),
    ),
    Card(
      child: ListTile(
        title: Text(
          '5 minutes later...',
          style: GoogleFonts.paletteMosaic(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.redAccent,
          ),
        ),
        subtitle: const Text('Palette Mosaic'),
      ),
    ),
    Card(
      child: ListTile(
        title: Text(
          'Il était une fois dans l\'ouest',
          style: GoogleFonts.smokum(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.brown.shade600,
          ),
        ),
        subtitle: const Text('Palette Mosaic'),
      ),
    ),
    [...],
    Card(
      child: ListTile(
        title: Text(
          'Think Different',
          style: GoogleFonts.ramaraja(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.grey.shade900,
          ),
        ),
        subtitle: const Text('Ramaraja'),
      ),
    ),
  ],
),

Le plus simple est de faire d'abord vos recherches sur Google Fonts en parcourant le site avec toutes les polices disponibles.

Vous pouvez filtrer les polices en fonction du style que vous recherchez, mais mon conseil serait tout de même de rester léger, car la plupart des applications sont souvent sobres.

4. Télécharger les polices de Google Fonts

Pour terminer ce tutoriel, je vais vous montrer comment télécharger une police afin de pouvoir l'utiliser hors connexion.

Pour commencer, la documentation du package vous conseille de créer un dossier "google_fonts" dans le dossier de votre application Flutter.

C'est à l'intérieur de ce dossier que nous allons venir placer toutes les polices que nous souhaitons utiliser hors connexion.

Dans cet exemple, on va utiliser la police Handlee, on vient donc cliquer sur "Download Family" à côté de la police sur le site de Google Fonts.

On l'enregistre ensuite dans le dossier google_fonts que nous venons de créer dans le dossier de notre application.

On a un fichier zip au nom de la police qui vient d'apparaître dans notre dossier google_fonts.

On peut donc le dézipper, l'ouvrir et ne conserver que le fichier .ttf dans notre dossier google_fonts.

On va pouvoir maintenant importer la police dans notre application pour pouvoir la manipuler.

On retourne alors dans notre fichier Yaml et on reprend toute la section fonts en marquant le nom de notre police (Handlee) et en indiquant le bon dossier comme ci-dessous :

fonts:
  - family: Handlee
    fonts:
      - asset: google_fonts/Handlee-Regular.ttf

Entrez ensuite la commande suivante pour enregistrer ces informations:

flutter pub get

Ensuite pour utiliser votre police, il suffit de reprendre la classe TextStyle() comme ci-dessous :

Text(
  'Hello World',
  style: TextStyle(
    fontFamily: 'Handlee',
  ),
),

Et vous pouvez toujours utiliser les propriétés de modifications de taille, de couleur ou d'épaisseur comme précédemment :

Text(
	'Hello World',
	style: TextStyle(
      fontFamily: 'Handlee',
      fontSize: 30,
    ),
),

Voilà pour le téléchargement d'une police Google Fonts dans votre application Flutter!

Conclusion

Et voilà pour ce petit tuto ! Comme vous avez pu le voir c'est un package qui est assez facile à prendre en main alors à vous de vous amuser 🙂

Vous n'avez plus qu'à aller parcourir le site de Google Fonts pour trouver une police qui vous convient et sur le site vous pouvez même tester le rendu final en tapant directement votre texte.

Si ce n'est pas déjà fait, je vous invite à commencer le cours gratuit Flutter pour installer Flutter et le configurer sur votre ordinateur.

Si vous souhaitez créer des applications complètes avec Firebase, Google Maps et Stripe je vous invite à rejoindre le cours complet Flutter Révolution.

Et si vous souhaitez obtenir un niveau plus avancé et créer un backend complet, avec les Clouds Functions, le machine Learning ou encore les notifications, je vous invite à rejoindre la Flutter Académie.