75 lines
2.3 KiB
Markdown
75 lines
2.3 KiB
Markdown
# É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.
|