Les widgets Column et Row dans Flutter

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.