[Flutter] Ignorer la taille de la police du système

En utilisant la librarie flutter_html certains appareils avaient un problème dans la taille du texte, ce qui provoqué des overflow.
Le problème était en réalité présente partout mais cette librairie l’a mis en évidence.
Cela vient de la taille de la police du système. Certains appareils de grande taille (S20, Galaxy Note…) ont une taille de police par défaut “non standard” pour pallier à la taille de l’écran.

Solution

La solution est assez simple, il faut pouvoir définir nous même le facteur d’agrandissent de la taille du texte.
Cela peut se faire avec la propriété textScaleFactor du composant Text.

1
2
3
4
5
6
7


@override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (BuildContext context, Widget child) =>
        const Text('hello world!', textScaleFactor: 1.0),
    );
  }

Mais il est aussi possible d’appliquer une règle au niveau global en définissant cela sur le MediaQuery.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


@override
Widget build(BuildContext context) {
  return MaterialApp(
    builder: (BuildContext context, Widget child) =>
      MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
        child: child,
      )
  );
}

Attention à ne pas en abuser, en effet il faut prendre en compte que si l’utilisateur a choisi une taille de police c’est qu’il en a surement besoin pour son confort.

Voilà !