Flutter : comment justifier un texte en fonction de sa taille dans un container ?

Lorsqu'une application est créée avec le framework Flutter, elle est organisée en widgets. Un widget représente un élément de l'interface. Cela peut être une colonne, un tableau ou un bouton, entre autres. Un widget peut contenir d'autres widgets, et c'est avec cette architecture que l'on peut créer l'interface. Pour gérer l'alignement de votre texte quand il est long, il existe des types de widgets et des astuces.

Le widget de la classe "Flexible", comme son nom y fait référence, utilise les propriétés d'affichage "Flex" que l'on retrouve notamment dans le langage CSS. Ces propriétés permettent de contrôler plus facilement l'alignement des blocs avec un système de lignes et de colonnes. Ce widget doit être obligatoirement placé comme enfant d'une ligne ou d'une colonne. Le texte sera automatiquement coupé avec un renvoi à la ligne pour correspondre à la largeur du container.

new Container(
       child: Row(
         children: <Widget>[
            Flexible(
               child: new Text("Voici mon long texte qu'il faut afficher."))
                ],
        ));

Un autre widget peut également permettre d'aligner votre texte. Il s'agit du widget de la classe "Expandable". Ce widget occupe tout l'espace disponible dans son container. Il permet également de ne pas dépasser la largeur du container. Dans le cas d'un texte, il sera aligné automatiquement.

Expanded(
    child: new Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
        new Text(_name, style: Theme.of(context).textTheme.subhead),
        new Container(
            margin: const EdgeInsets.only(top: 5.0),
             child: new Text(Voici mon long texte qu'il faut afficher.),
        ),
    ],
),

Une autre solution, si vous ne souhaitez pas utiliser ces widgets, consiste à ajouter une contrainte de largeur à votre container. En ajoutant un padding et en indiquant 2 textes, votre premier long et un deuxième plus court, le deuxième sera affiché si le premier est trop long par rapport au container.

 //80% de la largeur de l'écran
double largeur_container = MediaQuery.of(context).size.width*0.8;

return new Container (
  padding: const EdgeInsets.all(16.0),
  width: largeur_container,
  child: new Column (
    children: <Widget>[
        new Text ("Voici mon long texte qu'il faut afficher.", textAlign: TextAlign.left),
        new Text ("Deuxième texte court", textAlign: TextAlign.left),
     ],
   ),
);