RepoWerkBeta
Tutti i playbookFlutter Production App

Aggiungere una schermata con routing e stato

Aggiungere la schermata di una feature raggiungibile per nome e da deep link, con stato Riverpod, testi tradotti e un test che non usa la rete.

Quando usarlo

Una nuova schermata raggiungibile dall'app, con un proprio stato: un elenco, un dettaglio, un form.

Regole da rispettare

  • Feature-first: la schermata vive in lib/features/<feature>/presentation, i provider in application, i contratti in domain, le implementazioni in data. I widget non chiamano mai Supabase direttamente.
  • Le route si dichiarano una sola volta nell'enum AppRoute e si aprono per nome. Il redirect del router gestisce già sessione, onboarding e deep link: non aggiungere una seconda guardia dentro la pagina.
  • Una guardia del router è una comodità, non un'autorizzazione: i dati protetti sono garantiti dalla RLS.
  • Lo stato vive in provider Riverpod, non in singleton o variabili globali. Caricamento, stato vuoto ed errore sono espliciti.
  • Ogni testo visibile passa da lib/l10n/*.arb, in tutti e tre i file.

Passi

  1. Aggiungi la route ad AppRoute in lib/app/router/app_routes.dart, per esempio notes(path: '/notes'). Usa percorsi interni (/...): internalLocation scarta tutto il resto che arriva da un deep link.
  2. Registra un GoRoute in lib/app/router/app_router.dart con path: AppRoute.notes.path e name: AppRoute.notes.name. Non aggiungerla a _gates, che contiene solo sessione, auth e onboarding: fuori dai gate il redirect protegge la route e, dopo l'accesso, ci riporta l'utente con il parametro from.
  3. Crea lo stato in lib/features/notes/application/notes_providers.dart. Leggi i dati con un FutureProvider, o un AsyncNotifierProvider se la schermata li modifica anche, che attende authSessionProvider come fa currentProfileProvider. Prendi il repository dal suo provider, così i test possono sostituirlo.
  4. Crea lib/features/notes/presentation/notes_page.dart come ConsumerWidget, sul modello di SettingsPage: AppBar con AppBackButton, contenuto limitato a 560 px e ref.watch(notesProvider).when(...) per caricamento, errore e dati, più uno stato vuoto. Usa un ConsumerStatefulWidget solo per lo stato locale della UI, come un controller di testo.
  5. Aggiungi i testi ad app_en.arb (il file di riferimento), app_de.arb e app_it.arb. fvm flutter pub get rigenera context.l10n.
  6. Aggiungi il punto di accesso, per esempio un pulsante in HomePage che chiama context.pushNamed(AppRoute.notes.name).
  7. Aggiungi un widget test che sostituisce il repository con un fake in un ProviderScope, come fa test/critical_user_journey_test.dart. Apre la schermata e verifica caricamento, stato vuoto, dati ed errore, senza rete.

Completato quando

  • i comandi di verifica passano;
  • la schermata si apre dall'app e da un deep link dopo l'accesso;
  • il test copre caricamento, stato vuoto, dati ed errore senza rete;
  • i nuovi widget non contengono testi scritti nel codice.