Installer le package auto size text
La première chose à faire pour utiliser un package Flutter est de l’exporter. Deux options s’offrent donc à vous pour télécharger le package auto_size_text dans sa dernière version (3.0.0) :
- Utiliser le terminal de commande dans Visual Studio et entrer la commande : $ flutter pub add auto_size_text ;
- Placer la dépendance auto_size_text: ^3.0.0 dans votre dossier pubspec.yaml.
Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:auto_size_text/auto_size_text.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser.
Utiliser auto size text
Une fois installé, le package auto size text va vous permettre d’utiliser des widgets de type AutoSizeText(). Celui-ci se comporte d’une manière assez similaire au widget Text() classique, prend du texte comme paramètre, vous permet d’ajouter du style avec Textstyle(), etc, avec toutefois de nouveaux paramètres qui lui sont propres :
- maxLines, qui permet de définir le nombre de lignes maximum sur lesquelles votre texte peut s’afficher ;
- MinFontSize, qui comme son nom l’indique défini la taille minimum de votre texte ;
- MaxFontSize, qui au contraire défini la taille maximum.
Voici un exemple simple pour comprendre comment le package fonctionne :
AutoSizeText(
'Mon AutoSizedText',
style: TextStyle(fontSize: 25),
minFontSize: 18,
MaxFontSize: 30
maxLines: 2,
overflow: TextOverflow.ellipsis,
)Ici, mon widget Text va être construit avec la fontSize définie dans le paramètre style, donc 25. Le package va alors calculer s’il reste de l’espace, ou au contraire si mon texte dépasse de son container et réadapter le texte jusqu’à ce que celui-ci occupe de manière optimal l’espace.
Pour aller plus loin
En plus de minFontSize et MaxFontSize, le widget AutoSizeText() dispose d’autres paramètres et fonctionnalitées vous permettant de manipuler la taille et l’affichage de vos textes.
Créer un groupe de textes
Le package AutoSizedText() vous permet de synchroniser la taille de plusieurs textes, pour que chacun utilise au mieux l’espace qui lui est attribué. Pour cela, vous allez devoir créer une variable de type AutoSizeGroup() que vous allez ensuite attribuer à chaque texte que vous souhaitez synchroniser. Par exemple :
var myGroup = AutoSizeGroup();
AutoSizeText(
'Mon premier texte à synchroniser',
group: myGroup,
);
AutoSizeText(
'Mon deuxième texte à synchroniser',
group: myGroup,
);
AutoSizeText(
'Mon troisième texte à synchroniser',
group: myGroup,
);Ici, mon texte qui a la plus petite police va d’abord être affiché en priorité, puis les autres textes vont s’adapter à celui-ci et adopter la même taille.
Diminuer graduellement la taille du texte
Le paramètre stepGranularity vous permet de diminuer la taille de votre texte, selon la valeur de votre choix, plutôt que par la valeur par défaut. Par exemple, vous pouvez lui dire de rétrécir directement de 10 dès que le texte dépasse de son container, plutôt que par 1 :
AutoSizeText(
'Mon texte à adapter',
style: TextStyle(fontSize: 30),
minFontSize: 15,
stepGranularity: 5,
maxLines: 3,
)Prédéfinir plusieurs tailles d’écriture
Si vous préférez directement définir plusieurs tailles d’écriture, cela est possible grâce au paramètre presetFontSizes. Celui-ci vous permet de générer une liste contenant vos différentes tailles d’écriture et commencera par la plus grande, pour ensuite passer à la deuxième si le texte est trop grand :
AutoSizeText(
'Mon texte à adapter',
presetFontSizes: [30, 18, 12],
maxLines: 2,
)Afficher un autre message si le texte sort de son container
Dans le cas où votre texte serait trop grand pour son container, le package auto size text, vous permet d’afficher un autre message, contenu dans le paramètre overflowReplacement. Par exemple :
AutoSizeText(
'Un message très long qui demande beaucoup trop de place pour être affiché',
maxLines: 1,
overflowReplacement: Text('Message trop long'),
)Si mon texte est trop long et ne peut pas être contenu dans le widget parent, c’est le message “Message trop long” qui va être affiché à la place.
