Tuto Site
Largura e altura
% enfant = % du parent zone, jamais de l’écran. Live : ViewPreviewOnion.build calcule _zoneWidth/_zoneHeight puis autoSizeScreen (data_size.dart). Défaut unité size = %.
Zone (le max du %)
_zoneWidth = maxWidth == infinity ? P.size.mainW : maxWidth _zoneHeight = maxHeight == infinity || == -1 ? P.size.appH : maxHeight _sizeWidth = width.autoSizeScreen(_zoneWidth, enable) _sizeHeight = height.autoSizeScreen(_zoneHeight, enable, widthRatio: _sizeWidth)
| View monté | maxWidth / maxHeight |
|---|---|
| Racine flow / pop | forceWidth × hauteur page (pop) ou infinity→appH (flow pad %) |
| Enfant folder | LayoutBuilder constraints du parent (boîte après SizeGate + pad parent) |
Nested — calcul forcé
toile 1200 → folder 60% = 720 → enfant 50% = 360 (50% de 720, pas de 1200) toile 400 → folder 80% s = 320 → enfant 50% (s absent, fallback large) = 160
Si le folder a pad left+right 16 px, le LayoutBuilder enfant voit ~688 px, pas 720. Le % enfant est post-pad parent.
JSON keys / encodeur
{
"l": { "i": 60, "iT": "%", "e": 60, "eT": "%" },
"s": { "i": 80, "iT": "%" }
}
| Clé | Sens |
|---|---|
l / s | desktop / mobile |
i / e | init / enable — Size : e absent → i |
iT eT | % | px | ratio. Défaut % |
| JSON | Calcul (zone 1200) | px |
|---|---|---|
{"l":{"i":100}} | 100% défaut | 1200 |
{"l":{"i":60,"iT":"%"}} | 0.6×1200 | 720 |
{"l":{"i":210,"iT":"px"}} | 210 | 210 |
{"l":{"i":0}} | hug | 0 → null SizedBox |
{"l":{"i":-1}} | val<0 → max | 1200 |
height 1.2 ratio, width 100% | 1200/1.2 | 1000 |
height 0.7 ratio, width 210 px | 210/0.7 | ≈ 300 |
Ratio
type == "ratio" uniquement utile sur height (le renderer passe widthRatio) : hauteur_px = largeur_px / val.
"width": { "l": { "i": 100 } },
"height": { "l": { "i": 1.2, "iT": "ratio" } }
Bouton live (image-like, souvent trop haut pour un CTA texte) :
"width": { "l": { "i": 210, "iT": "px" }, "s": { "i": 135, "iT": "px" } },
"height": { "l": { "i": 0.7, "iT": "ratio" } }
Desktop 210×300. Mobile 135×193. Recette CTA lisible : height 48 px desktop / 44 px mobile (cible tap 44–56).
Hug vs fill
| Intention | JSON |
|---|---|
| Largeur pleine parent | "width":{"l":{"i":100,"iT":"%"}} |
| Hauteur hug (folder, wrap, stack racine) | "height":{"l":{"i":0}} |
| Hauteur pleine | "height":{"l":{"i":100,"iT":"%"}} ou i:-1 |
| Spacer fixe 70 px | "height":{"l":{"i":70,"iT":"px"}} |
"width": {
"l": { "i": 60, "iT": "%" },
"s": { "i": 80, "iT": "%" }
}
Enfant 50 % à l’intérieur : ne pas écrire 30%/40% « pour compenser ». Écrire 50. Le moteur compose.
T1 toile 1200, F 60%, A 50% → A = 360. T2 toile 400, F 80% s, A 50% → A = 160. T5 : ne pas copier le ratio 0.7 live (≈ 300 px) sur un bouton texte.
Piège.
height: 0 compris comme 0 px. C’est hug. id_image sans height (0) + sizeFixe height 0 → box_fit inopérant. Toujours ratio ou px sur une image.