Site-tutorial

Wrap text

Folder id_wrap_text 94ba3c60-6c02-4ecb-8e3d-77a8f7516e91 (selectable : ab557b25-c8ff-417a-b93b-51e355bdd7d4). Enfants id_text = TextSpan collés dans une phrase. Pas des boxes, pas d’onion par mot. Live : lib/site/widget/view/folder/text/wrap_text.dart. Mount : pageFolder → WrapText(listChild: folderView()).

Terrain réel (data_api_big_page.json) : Du terrain à la facture, sans rupture.

Ce n’est pas un Wrap de boxes

for content in folderView()  // déjà filtré locale/theme/platform/loc_text/enable
  si title.getText() non vide
    si uuid_gradient → WidgetSpan + ShaderMask (surbrillance)
    sinon TextSpan(title, style_title)
  si subtitle.getText() non vide
    TextSpan underline + tap → urlLaunchNew(path)

pad / pos / width des enfants n’agissent pas (pas d’onion).
style_title + uuid_gradient de chaque mot = look.
title = le fragment, espaces inclus ("Du ", " à la ").
odr = ordre des mots dans cette phrase.

Le folder wrap_text a width 100%, height 0.

Alignement de la phrase = `axis_align` du folder

`axis_align.i`	TextAlign	Prod
0	start	gauche LTR
1	end	droite LTR
2 défaut	center	centré
3	left	gauche physique — pas spaceBetween
4	right	droite physique
5	justify	justifié

"axis_align": { "l": { "i": 2 }, "s": { "i": 0 } }

Desktop centré, mobile start. style_title.align des spans n’aligne pas le Text.rich.

Exemple live — slots odr 6–12

Folder racine :

{
  "uuid": "019f1ad8-04ca-7e2d-aed0-f7c4396707dd",
  "uuid_page": "019f1ad6-7237-741c-8c0b-6702771f0501",
  "uuid_folder": "",
  "type": "94ba3c60-6c02-4ecb-8e3d-77a8f7516e91",
  "width": { "l": { "i": 100 } },
  "height": { "l": { "i": 0 } },
  "enable": 1, "desktop": 1, "mobile": 1,
  "locale": [], "loc_text": "", "theme": [], "platform": []
}

Enfants uuid_folder = uuid du wrap_text, type = id_text :

odr	fr	en	de	Highlight
6	`"Du "`	`"From the "`	`"Vom "`	non
7	terrain	field	Gelände	`uuid_gradient` cyan-mauve
8	`" à la "`	`" to the "`	`" zur "`	non
9	facture	invoice	Rechnung	même gradient
10	`", sans "`	`", without "`	`", ohne "`	non
11	rupture	breaks	Trennung	même gradient
12	`"."`	`"."`		non

fr : Du terrain à la facture, sans rupture.
en : From the field to the invoice, without breaks.
de : Vom Gelände zur Rechnung, ohne Trennung.

Même odr : l’ordre syntaxique coïncide. Chaque slot a son TextLocale. On ne traduit pas la phrase entière d’un bloc qui inverserait les mots.

Mot en surbrillance (odr 7 live) :

{
  "type": "8d669b32-e168-11ed-b5ea-0242ac120002",
  "title": {
    "fr": "terrain",
    "en": "field",
    "nl": "terrein",
    "es": "terreno",
    "it": "terreno",
    "pt": "terreno",
    "de": "Gelände"
  },
  "style_title": "019e939c-c5cf-7920-b66e-859fd8f4d9b8",
  "uuid_gradient": { "l": { "i": "019e8a05-4398-78f7-b843-3c61a20245e1" } },
  "locale": [],
  "loc_text": ""
}

ShaderMask + buildGradient + titleStyle. Sans gradient = span plat.

Ordre de mots différent — `locale[]` vs `loc_text`

Live, même wrap_text parent 019faad4-2650-7b8c-9fc1-3ce834f7a5a0 :

{
  "odr": 1,
  "title": { "fr": "Pas ", "en": "Not ", "nl": "Niet ", "es": "No ", "it": "Non ", "pt": "Não ", "de": "Nicht " },
  "locale": ["fr", "en", "nl", "it", "pt", "de"]
}

{
  "odr": 3,
  "title": { "es": ", no.", "fr": "Pas ", "en": "Not ", "nl": "Niet ", "it": "Non ", "pt": "Não ", "de": "Nicht " },
  "locale": ["es"]
}

folderView() omet le span dont locale ne contient pas localeCurrent. Les autres spans se recollent. Zéro espace fantôme.

Sur un span wrap_text, loc_text retire le mot quand UI == loc_text. Ce n’est pas le whitelist. Pour « ce mot seulement en fr » → locale: ["fr"]. WrapText ne passe pas loc_text à getText().

Piège. Mettre la phrase entière dans un seul id_text puis « simuler » le gras (pas de markdown dans title). Enfants wrap_text en id_button / image (WrapText ne lit que title/subtitle/gradient/style). locale: ["all"] n’existe pas. Vide = toutes.

Recette

Folder id_wrap_text, height 0, width 100%.
Un enfant id_text par fragment (mots outils + mots highlights).
Espaces dans le title (" à la ").
Highlight : uuid_gradient + style_title sur ce fragment only.
TextLocale complet sur chaque fragment si l’ordre est le même.
Si une langue inverse l’ordre : span (ou folder) dupliqué + locale[].