Quand et comment utiliser la propriété textAlign dans Flutter ?

Le framework Flutter est principalement conçu pour développer un front-end. On trouve dans le framework tous les outils permettant de concevoir une interface. Ils ont été adaptés au langage Dart, qui est le langage du framework. C'est le cas de la propriété "textAlign". Elle vient du langage CSS et permet de vérifier l'alignement du texte. Il faut bien comprendre comment elle fonctionne pour pouvoir l'utiliser.

La propriété "textAlign" définit l'alignement du texte dans l'espace qu'il occupe. La deuxième notion est importante car c'est souvent cet espace qui est difficile à appréhender. Si vous mettez un élément de texte dans une colonne avec un alignement de texte à gauche, cela ne fonctionnera pas. En effet, par défaut un élément de texte prend le minimum de largeur disponible. L'élément de texte va donc se placer au centre de la colonne.

//Avec ce code, l'élément de texte est au centre au lieu de la gauche
Column(
  children:  [
     new Text("Ce texte doit être à gauche", textAlign: TextAlign.left,)
  ]
)

Pour que l'alignement de texte soit pris en compte, vous devez faire en sorte que l'élément de texte occupe toute la largeur de la colonne. Pour réaliser ceci, vous pouvez ajouter la propriété "crossAxisAlignment" avec la valeur "CrossAxisAlignment.stretch" à la colonne. Une autre solution est d'utiliser un container intermédiaire de la classe "SizedBox" et de définir sa largeur à l'infini, pour qu'il prenne toute la largeur disponible.

//Avec la propriété "crossAxisAlignment"
Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children:  [
     new Text("Ce texte doit être à gauche", textAlign: TextAlign.left,)
  ]
)
//Avec une sizedBox
Column(
  children: [
    SizedBox(
      width: double.infinity,
      child: Container(
          child: Text("Ce texte doit être à gauche", textAlign: TextAlign.left,),
      ),
    ),
  ],
),

Si vous ne souhaitez pas que le texte prenne toute la largeur, alors vous ne devez pas utiliser la propriété "textAlign". Vous devez encapsuler votre élément de texte dans un objet de la classe "Align". La propriété "Alignment" vous permet alors de contrôler l'alignement du texte dans la colonne.

Column(
  children: [
    Align(
      alignment: Alignment.centerLeft,
      child: Container(
        child: Text("Ce texte doit être à gauche",),
      ),
    ),
  ],
)

Android