Guide complet Flutter : Le widget Row

Pierre Courtois

20 octobre 2024

Pouvoir disposer plusieurs widgets sur une même ligne, fait partie des notions les plus basiques à maîtriser lorsqu’on code avec Flutter. Dans ce guide, je vous apprends à utiliser un widget de base nommé Row(), qui va vous permettre de réaliser cela.

Comment mettre plusieurs widgets sur une même ligne, grâce à Row() ?

Le widget Row() est un widget de base qui, vous permet de très facilement aligner plusieurs widgets sur un axe horizontal (de gauche à droite). Celui-ci possède une propriété children (enfants), dans laquelle vous allez pouvoir placer plusieurs éléments visuels qui vont se coller les uns aux autres sur une même ligne. Par exemple, voici un exemple tout simple de widget Row, contenant 3 widgets :

const Column(
  children: <Widget>[
    Text('Text 1'),
    Text('Text 2'),
    Text('Text 3'),
  ],
)

Pourquoi mettre ma ligne dans un Container ?

Le widget Row ne dispose pas des propriétés de tailles ou de marges et prendra par défaut la taille de son parent. Je vous conseille donc de toujours placer vos lignes dans un Container pour pouvoir leur donner la taille que vous souhaitez. Cela vous évitera aussi qu’elles prennent une place infinie et fassent crasher votre app.

Lire le guide sur le widget Column

Je vous explique ici comment utiliser le widget Column, qui, utilisé avec Row(), vous permet de construire le design de votre application

Placer les widgets à gauche, au centre ou à droite d’une ligne

Pour placer les éléments d’une ligne à gauche, au centre ou à droite de celle-ci, vous pouvez utiliser la propriété mainAxisAlignment. Utilisez ensuite les méthodes suivantes pour placer les éléments :

À gauche : mainAxisAlignment.start ;
Au centre : mainAxisAlignment.center ;
À droite : mainAxisAlignment.end.

Voici un exemple de ligne ou les éléments sont alignés à gauche :

const Column(
  mainAxisAlignment: mainAxisAlignment.start,
  children: <Widget>[
    Text('Text 1'),
    Text('Text 2'),
    Text('Text 3'),
  ],
)

Si les éléments disposés sur la ligne sont plus larges que le widget Row lui-même, cette propriété risque de ne pas s’appliquer.

Flutter vous permet aussi d’espacer de manière égale vos widgets grâce à la méthode MainAxisAlignment.spaceEvenly. Vos widgets vont alors prendre le même espace et utilisant toute la largeur mise à disposition.

La méthode MainAxisAlignment.spaceAround est légèrement différente puisqu’elle va créer un espace égal entre chaque widget, mais ajouter la moitié de cet espace à gauche du premier widget et à droite du dernier. Toute la largeur de la ligne n’est donc pas complètement utilisée.

Placer des widgets en haut, au centre ou en bas d’une ligne

Pour placer vos widgets en haut, au centre ou en bas d’une ligne, vous pouvez utiliser la propriété CrossAxisAlignment. Utilisez ensuite les méthodes suivantes pour les placer :

En haut : CrossAxisAlignment.start ;
Au centre : CrossAxisAlignment.center ;
En bas : CrossAxisAlignment.end.

Voici un exemple de ligne ou les widgets sont alignés au centre, selon l’axe vertical :

const Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('Text 1'),
    Text('Text 2'),
    Text('Text 3'),
  ],
)

Si les éléments disposés dans la ligne sont plus haut que la ligne elle-même, cette propriété risque de ne pas s’appliquer.

Flutter met aussi à disposition les méthodes :

CrossAxisAlignment.stretch : Étire les enfants sur l’ensemble de l’axe horizontal. Cela signifie que les widgets, placés dans la ligne, prendront tout l’espace disponible selon l’axe horizontal.
CrossAxisAlignment.baseline : Cette option permet d’aligner les enfants en fonction de la ligne de base de leurs caractères. Elle est toutefois spécifique à la classe Text et nécessite que la propriété textBaseline soit définie sur TextBaseline.alphabetic, sans quoi un message d’erreur va apparaitre.

Demander à un widget de prendre tout l’espace disponible sur une ligne

Imaginons que vous souhaitez placer plusieurs widgets sur une ligne, deux avec une taille fixe et un autre qui doit prendre l’espace qui reste. Le widget Expanded() vous permet de générer ce comportement.

Lors de la compilation, la taille de la ligne va d’abord être calculée, puis celle des deux premiers éléments qu’elle contient. Enfin, Flutter va calculer l’espace disponible restant et créer le dernier widget selon celui-ci. Voici un exemple :

Container(
	heigth : 80, 
	width : 120
	child: Column(
  children: <Widget>[
    Container(
	height: 30, 
	color : Colors.red, 
	), 
    Container(
	height: 30, 
	color : Colors.purple, 
	), 
    Expanded(
      child:     Container(
	color : Colors.green, 
	), 
      ),
    ),
  ],
),
)

Ici, ma ligne a une taille de 120 pixels et mes deux premiers containers, une taille de 30 px. Mon dernier container va ainsi prendre l’espace disponible restant qui est de 60 pixels.