Nils-Johan GyntherFlutter Frontend - Användarguide
Detta dokument beskriver hur du använder Flutter-frontenden för Recipe App ur ett användar- och operatörsperspektiv.
Senaste ändringar (2026-04-25)
Arkitektur- och UX-förbättringar:
- Grid-vy för recept: Kolumnval (2/4/6/8) via ikon i AppShell, med Riverpod-provider och SharedPreferences.
- RecipesScreen är nu body-only, ingen egen Scaffold/AppBar.
- AppShell visar grid-ikon endast på /recipes.
- Buggfix: Produktväljaren i pantry/inventarie (ProductPickerField) — bottenark implementeras.
- Kodkvalitet: Inga absoluta Windows-sökvägar.
Nyheter och förbättringar:
- Fas 5: Matplan parity — Veckovy, portionsjustering per dag, inköpslista och inventariejämförelse mot användarens pantry är nu fullt migrerade och user-scopade.
- Fas 6a: Receptimport — Importflöde för recept (fil/URL) är nu robust, med stöd för PDF, bild och ICA-länkar. Prefill av markdown och bild-url fungerar i Flutter.
- Bildimport — Backend och Flutter har förbättrats med robust bildhantering, normalisering av URL:er, fallback och diagnostikloggning.
- User-scope för pantry och matplan — Alla baslager- och matplansdata är nu per användare (inte globala).
- UI/UX-förbättringar — Produktval med bottenark (ProductPickerField), swipe-för-±1 på inventarielistan (SwipeableInventoryTile), och förbättrad felhantering.
Vad appen är
Flutter-webben för Recipe App är en webbklient byggd med Flutter och körs i Docker med Caddy som proxy. Den är avsedd att ersätta den befintliga Next.js-frontenden och stödja framtida mobilklienter.
Aktuella användarflöden
- Inloggning med användarnamn och lösenord.
- Receptlista efter inloggning.
- Profil-sida (grundversion).
- Utloggning från recept- och profil-sidor.
Var man kommer åt appen
- Testmiljö:
https://test.gynther.se
Inloggningsdetaljer
- Inloggning förväntar sig användarnamn, inte e-post.
- Exempel på seedad admin-användare i backend:
Nadmin. - Lösenordet kontrolleras av servermiljövariabeln (
ADMIN_NADMIN_PASSWORD).
Kända begränsningar
- Kvittoimport (Fas 6b) är påbörjad men granskningssteg och bulk-spara återstår.
- Bildimport kräver att containrar är uppdaterade med senaste kod — kontrollera att diagnostikloggar syns vid felsökning.
- Vissa adminfunktioner och avancerad AI-integration är planerade men ej migrerade.
Felsökning (användarnivå)
- Om sidan visar gammalt beteende efter deployment: hård uppdatering eller öppna i inkognitoläge.
- Om inloggning misslyckas: verifiera användarnamn/lösenord (inte e-post).
Relaterade dokument
Vad appen är
Detta är en Flutter Web frontend för Recipe App, som körs i Docker och exponeras via Caddy. Den är avsedd att bete sig som den befintliga webbfrontenden, men är byggd i Flutter för att stödja framtida Android- och iOS-klienter.
Aktuella användarflöden
- Inloggning med användarnamn och lösenord.
- Receptlista efter inloggning.
- Profil-sida (grundversion).
- Utloggning från recept- och profil-sidor.
Var man kommer åt appen
- Testmiljö:
https://test.gynther.se
Inloggningsdetaljer
- Inloggning förväntar sig användarnamn, inte e-post.
- Exempel på seedad admin-användare i backend:
Nadmin. - Lösenordet kontrolleras av servermiljövariabeln (
ADMIN_NADMIN_PASSWORD).
Kända begränsningar
- Kvittoimport (Fas 6b) är påbörjad men granskningssteg och bulk-spara återstår.
- Bildimport kräver att containrar är uppdaterade med senaste kod — kontrollera att diagnostikloggar syns vid felsökning.
- Vissa adminfunktioner och avancerad AI-integration är planerade men ej migrerade.
Felsökning (användarnivå)
- Om sidan visar gammalt beteende efter deployment: hård uppdatering eller öppna i inkognitoläge.
- Om inloggning misslyckas: verifiera användarnamn/lösenord (inte e-post).
- Om recept inte laddas: rapportera fel i webbläsarkonsolen/nätverksfelen till utvecklingsteamet.
Förväntningar vid release
Denna frontend är tillgänglig för iterativ testning. Funktionell parity med den nuvarande produktionsfrontenden levereras stegvis.
Konverteringsvägen och Onboarding
- CTA (Call-to-Action): Tydliga och lockande CTAs som "Se vad du kan laga med det du har hemma."
- Förenkla onboarding: Gästinloggning eller demo-läge, sociala inloggningar, välkomstguide, och pop-up-tips.
- Snabb start med exempeldata: Förifyllt exempeldata och "Snabbstart"-knapp.
- Fokusera på "Aha!"-momentet: Omedelbara receptförslag och automatiska inköpslistor.
- Tydliga instruktioner och feedback: Instruktioner för varje steg och omedelbar feedback.
- Användarvänlig design: Fokus på kärnfunktioner och enkelhet.
- Möjlighet att hoppa över onboarding: Knapp för att hoppa över onboarding.
Testa och iterera
- Gå igenom appen som en ny användare för att identifiera eventuella problem.
- A/B-testa olika CTAs och onboarding-flöden.
- Implementera analytik för att spåra var användare hoppar av och varför.
Anpassa till målgruppen
- Anpassa marknadsföring och CTAs till målgruppen (t.ex. familjer, matintresserade, meal preppers).
- Var tydlig med appens värdeproposition, t.ex. "Slipp slösa mat – vi visar vad du kan laga med det du har hemma."
Nyheter och förbättringar (2026-04-24)
- Navigations- och UX-förbättringar:
- Tydliga navigationslänkar mellan recept, inventarie, baslager och matplan för att förenkla användarflödet.
- Efter att ett recept redigerats, navigeras användaren nu automatiskt till receptdetaljer.
- Efter konsumtion av inventariepost navigeras användaren automatiskt tillbaka till inventarielistan.
- Efter import av recept navigeras användaren automatiskt till receptlistan.
- Mjukare scrollning i receptdetaljvyn och förbättrad bakgrundsbildshantering.
- Kodkvalitet:
- Säkerställt att inga absoluta Windows-sökvägar används i koden, för att stödja bygg och drift på Linux/Ubuntu.