Göm menyn

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:

  1. Vad är det bakomliggande skälet till att man inte kan komma åt det lokala filsystemet från vissa plattformar?
  2. 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?
  3. 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

  1. 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.
  2. 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

  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 F5, och se till att det finns en länk till repot i mejlet.

Sidansvarig: Rita Kovordanyi
Senast uppdaterad: 2025-04-26