RepoWerkBeta
Alle PlaybooksFlutter Production App

Einen Screen mit Route und State hinzufügen

Einen Feature-Screen hinzufügen, der per Name und Deep Link erreichbar ist, mit Riverpod-State, übersetzten Texten und einem Test ohne Netzwerk.

Wann du es brauchst

Ein neuer Screen, der aus der App erreichbar ist und eigenen State hat: eine Liste, eine Detailseite, ein Formular.

Regeln

  • Feature-first: Der Screen liegt in lib/features/<feature>/presentation, Provider in application, Verträge in domain, Implementierungen in data. Widgets rufen Supabase nie direkt auf.
  • Routen werden einmal im Enum AppRoute deklariert und per Name geöffnet. Der redirect des Routers behandelt Sitzung, Onboarding und Deep Links bereits: Füge in der Seite keinen zweiten Guard hinzu.
  • Ein Router-Guard ist Komfort, keine Autorisierung: Geschützte Daten sichert RLS.
  • State liegt in Riverpod-Providern, nicht in Singletons oder globalen Variablen. Lade-, Leer- und Fehlerzustand sind explizit.
  • Jeder sichtbare Text läuft über lib/l10n/*.arb, in allen drei Dateien.

Schritte

  1. Füge die Route zu AppRoute in lib/app/router/app_routes.dart hinzu, zum Beispiel notes(path: '/notes'). Halte Pfade intern (/...): internalLocation verwirft alles andere, was aus einem Deep Link kommt.
  2. Registriere eine GoRoute in lib/app/router/app_router.dart mit path: AppRoute.notes.path und name: AppRoute.notes.name. Füge sie nicht zu _gates hinzu, das nur Sitzung, Auth und Onboarding enthält: Außerhalb der Gates schützt der Redirect die Route und führt nach der Anmeldung über den Parameter from zu ihr zurück.
  3. Lege den State in lib/features/notes/application/notes_providers.dart an. Lies Daten mit einem FutureProvider, oder einem AsyncNotifierProvider, wenn der Screen sie auch ändert, der wie currentProfileProvider auf authSessionProvider wartet. Hole das Repository aus einem eigenen Provider, damit Tests es ersetzen können.
  4. Lege lib/features/notes/presentation/notes_page.dart als ConsumerWidget nach dem Vorbild von SettingsPage an: AppBar mit AppBackButton, Inhalt auf 560 px begrenzt und ref.watch(notesProvider).when(...) für Laden, Fehler und Daten, dazu ein Leerzustand. Nutze ein ConsumerStatefulWidget nur für lokalen UI-State wie einen Text-Controller.
  5. Füge die Texte zu app_en.arb (der Vorlagendatei), app_de.arb und app_it.arb hinzu. fvm flutter pub get erzeugt context.l10n neu.
  6. Füge den Einstieg hinzu, zum Beispiel einen Button in HomePage, der context.pushNamed(AppRoute.notes.name) aufruft.
  7. Füge einen Widget-Test hinzu, der das Repository in einem ProviderScope durch ein Fake ersetzt, wie in test/critical_user_journey_test.dart. Er öffnet den Screen und prüft Lade-, Leer-, Daten- und Fehlerzustand ohne Netzwerk.

Fertig, wenn

  • die Prüfbefehle erfolgreich sind;
  • sich der Screen aus der App und nach der Anmeldung per Deep Link öffnet;
  • der Test Lade-, Leer-, Daten- und Fehlerzustand ohne Netzwerk abdeckt;
  • die neuen Widgets keinen fest codierten Text enthalten.