Mise en page : Row, Column, Padding, Expanded, SizedBox

Organisez plusieurs widgets à l'écran grâce aux colonnes, aux lignes, aux espacements et à la répartition de l'espace.

9 min · 3 questions

Un écran réel affiche rarement un seul widget : il faut les organiser. C'est le rôle des widgets de mise en page. Column empile ses enfants verticalement, du haut vers le bas ; Row les aligne horizontalement, de gauche à droite. Comme ils acceptent plusieurs enfants, le paramètre ne s'appelle plus child mais children, et il reçoit une liste : des widgets entre crochets [ ], séparés par des virgules.

import 'package:flutter/material.dart';

Widget buildProfile() {
  return const Column(
    children: [
      Icon(Icons.person, size: 48),
      Text("Sonia Ben Ali"),
      Text("Développeuse Flutter"),
    ],
  );
}

Row fonctionne exactement de la même façon, mais à l'horizontale. Son axe principal est la largeur : le paramètre mainAxisAlignment choisit comment répartir les enfants le long de cet axe (center pour les regrouper au milieu, spaceBetween pour les écarter au maximum...). Et pour glisser un simple espace vide entre deux widgets, utilisez SizedBox : une boîte invisible dont vous fixez la largeur (width) ou la hauteur (height).

import 'package:flutter/material.dart';

Widget buildRating() {
  return const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.star, color: Colors.amber),
      SizedBox(width: 8),
      Text("4,8 sur 5"),
    ],
  );
}

Padding (rembourrage) ajoute de l'espace autour de son enfant, pour que le contenu ne colle pas aux bords. La quantité d'espace se décrit avec EdgeInsets : EdgeInsets.all(16) met 16 pixels des quatre côtés, EdgeInsets.only(left: 8) seulement à gauche, et EdgeInsets.symmetric(horizontal: 12) à gauche et à droite en même temps.

import 'package:flutter/material.dart';

Widget buildQuote() {
  return const Padding(
    padding: EdgeInsets.all(16),
    child: Text("Un texte qui a de l'air autour de lui"),
  );
}

Dernier outil : Expanded. Placé parmi les enfants d'une Row ou d'une Column, il demande à son enfant d'occuper toute la place restante. Dans l'exemple ci-dessous, la boîte grise garde ses 80 pixels de large, et la boîte turquoise s'étire pour remplir tout le reste de la largeur, quelle que soit la taille de l'écran.

import 'package:flutter/material.dart';

Widget buildProgress() {
  return Row(
    children: [
      Container(width: 80, height: 40, color: Colors.grey),
      Expanded(
        child: Container(height: 40, color: Colors.teal),
      ),
    ],
  );
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Dans quel sens une Column organise-t-elle ses enfants ?
   • Horizontalement, de gauche à droite
   • Verticalement, du haut vers le bas
   • En cercle, autour du centre de l'écran
2. À quoi sert le widget Expanded ?
   • À faire occuper à son enfant toute la place restante dans une Row ou une Column
   • À agrandir la police de tous les textes de l'écran
   • À zoomer sur une image quand on la touche
3. Comment insérer un espace vide de 8 pixels entre deux widgets d'une Row ?
   • Avec un SizedBox(width: 8) placé entre les deux
   • En appuyant huit fois sur la barre d'espace
   • Avec un Expanded(width: 8)