guidesoutenance

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

@@ -0,0 +1,74 @@
+# Étape 5 — Navigation et layout adaptatif
+
+> **Prérequis :** [étape 4 — profil](etape-04-vue-profil.md) 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
+
+```text
+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](etape-06-checklist-soutenance.md) : `flutter test`, démo peer-eval, préparation dépôt école.