Google Fonts dans Flutter : Définir une typographie pour vos textes

Installer le package Google Fonts

Installer le package Google Fonts

Pour utiliser Google Fonts dans Flutter, commencez par ajouter le package google_fonts à votre projet. Voici les étapes détaillées pour le faire :

1. Ajoutez la dépendance :

• Ouvrez votre fichier pubspec.yaml.
• Ajoutez la dernière version du package (actuellement ^6.2.1) sous dependencies :

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^6.2.1

2 Téléchargez les dépendances en exécutant la commande suivante pour être sûr d’avoir installé le package :

flutter pub get

3. Enfin, importer le package dans chaque fichier .dart où vous souhaitez utiliser Google Fonts en ajoutant cette ligne en haut :

import 'package:google_fonts/google_fonts.dart';

Vous êtes maintenant prêt à appliquer des polices dans votre projet Flutter avec Google Fonts Flutter !

Appliquer une police Google Fonts à vos textes

Le package Google Fonts Flutter donne accès à plus de 1 400 polices, comme Roboto, Lato, Oswald, ou Pacifico, sans avoir à les importer individuellement. Voici comment les utiliser et un aperçu des typographies disponibles.

Typographies disponibles

Vous trouverez toutes les polices sur Google Fonts. Quelques exemples populaires pour Flutter :

• Roboto : Moderne, épurée, idéale pour les interfaces sobres.
• Lato : Polyvalente, parfaite pour les textes et les titres.
• Oswald : Audacieuse, adaptée aux en-têtes percutants.
• Pacifico : Manuscrite, pour un style créatif.
• Fira Sans : Claire et lisible, idéale pour les applications techniques.

Filtrez les polices sur le site Google Fonts par style (serif, sans-serif, handwritten) ou langue pour trouver celles qui correspondent à votre projet. Maintenant, voyons les deux manières d’appliquer une typographie sur un de vos textes.

Méthode 1 : Utiliser GoogleFonts.nomDeLaPolice()

Pour appliquer une police statique, utilisez cette syntaxe :

Text(
  'Mon texte d’exemple',
  style: GoogleFonts.firaSans(),
),

Méthode 2 : Utiliser GoogleFonts.getFont()

Pour charger une police dynamiquement (par exemple, si l’utilisateur change de police via un bouton), utilisez plutôt getFont :

Text(
  'Mon texte d’exemple',
  style: GoogleFonts.getFont('firaSans'),
),

Comme expliqué, la deuxième méthode vous permet d’afficher des typographies dynamiquement, c’est-à-dire après avoir compilé votre application. Par exemple, admettons que vous aillez un bouton dans votre application qui permette de changer son style quand on clique dessus. La méthode GoogleFonts.getFont(), va vous permettre de changer les typographies même après que votre application a été compilée. 

Personnaliser les styles de vos textes, avec Google Font

Avoir une belle typo est important, mais comment donner une couleur à votre texte,  ? Changer sa taille ou l’espacement entre les lettres ? Désormais le paramètre “style” est déjà pris par la méthode GoogleFonts, donc pas question de lui appliquer TextStyle(). 

Si vous ne chargez pas vos typographies dynamiquement, la solution est d’utiliser le paramètre textStyle fournit par le package : 

Text(
  'Mon texte d’exemple',
  style: GoogleFonts.firaSans(
	textStyle: TextStyle(
color: Colors.red, 
fontSize: 15)
),
),

Et si vous chargez vos typos dynamiquement, pas de panique. La méthode .getFont() vous permet directement d’utiliser les mêmes paramètres que TextStyle() :

Text(
  'This is Google Fonts',
  style: GoogleFonts.getFont(
    'Lato',
    fontSize: 15,
    color: Colors.red,
    ),
),

Intégrer Google Fonts avec un thème

Pour appliquer une typographie à travers toute votre application, utilisez Google Fonts Flutter avec un thème. Voici comment :

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: GoogleFonts.robotoTextTheme(
          Theme.of(context).textTheme,
        ),
      ),
      home: MyHomePage(),
    );
  }
}

Et dans le cas où vous souhaitez utiliser différentes polices, faites plutôt comme cela :

ThemeData(
  textTheme: GoogleFonts.robotoTextTheme(
    Theme.of(context).textTheme,
  ).copyWith(
    headline6: GoogleFonts.oswald(
      textStyle: Theme.of(context).textTheme.headline6,
    ),
    bodyText2: GoogleFonts.lato(
      textStyle: Theme.of(context).textTheme.bodyText2,
    ),
  ),
)

Dans cet exemple, j’applique Oswald aux titres et Lato au corps, avec Roboto comme base.

Utiliser Google Fonts en étant hors ligne

Par défaut, Google Fonts Flutter télécharge les polices via des requêtes HTTP, ce qui peut ralentir votre application. Pour de meilleures performances et dans le cas où l’utilisateur serait hors ligne, le mieux est d’intégrer les polices dans vos assets. Voici les étapes à suivre :

1. Télécharger les polices :
   • Sur Google Fonts, sélectionnez une police (ex. : Lato) et cliquez sur Download Family.
   • Ne téléchargez que les variants nécessaires (ex. : Lato-Regular.ttf, Lato-Bold.ttf).
2. Organiser les fichiers :
   • Créez un dossier google_fonts dans assets (ex. : assets/google_fonts/).
   • Placez les fichiers .ttf dans ce dossier.
3. Mettre à jour pubspec.yaml :
   • Ajoutez les polices à la section assets :

flutter:
  assets:
    - assets/google_fonts/Lato-Regular.ttf
    - assets/google_fonts/Lato-Bold.ttf

Optionnel : Pour utiliser vos polices avec TextStyle, ajoutez les plutôt comme ça :

flutter:
  fonts:
    - family: Lato
      fonts:
        - asset: assets/google_fonts/Lato-Regular.ttf
        - asset: assets/google_fonts/Lato-Bold.ttf
          weight: 700

Enfin, utilisez vos polices dans votre application Flutter, de la manière suivante :

Text(
  'Mon texte d’exemple',
  style: TextStyle(
    fontFamily: 'Lato',
    fontSize: 15,
    fontWeight: FontWeight.bold,
  ),
),

Le package google_fonts pourra désormais utiliser automatiquement les polices dans assets sans avoir à faire de requêtes HTTP.