Layouts et mise en page

À la leçon précédente, une phrase est restée en suspens : demander une taille n'est pas l'obtenir. C'est le sujet de celle-ci, et c'est le seul concept du framework qui mérite qu'on s'arrête vraiment. Un développeur qui a compris les contraintes de Flutter ne rencontre plus de rayures jaunes ni d'exceptions de mise en page ; celui qui ne les a pas comprises passe son temps à ajouter des Expanded au hasard jusqu'à ce que l'écran cesse de se plaindre.

La difficulté vient d'une habitude importée du web. En CSS, un élément a une taille propre et le navigateur arbitre ensuite. En Flutter, c'est l'inverse : le parent impose des contraintes, l'enfant choisit sa taille à l'intérieur de ces contraintes, et le parent décide où le placer. Trois phrases, énoncées ainsi dans la documentation officielle, et dont découlent absolument tous les comportements de mise en page, y compris ceux qui paraissent absurdes.

Nous allons parcourir ce modèle, puis les widgets qui l'exploitent : Row, Column, Expanded, Flexible, Stack. Nous provoquerons volontairement le débordement horizontal — l'erreur de mise en page la plus courante de tout Flutter — et nous verrons ensuite comment produire un écran qui tient sur un téléphone de 360 pixels de large comme sur une tablette.