Göm menyn

TDDD80 Projekt: Mobila och sociala applikationer

Laboration F4: Flutter: tillståndshantering


Syfte

Målet med denna laboration är att ni ska få en förståelse för hur man kan konstruera mer avancerade användargränssnitt som kommer ihåg sitt tillstånd, och kan visa rätt data, även om användaren skulle navigera bort från sidan, och sedan återvända.

Bekanta dig med tillståndshantering i Flutter

Detta steg är frivilligt, och kommer inte behöva redovisas.

Kör igenom denna hands-on introduktion till tillståndshantering i Flutter: 'Simple app-state management'. Tutorial:n ger en bra insikt i hur man ska tänka kring tillstånd i appen, och hur man bäst designar en Flutter app.

Genomförande

Första steget är, som vanligt, att besvara följande frågor:

  1. Vad är skillnaden mellan "stateful" och "stateless" widgets i Flutter? Ge exempel på när du skulle använda var och en.
  2. Vad är setState för funktion och när kan man använda den? Finns det nackdelar med setState?
  3. Inför projektarbetet: vad ger Provider för fördelar? a. Jämfört med att använda setState? b. Jämfört med att skicka information direkt mellan sidor (t.ex. när användaren har angett data på en sida, och man ska visa denna på föregående sida efter bakåtnavigering)?

Svaren måste referera till lämpliga källor.

Förberedelser

  1. Börja med att bygga på projektet ifrån laboration F3. Det rekommenderade sättet att bygga vidare på laboration F3 i ert gitlab-repository, och tagga er inlämning med Labb_F4.
  2. Skapa en mapp i lib och döp den till components. I den här mappen ska ni skapa en fil, t.ex photo_picker.dart, som ska innehålla en komponent som ska användas i den här och nästa laboration.
  3. Skapa två till filer i lib som ska innehålla de två vyer som ska utvecklas i den här laborationen.

Uppgift

Notera: Den här laborationen kommer antagligen kräva mer tid än tidigare laborationer, så planera in extra mycket tid för den här laborationen!

Uppgiften delas in i tre deluppgifter.

Deluppgift 1: Skapa komponenten

Som nämnts i förberedelserna ska en komponent implementeras i den här laborationen. Den här komponenten ser ni på bilderna nedan, nämligen en cirkel med text inuti. Den här cirkeln kommer att dyka upp på flera ställen i laborationen och det är därför bra praxis att abstrahera ut den till en egen komponent.

Den här komponenten kommer att vidareutvecklas i nästa laboration, men följande krav gäller för den i den här laborationen:

Krav på komponenten i den här laborationen:

  • Den ska vara rund som på bilden.
  • Det ska stå "Add image" centrerat i cirkeln om användaren inte har klickat på den.
  • Om användaren klickar på cirkeln ska något hända, t.ex. att en toast visas. (I nuläget behöver inte användaren kunna välja en bild, då komponenten ej har implementerat det i denna labb.)

I nästa laboration kommer den här komponenten att förbätttas för att den låta användaren ta en bild när man klickar på den. I nuläget gör alltså komponenten inte så värst mycket, men grunden gör det enklare att förbättra den i nästa laboration.

Exempelbild på komponenten för 'Add image', samt exempel på en toast som dyker upp längst ner på skärmen när man har klickat på komponenten:

Deluppgift 2: Skapa trilogi

Startskärmen är som vanligt de trilogier som redan finns i den tänkta appen. Med plus-knappen ska man kunna lägga till nya trilogier.

När man klickat på plus-knappen, ska nedanstående skärm visas. Dess slutgiltiga syfte är att låta användaren skapa en trilogi. Användaren ska kunna välja en bild (genom att klicka på den runda widget:en) samt skriva in ett namn och beskrivning för trilogin.

Uppgiften går ut att skapa ett användargränssnitt som följer bildens utformning nedan. I uppgiften ska era komponenter användas. Färgscheman och fonter behöver inte vara samma som på bilden.

När användaren har fyllt i allt klickar hen på Next-knappen, vilket för användaren vidare till den vy som ska lägga till nya filmer till den nya trilogin.



För att bekräfta för användaren att inputen har tagits om hand visas en toast. Titeln på sidan visar att vi håller på att arbeta med trilogin 'Dune' nu. Här kommer så småningom en lista av trilogins filmer att visas.

Deluppgift 3: Skapa tillhörande filmer

Klickar vi på plus-knappen på skärmen ovan, kommer vi till en skärm där man kan lägga till en ny film till trilogin. Användaren fyller i, och klickar på 'Create'. Detta bekräftas genom att en toast visas.

Notera: I denna labb behöver ni inte implementera logik för att spara undan nya data i någon databas. Däremot måste man kunna backa från en skärm och ta med sig information till föregående skärm. Hur man gör detta går vi igenom på veckans föreläsning.





Tips på nya Widgets som kan användas listas nedan:

  • Floating Action Button (är parameter till Scaffold)
  • ElevatedButton
  • GestureDetector (för komponenten som ska visa en bild)
  • TextField (för felmeddelanden)
  • Toast
  • Form (kika också på nycklar såsom GlobalKey!)

Dokumentation för dessa widgets hittar du på https://docs.flutter.dev/reference/widgets (Tips: Använd CTRL + F för att söka efter din widget på sidan).

Krav

  • Man ska kunna navigera till vyn som utvecklades i deluppgift 2 från listan av trilogier (laboration 2).
  • Man ska kunna navigera från vyn i deluppgift 2 till den i deluppgift 3.
  • Komponenten ska vara implementerad enligt kraven i deluppgift 1.
  • Om man klickar på '+' i deluppgift 3, ska en widget läggas till i listan som låter användaren lägga till en film.
  • Om man inte lagt till en film, ska text visas för att förtydliga det för användaren.
  • Man ska kunna lägga till många filmer utan att det orsakar problem i appen (t.ex. inte orsaka pixel overflow).

Redovisa

  1. Ni ska muntligt redovisa/demonstrera er laboration för en assistent på ett laborationstillfälle. Alla delar, inklusive svar på frågorna, ska redovisas.
  2. Ladda upp era sök-svar inkl. länkar, och er kod (alla relevanta filer för labben) till erat gitlab-repository. Glöm inte att tagga er inlämning med Labb_F4.
  3. Lägg till er assistent som Reporter i erat gitlab-repository. Meddela er assistent att ni lagt upp koden genom att skicka ett mejl. Märk mejlet med TDDD80: Labb F4, och se till att det finns en länk till repot i mejlet.

Sidansvarig: Rita Kovordanyi
Senast uppdaterad: 2026-04-17