Les widgets Column et Row servent à définir la disposition des autres widgets dans une application Flutter
. Si vous avez déjà utilisé Excel ou créé un tableau, alors c’est le concept des lignes et des colonnes dans Flutter.
Le widget Row
est un widget utilisé pour positionner horizontalement d’autres widgets. Alors que le widget Column
permet de placer des widgets verticalement.
Les widgets Column et Row dans Flutter sont des widgets à multiples enfants ou qui peuvent prendre plusieurs widgets enfants.
Voici à quoi ressemble les widgets Column
et Row
:

L’exemple de gauche est un affichage d’écran à une seule ligne qui a 5 widgets Column
ou 5 colonnes. Tandis que l’image de droite est un affichage d’une seule colonne qui a 4 widgets Row
ou 4 lignes.
Utilisation des widgets Column et Row
Le widget Row
place les widgets enfants horizontalement, mais ce widget ne défile pas . Ainsi, s’il dépasse la taille de l’écran, une erreur de débordement apparaîtra. Si vous souhaitez créer une disposition horizontale défilante, utilisez ListView
.
Ce qui suit est un exemple de code pour utiliser le widget Row
.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Le widget Row"),
),
body: Row(
children: [
Container(
color: Colors.greenAccent,
child: FlutterLogo(
size: 80.0,
),
),
Container(
color: Colors.orangeAccent,
child: FlutterLogo(
size: 80.0,
),
),
Container(
color: Colors.purpleAccent,
child: FlutterLogo(
size: 80.0,
),
),
],
),
));
}
}

Dans l’exemple ci-dessus, nous avons une ligne avec 3 conteneurs (Le widget Container) où chaque conteneur affichera une couleur d’arrière-plan différente avec le logo de Flutter.
Maintenant, nous allons remplacer le widget Row
par le widget Column
.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Le widget Column"),
),
body: Column(
children: [
Container(
color: Colors.greenAccent,
child: FlutterLogo(
size: 80.0,
),
),
Container(
color: Colors.orangeAccent,
child: FlutterLogo(
size: 80.0,
),
),
Container(
color: Colors.purpleAccent,
child: FlutterLogo(
size: 80.0,
),
),
],
),
));
}
}

mainAxisAlignment
La propriété mainAxisAlignment
sert à ajuster la position des widgets Column
et Row
. Ajoutez le code ci-dessous aux exemples précédents.

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
...

Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
...

En fait, voici les options principales de MainAxisAlignment
.
MainAxisAlignment.center
: Positionnement du widget au centre de l’écran.MainAxisAlignment.start
: le positionnement du widget suit la position du premier widget.MainAxisAlignment.end
: le positionnement du widget suit la position du dernier widget.MainAxisAlignment.spaceEvenly
: donner la distance entre chaque enfant uniformément dans l’espace disponible.MainAxisAlignment.spaceAround
: espacer les widgets uniformément mais ne donner que la moitié de la distance au début et à la fin du widget.MainAxisAlignment.spaceBetween
: crée le même espacement entre les widgets enfants.
CrossAxisAlignment
Pour une ligne, l’axe croisé est de haut en bas, ce qui est vertical et pour la colonne c’est de gauche à droite, ce qui est horizontale. En fait, l’axe principal d’une ligne est égal à l’axe croisé d’une colonne et vice versa.