Le widget Text – manipuler du texte dans Flutter

Le widget Text permet d’afficher du texte dans l’interface utilisateur d’une application mobile. En fait, le texte est une partie importante de toute application mobile, il est donc essentiel de s’assurer qu’il est bien placé et facile à lire.

La structure du widget Text

Le widget Text est divisé en deux propriétés, à savoir : String qui est une donnée et sera ensuite affiché à l’écran, puis la deuxième propriété est un argument sous forme d’objet qui sert à manipuler l’apparence comme la couleur, la taille, la position, etc.

Cependant, les arguments du widget Text sont facultatifs. Voici le constructeur de la Classe Text.

Text(
    String data, 
    {
        Key key, 
        TextStyle style, 
        StrutStyle strutStyle, 
        TextAlign textAlign, 
        TextDirection textDirection, 
        Locale locale, 
        bool softWrap, 
        TextOverflow overflow, 
        double textScaleFactor, 
        int maxLines, 
        String semanticsLabel, 
        TextWidthBasis textWidthBasis, 
        TextHeightBehavior textHeightBehavior
    }
);

Donc, dans notre constructeur, le widget Text, prend une chaîne de caractère comme paramètre obligatoire et les propriétés du texte comme paramètres facultatifs. De plus, vous avez certainement remarqué que chaque paramètre est précédé du type de classe dont il fait partie.

Le widget Text – TextStyle

Le widgetTextStyle sert à manipuler le type de police, la taille, la couleur et autres. Voici comment utiliser TextStyle.

Rappelez-vous de la syntaxe des widgets :

argument : widget()

Lorsque vous mettez le curseur au dessus d’un widget, des informations vont apparaître.

Sachez également que dans votre IDE, vous pouvez utiliser l’icone sous forme d’ampoule jaune pour choisir parmi les suggestions.

Utilisez le constructeur pour trouver la propriété que vous voulez utiliser. Dans notre cas, nous utiliserons la propriété style qui a comme type un widget TextStyle. Donc, à l’intérieur du widget Text, nous ajouterons une propriété style, suivi de deux point, puis le nom du widget qui est TextStyle. Mettez le curseur à l’intérieur des parenthèses, cliquez Ctrl+Espace pour voir les propriétés du widget TextStyle. Tapez font (une propriété devrait commencer avec une lettre miniscule) pour voir les suggestion liées à la police, choisissez la propriété fontWeight. À présent, nous avons besoin de trouver le widget, il commence par une lettre majuscule. Tapez F et choisissez FontWeight. Voici donc la méthode que vous devrait utiliser pour trouver une propriété ou un widget.

Voici un exemple de texte en gras.

Utilisation de la propriété Bold .

import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              centerTitle: true,
              title: Text('Le widget Text'),
            ),
            body: Center(
              child: Text("Un texte centré et en gras", style: TextStyle(fontWeight: FontWeight.bold)),
            )));
  }
}

Un exemple d’utilisation du widget Text avec la propriété fontSize . Recherchez la propriété fontSize à l’intérieur de TextStyle. Mettez le cursseur au dessus de fontSize, vous remarquerez que la valeur acceptée est de type double, qui est un nombre à virgule.

child: Text(
              'Un texte de 20 pixels',
              style: TextStyle(fontSize: 20),
)

Maintenant, essayez tout seule de donner une couleur à votre texte. Utilisez la propriété color et le widget Colors.

child: Text(
              'Un texte bleu',
              style: TextStyle(color: Colors.blue),
)

Le widget FontStyle

Par défaut, le type de police utilisé sur IOS est SF UI Text ou San Francisco et sur Android, c’est Roboto. Pour utiliser un autre type de police, nous devons d’abord l’installer. Par exemple, nous installerons la police DancingScript :

1. Télécharger la police : https://fonts.google.com/specimen/Dancing+Script.
2. Extraire puis enregistrer dans le projet flutter ./assets/fonts.
3. Ouvrez le fichier pubspec.yaml et ajoutez le code du chemin de la police sous flutter : afin qu’il devienne comme ceci :

# The following section is specific to Flutter. flutter:   fonts:     - family: DancingScript       fonts:       - asset: assets/fonts/DancingScript-Regular.ttf

Ensuite, dans le widget de texte, nous n’avons qu’à appeler la propriété fontFamily sur l’argument TextStyle pour ressembler à ceci :

Text(
          'Changement de la police du texte',
          style: TextStyle(
            fontSize: 40,
            fontFamily: 'DancingScript'
          ),
        )

TextAlign

L’alignement du texte se fait horizontalement à l’intérieur des limites du widget parent. Dans l’exemple ci-dessous, nous utiliserons le widget Container comme parent. Si vous l’enlevez, vous n’aurez aucun changement.

Les options de TextAlign dans la classe Text de Flutter sont les mêmes que dans d’autres langages, à savoir :

• TextAlign.left
• TextAlign.center
• TextAlign.right
• TextAlign.justify
• TextAlign.start
• TextAlign.end

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      
        home: Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('Le widget Text'),
      ),
      body: Container(
    width: 300.0,
    height: 200.0,
    color: Colors.cyan,
    child: Text("texte", textAlign: TextAlign.center, style: TextStyle(fontSize: 40))
    )));
  }
}

textDirection

Permet de spécifier la direction du texte à l’intérieur d’un widget Text. Par exemple ltr (left to right – de gauche à droite) ou rtl (de droite à gauche). L’option ltr est la direction du texte par défaut.