TDDD80 Projekt: Mobila och sociala applikationer
Laboration F5: Flutter: sensorer
Bekanta dig med provider-biblioteket
Kör gärna igenom denna hands-on introduktion till hur man använder provider-biblioteket i Flutter.
Detta steg är frivilligt, och kommer inte behöva redovisas.
Syfte
Den här laborationen syftar till att ge erfarenhet av att hantera flera olika tillstånd i Flutter-applikationer, att förstå och implementera navigering för att skicka data mellan olika skärmar, samt att lära sig att integrera och visa bilder som användare väljer från sina enheter direkt i appen med hjälp av 'image_picker'.
Genomförande
Första steget är, som vanligt, att besvara följande frågor:
- Vad är det bakomliggande skälet till att man inte kan komma åt det lokala filsystemet från vissa plattformar?
- Varför är det snyggare att använda provider-biblioteket istället för att skicka data direkt mellan olika sidor och/eller mellan widgets?
- Hur använder man image_picker i Flutter för att låta användare välja bilder från sin enhet? Följdfråga: Hur mycket kod behöver man ändra för att ta en bild med kameran istället?
Svaren måste referera till lämpliga källor.
Förberedelser
- Börja med att bygga på projektet ifrån laboration 4. Det rekommenderade sättet att göra detta på är att grena ut ifrån laboration 4 i ditt gitlab-repository, men det går också att kopiera över filerna till ett nytt projekt.
- Lägg till 'image_picker' i projektets pubspec.yaml fil, samt provider, då dessa två bibliotek krävs för den här laborationen. Senaste versionen av biblioteken hittar ni i dokumentationen som är länkad ovan.
Den här laborationen kommer delas upp i tre delmoment då ordningen spelar roll. Det finns olika sätt att lösa labben på, men vi kommer att använda oss av provider-biblioteket för att hantera data.
Deluppgift 1: Förbättra komponenten
Öppna filen i 'components' mappen som skapades i förra laborationen. Den här komponenten ska nu förbättras så att den uppfyller följande krav:
Krav på komponenten
- När användaren klickar på komponenten så ska bildbiblioteket öppnas så att användaren kan välja en bild.
- När användaren valt bild så ska den här visas i cirkeln och texten ska försvinna.
- När cirkeln innehåller en bild så ska användaren fortfarande kunna välja en ny bild genom att klicka på cirkeln.
Logiken för att öppna bildbiblioteket ska hanteras av 'image_picker' Det finns kodexempel under "Example"-fliken i dokumentationen för image_picker.
För vissa av plattformarna fungerar inte I/O-anrop per default. Testa då med en annan plattform, eller läs på om/hur man kan tillåta den valda plattformen att komma åt ens lokala filer.
Deluppgift 2: Hantera användarinput
I förra labben skapades två vyer som lät användaren ange information i appen. I den här deluppgiften ska ni spara undan den informationen och låta användaren skapa en trilogi med tillhörande filmer så att den kan visas i listan av trilogier (laboration 2). I nästa deluppgift ska ni hantera de nya data som skapas av användaren. I den här deluppgiften så är målet alltså att samla in alla data som användaren ger och göra den redo för att sparas undan i den lokala datastrukturen, för att sedan kunna visas i listan av trilogier.
Tips: ImagePicker kommer att returnera en fil av typen XFile?. Bilden kan då visas i en CircleAvatar genom, t.ex.:
backgroundImage: (imgFile != null)
? (UniversalPlatform.isWeb)
? NetworkImage(imgFile!.path)
: FileImage(File(imgFile!.path))
: null,
Kodexemplet testar för plattform m.h.a. 'universal_platform'-biblioteket, och läser in antingen en bildfil (blob:http://localhost:...) eller en lokal kamerabild, beroende på om koden körs på webb eller t.ex. på Android. För labben räcker en av dessa åtkomsttyper, beroende på vilken plattform ni kör på.
Deluppgift 3: Visa användarens trilogier
I den här deluppgiften ska ni implementera så att de nya Trilogy objekten visas i listan från laboration 2. Implementera data-hanteringen så att användarens data visas i listan av trilogier med hjälp av provider-biblioteket. Glöm inte att lägga till provider-biblioteket i ert projekt.
Ni kommer att behöva spara undan de delar om den nya trilogin som användaren har angett (bild, titel, beskrivning), och sedan i nästa steg lägga till filmer till den nyligen sparade trilogin. Ni får anta att användaren väljer en bild, och fyller i titel, samt beskrivning på "Lägg till trilogii-sidan" innan hen går vidare till "Lägg till filmer"-sidan.
void tryToMakeMovie() {
if (_newImagePathOrUrl != null && _newMovieTitle != null) { // makie a movie
trilogies.last.movies.add(Movie(
title: _newMovieTitle!,
url: _newImagePathOrUrl!,
));
_newMovieTitle = null;
_newImagePathOrUrl = null;
notifyListeners();
}
}
Notera det sista viktiga anropet till superklassens notifyListeners(), så att alla berörda widgets uppdaterar sig.
Viktiga klasser för att arbeta med provider-biblioteket:
- Consumer
- ChangeNotifier
- Provider (eller MultiProvider)
I sista bilden nedan används en CarouselView för att visa filmerna i en trilogy, men det går lika bra med andra Widget-lösningar.
Krav
- Alla ovanstående krav på komponenten är uppfyllda.
- Alla data som angivits av användaren, inklusive bilder, läggs till som en trilogi i listan från laboration 2. Om appen startas om bör de här data försvinna då den inte långtidslagras någonstans!
- Biblioteket image_picker ska användas.
- Datastrukturerna Movie och Trilogy ska användas där det är lämpligt.
- provider-biblioteket används på ett korrekt sätt för att visa de nya trilogierna.
- Man ska kunna lägga till många trilogier utan att det orsakar problem i appen (t.ex. inte orsaka pixel overflow).
Redovisa
- Ni ska muntligt redovisa/demonstrera er laboration för en assistent på ett laborationstillfälle. Alla delar, inklusive svar på frågorna, ska redovisas.
- 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.
- 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 F5, och se till att det finns en länk till repot i mejlet.
Sidansvarig: Rita Kovordanyi
Senast uppdaterad: 2025-04-26