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, jämfört med att använda setState?

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

Förberedelser

  1. Börja med att bygga på projektet ifrån laboration 3. Det rekommenderade sättet att göra detta på är att grena ut ifrån laboration 3 i ditt gitlab-repository, men det går också att kopiera över filerna till ett nytt projekt.
  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å "Click here" centrerat i cirkeln om användaren inte har klickat på den.
  • Om användaren klickar på cirkeln ska något annat innehåll visas. Det kan till exempel vara en bild som fyller cirkeln.

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!

En exempelbild på komponenten:

Deluppgift 2: Skapa trilogi

Den första vyn som ska skapas visas nedan. Dess slutgiltiga syfte är att låta användaren skapa en trilogi. Användaren ska kunna välja en bild (genom att klicka på "Click here") samt skriva in ett namn och beskrivning för trilogin. När användaren är nöjd klickar hen på "Create Trilogy", vilket för användaren vidare till den vy som ska utvecklas i nästa uppgift! (I nuläget behöver inte användaren kunna välja en bild, då komponenten i deluppgift 1 ej har implementerat det.)

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

När man trycker på "Create Trilogy" så ska man navigera till det användargränssnitt som skapas i nästa deluppgift.

Notera: ingen logik för att ta tillvara och skicka vidare data behöver implementeras i den här laborationen. Endast användargränssnittet ska implementeras.

Deluppgift 3: Skapa tillhörande filmer

Den andra vyn är en lista av filmer som användaren ska kunna lägga till filmer i (ta bort är inget krav). Man lägger till filmer genom att klicka på '+' längst ner till höger. När inga filmer lagts till ska det förtydligas för användaren. När man klickar på '+', ska listan uppdateras med ett formulär som tillåter användaren att lägga till en film. Det här ska kunna upprepas utan problem. Färgscheman och fonter behöver inte vara samma som på bilden, endast utformningen.

Från början Efter att ha tryckt på '+' en gång

Notera: Ingen logik för att samla in och skicka datan den vidare behöver implementeras i den här laborationen. Endast användargränssnittet och funktionaliteten för '+' knappen behöver implementeras.

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

  • ElevatedButton
  • GestureDetector (För komponenten)
  • TextField
  • 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. Ha gärna separata "grenar" för labbarna om ni har allt i samma gitlab-repository (rekommenderat). Läs mer på denna länk.
  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: 2025-03-12