3
Tables
Row/Column MainAxis · WrapAlignment · wrap_text TextAlign.
axis_align 3 n’est pas universel
Tuto Site
Alineación
Un même entier JSON, trois tables. Les 4 champs sont sur le folder (ou le id_text / segment). Encodeur ViewDataInt {"l":{"i":N}}, lu en auto(false) (état init). Live : pageFolder + wrap_text.dart + segment.dart.
Défauts si {} / null : axis_size → 0 (min) · axis_align → 2 (center) · cross_align → 2 (center) · direction_align → 5 (center).
2
Défaut center
Une column sans JSON d’align est centrée, pas start.
poser i: 0 pour un article
5≠4
Centers
Stack direction_align 5 = center. Gradient align_start 4 = center.
ne pas mélanger
Quel getter selon le type
typeAuto | Widget | axis_align | direction_align |
|---|---|---|---|
id_page_row / column | Row / Column | getAxisAlign → MainAxisAlignment | ignoré |
id_page_wrap / animated / menu | Wrap | getAxisAlignWrap | ignoré |
id_page_stack | Stack(alignment:) | ignoré | getDirectionAlign |
id_wrap_text | Text.rich(textAlign:) | getAxisAlignWrapText (table texte) | ignoré |
id_text Segment | Wrap interne image+titre | getAxisAlignWrap | ignoré |
Table 1 — Row / Column getAxisAlign
Axe principal : Row = horizontal, Column = vertical. Défaut 2 center.
| i | Éditeur | Flutter | Prod Row | Prod Column |
|---|---|---|---|---|
| 0 | start | start | gauche | haut |
| 1 | end | end | droite | bas |
| 2 | center | center | milieu H | milieu V |
| 3 | spaceBetween | spaceBetween | premier/dernier aux bords | idem V |
| 4 | spaceAround | spaceAround | demi-espace bords | idem |
| 5 | spaceEvenly | spaceEvenly | espaces égaux | idem |
axis_size 0 min · 1 max. Sans max, spaceBetween n’a pas d’espace à répartir.
"axis_size": { "l": { "i": 1 } },
"axis_align": { "l": { "i": 3 } }
Table 2 — Wrap getAxisAlignWrap
Même 0–5 → WrapAlignment.* (start, end, center, spaceBetween, spaceAround, spaceEvenly). Axe = lignes du wrap (horizontal). id_text Segment : le Wrap interne aligne image + bloc titre, pas le textAlign du paragraphe.
cross_align Wrap : 0 start · 1 end · 2 center · 3 et 4 retombent center (pas de stretch/baseline Wrap).
Table 3 — wrap_text getAxisAlignWrapText
Text.rich(textAlign:) dans wrap_text.dart. Aligne la phrase entière dans la largeur du folder.
| i | Row / Wrap | wrap_text TextAlign | Prod phrase |
|---|---|---|---|
| 0 | start | start | début de ligne (LTR = gauche) |
| 1 | end | end | fin de ligne |
| 2 | center | center | centré (défaut) |
| 3 | spaceBetween | left | gauche physique (ignore RTL) |
| 4 | spaceAround | right | droite physique |
| 5 | spaceEvenly | justify | justifié (espaces étirés) |
Piège.
axis_align: 3 sur wrap_text n’est pas spaceBetween — c’est TextAlign.left. style_title.align des spans n’aligne pas le Text.rich.Centrer Du terrain à la facture : sur le folder id_wrap_text :
{
"type": "94ba3c60-6c02-4ecb-8e3d-77a8f7516e91",
"axis_align": { "l": { "i": 2 } }
}
cross_align Row / Column — défaut 2 center
| i | Éditeur | Prod Row | Prod Column |
|---|---|---|---|
| 0 | start | haut | gauche |
| 1 | end | bas | droite |
| 2 | center | milieu V | milieu H |
| 3 | stretch | enfants étirés en hauteur | étirés en largeur |
| 4 | baseline | baselines texte (Row) | rarement utile |
direction_align — Stack only — défaut 5 center
Place les enfants sans pos. Un enfant avec pos ignore cet alignment.
| i | Éditeur | AlignmentDirectional | Prod (LTR) |
|---|---|---|---|
| 0 | topStart | topStart | haut-gauche |
| 1 | topEnd | topEnd | haut-droite |
| 2 | topCenter | topCenter | haut-centre |
| 3 | centerStart | centerStart | milieu-gauche |
| 4 | centerEnd | centerEnd | milieu-droite |
| 5 | center | center | centre |
| 6 | bottomStart | bottomStart | bas-gauche |
| 7 | bottomEnd | bottomEnd | bas-droite |
| 8 | bottomCenter | bottomCenter | bas-centre |
≠ table gradient
align_start (là 4 = center). ≠ wrap_text (axis_align). Stack défaut 5, pas 2, pas 4.StyleTextContent.align (autre encodeur)
| i | Éditeur style | TextAlign |
|---|---|---|
| 0 | gauche | left |
| 1 | droite | right |
| 2 | centre | center |
| 3 | étirée | justify |
| 4 | début | start |
| 5 | fin | end |
Consommateurs : id_text_animated, titres agenda. Pas id_wrap_text. Pas Row/Column. Glyphes d’un id_text : style_title.align, pas axis_align du text (ça wrap image+titre).
Recettes
Column titres à gauche, pleine largeur :
{
"type": "aee08b10-4e50-11ee-be56-0242ac120002",
"axis_size": { "l": { "i": 0 } },
"axis_align": { "l": { "i": 0 } },
"cross_align": { "l": { "i": 0 } }
}
Wrap cards centrées :
"axis_align": { "l": { "i": 2 } },
"cross_align": { "l": { "i": 2 } }
Phrase wrap_text justifiée : "axis_align": { "l": { "i": 5 } }. Desktop center / mobile start :
"axis_align": { "l": { "i": 2 }, "s": { "i": 0 } }