swift_companion/docs/pedagogie/etape-05-navigation-layout.md

Étape 5 — Navigation et layout adaptatif

Prérequis : étape 4 — profil validée sur téléphone (OAuth public + projects).

Objectif sujet

Critère	Cette étape
Retour vue 1	Navigator.push / pop — flèche AppBar sur la vue 2
Layout flexible	Scroll, marges, largeur max, 2 colonnes profil si écran large
Lisibilité	Rotation, clavier ouvert, petits écrans sans overflow

---

Navigation

SearchScreen  --push-->  ProfileScreen
ProfileScreen --pop-->   SearchScreen (session OAuth conservée)

• Pas de go_router obligatoire : Navigator 1.0 suffit.
• La vue 1 garde le token ; une nouvelle recherche ne refait pas OAuth.

---

Fichiers ajoutés / modifiés

lib/
├── theme/
│   └── swifty_ui.dart          # couleur 42, padding, AppBar, scroll responsive
├── screens/
│   ├── search_screen.dart      # formulaire scrollable, centré
│   └── profile_screen.dart     # lignes détail adaptatives, UI partagée
└── main.dart                   # thème Material 3 (seed 42)

swifty_ui.dart

Widget / helper	Rôle
SwiftyUi.appBar	AppBar turquoise identique sur les 2 vues
ResponsiveScrollBody	SingleChildScrollView + padding + maxWidth
ErrorMessage	Texte d’erreur sélectionnable, centré
LoadingFilledButton	Bouton avec spinner (connexion / recherche)

Vue recherche

• Contenu dans ResponsiveScrollBody (maxWidth ~480 px).
• Évite l’overflow quand le clavier est ouvert.

Vue profil

• Breakpoint 720 px : 1 colonne (téléphone) / 2 colonnes (tablette, paysage).
• _DetailRow : label + valeur en colonne si la ligne est trop étroite (< 400 px).

---

Critères « étape 5 terminée »

#	Test
1	Profil → retour → recherche sans déconnexion
2	Rotation paysage : pas de bande jaune / overflow
3	Clavier ouvert sur la recherche : boutons accessibles (scroll)
4	Tablette ou fenêtre large : profil en 2 colonnes lisible
5	Erreurs toujours visibles (couleur + message lisible)

---

Ensuite — étape 6

→ etape-06-checklist-soutenance.md : flutter test, démo peer-eval, préparation dépôt école.