Site tutorial

Alignment

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).

Tables

Row/Column MainAxis · WrapAlignment · wrap_text TextAlign.

axis_align 3 n’est pas universel

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 } }

Alignment

Tables

Défaut center

Centers

Quel getter selon le type

Table 1 — Row / Column getAxisAlign

Table 2 — Wrap getAxisAlignWrap

Table 3 — wrap_text getAxisAlignWrapText

cross_align Row / Column — défaut 2 center

direction_align — Stack only — défaut 5 center

StyleTextContent.align (autre encodeur)