Guide complet Flutter : Le widget Column

Comment créer une colonne dans Flutter ?

La Column() est un widget de base de Flutter, vous permettant d’empiler plusieurs widgets sur un axe vertical (de haut en bas). Celui-ci possède une propriété children (enfants), dans laquelle vous allez pouvoir placer plusieurs éléments visuels qui vont se disposer du bas vers le haut. Par exemple, voici un exemple tout simple de widget Column, contenant 3 widgets :

const Column(
  children: <Widget>[
    Text('Mon premier texte'),
    Text('Mon deuxième texte'),
    Expanded(
      child: FittedBox(
        child: FlutterLogo(),
      ),
    ),
  ],
)

Pourquoi mettre ma colonne dans un Container ?

Le widget Column 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 colonnes 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.

Placer les éléments de ma colonne à gauche, au centre ou à droite

Pour placer les éléments d’une colonne selon l’axe vertical, vous pouvez utiliser la propriété crossAxisAlignment. Utilisez ensuite les méthodes suivantes pour placer les éléments :

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

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

const Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text('Mon premier texte'),
    Text('Mon deuxième texte'),
    Expanded(
      child: FittedBox(
        child: FlutterLogo(),
      ),
    ),
  ],
)

Si les éléments disposés dans la colonne sont plus larges que la colonne 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 transversal. Cela signifie que les widgets placés dans la colonne, prendront tout l’espace disponible selon l’axe vertical.
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.

Placer les éléments de ma colonne en haut, au centre ou en bas

Pour placer les éléments d’une colonne selon l’axe horizontal, vous pouvez utiliser la propriété mainAxisAlignment. Utilisez ensuite les méthodes suivantes pour placer les éléments :

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

Voici un exemple de colonne ou les éléments sont alignés au centre, selon l’axe horizontal :

const Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('Mon premier texte'),
    Text('Mon deuxième texte'),
    Expanded(
      child: FittedBox(
        child: FlutterLogo(),
      ),
    ),
  ],
)

Si les éléments disposés dans la colonne sont plus grands que la colonne elle-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 hauteur 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 en haut du premier widget et en bas du dernier. Toute la hauteur de la colonne n’est donc pas complètement utilisée.

Demander à un widget de prendre tout l’espace disponible dans une colonne

Imaginons que vous avez placé plusieurs éléments dans une colonne, deux avec une taille fixe et un autre qui doit prendre l’espace qui reste. Le widget Expanded() vous permet de créer ce comportement.

Lors de la compilation, la taille de la colonne 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: 20, 
	color : Colors.red, 
	), 
    Container(
	height: 20, 
	color : Colors.purple, 
	), 
    Expanded(
      child: Container(
	color : Colors.green, 
	), 
      ),
    ),
  ],
),
)

Ici, ma colonne a une taille de 80 pixels et mes deux premiers containers, une taille de 20 px. Mon dernier container va ainsi prendre l’espace disponible restant qui est de 40 pixels.

Conclusion

Maintenant que vous savez disposer des éléments, pourquoi ne pas commencer à ajouter du contenu à votre application ? Dans les articles suivants, je vous apprends à ajouter du texte, des images, des icons et surtout, des boutons pour réaliser des actions :

Guide complet Flutter : Le widget Text →

Guide complet Flutter : Le widget Icon →

Guide complet Flutter : Le widget Image →

Guide complet Flutter : Le widget ElevatedButton →