TDDD80 Projekt: Mobila och sociala applikationer

Laboration F2: Flutter: navigering

Sätta upp emulator

Syfte med labben

Målet med laborationen är att ni ska bli mer bekväma med Flutter-ramverket och testa att bygga ett mer komplext användargränssnitt med detta verktyg. Eftersom gränssnittet består av flera sidor, kommer ni behöva implementera navigering mellan sidorna.

Genomförande

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

Vad finns det för potentiellt problem med att ha bilder med olika bildförhållande (aspect ratio på engelska)? Hur kan man lösa det problemet?
Vad är en 'Navigator' i Flutter och hur används den för att hantera navigering mellan sidor?
Hur fungerar 'ListView' widgeten i Flutter och när är det lämpligt att använda den?

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

Förberedelser

Börja med att bygga på projektet ifrån laboration 1. Det rekommenderade sättet att göra detta på är att grena ut ifrån laboration 1 i ditt gitlab-repository, men det går också att kopiera över filerna till ett nytt projekt.

För den här labben så behöver vi lite nya data som ska visas i det användargränssnittet ni ska skapa. Ta bort de gamla data som användes för laboration 1. För att underlätta så har vi förberett data som bygger på de två klasser ni definierat tidigare. Skapa en ny fil, eller lägg det i main.dart, som innehåller följande:


import 'package:[ditt_projektnamn]/structure.dart';

List trilogies = [
  Trilogy(
      title: "The Lord of the Rings",
      description:
          "An epic fantasy trilogy by J.R.R. Tolkien, adapted into films.",
      movies: [
        Movie(
            title: "The Fellowship of the Ring",
            url: "https://tddd80-server.azurewebsites.net/lord-of-the-rings/1"),
        Movie(
            title: "The Two Towers",
            url: "https://tddd80-server.azurewebsites.net/lord-of-the-rings/2"),
        Movie(
            title: "The Return of the King",
            url: "https://tddd80-server.azurewebsites.net/lord-of-the-rings/3"),
      ],
      url: "https://tddd80-server.azurewebsites.net/lord-of-the-rings/trilogy"),
  Trilogy(
      title: "Star Wars",
      description:
          "A space opera trilogy by George Lucas, detailing the adventures of characters in a galaxy far, far away.",
      movies: [
        Movie(
            title: "A New Hope",
            url: "https://tddd80-server.azurewebsites.net/star-wars/1"),
        Movie(
            title: "The Empire Strikes Back",
            url: "https://tddd80-server.azurewebsites.net/star-wars/2"),
        Movie(
            title: "Return of the Jedi",
            url: "https://tddd80-server.azurewebsites.net/star-wars/3"),
      ],
      url: "https://tddd80-server.azurewebsites.net/star-wars/trilogy"),
  Trilogy(
      title: "Harry Potter",
      description:
          "A fantasy series by J.K. Rowling, following the journey of a young wizard, Harry Potter, and his friends as they battle the dark wizard Voldemort.",
      movies: [
        Movie(
            title: "Harry Potter and the Philosopher's Stone",
            url: "https://tddd80-server.azurewebsites.net/harry-potter/1"),
        Movie(
            title: "Harry Potter and the Chamber of Secrets",
            url: "https://tddd80-server.azurewebsites.net/harry-potter/2"),
        Movie(
            title: "Harry Potter and the Prisoner of Azkaban",
            url: "https://tddd80-server.azurewebsites.net/harry-potter/3"),
        Movie(
            title: "Harry Potter and the Goblet of Fire",
            url: "https://tddd80-server.azurewebsites.net/harry-potter/4"),
        Movie(
            title: "Harry Potter and the Order of the Phoenix",
            url: "https://tddd80-server.azurewebsites.net/harry-potter/5"),
        Movie(
            title: "Harry Potter and the Half-Blood Prince",
            url: "https://tddd80-server.azurewebsites.net/harry-potter/6"),
        Movie(
            title: "Harry Potter and the Deathly Hallows: Part 1",
            url: "https://tddd80-server.azurewebsites.net/harry-potter/7"),
        Movie(
            title: "Harry Potter and the Deathly Hallows: Part 2",
            url: "https://tddd80-server.azurewebsites.net/harry-potter/8"),
      ],
      url: "https://tddd80-server.azurewebsites.net/harry-potter/trilogy"),
];

Nu är det dags att börja med användargränssnittet. Skapa en separat fil och döp den till något vettigt, t.ex 'list_page.dart'. Er modul ska implementeras i den här filen och ska ta emot ett 'List' objekt och presentera det i användargränssnittet ni skapar.

Uppgift

Nedan finner du användargränssnittet som ska implementeras. Det som visas är en lista av 'Trilogy' objekt och när man klickar på ett element i listan så ska man navigera till den detaljerade vyn från laboration 1 med korrekta data. Laboration 1 ska alltså kombineras med den nya modulen och ska fungera med de data som getts ovan.

Om man klickar på `"The Lord of the Rings"` så ska man alltså komma till den detaljerade vyn som implementerades i laboration 1. Själva 'Trilogy' objektet behöver alltså skickas med som i laboration 1. Se bilder nedan.

Den "flytande" '+' knappen längst ner till höger ska visas framför i användargränssnittet, men ska inte göra någonting när man klickar på den. Det kommer i laboration 3.

Listan	Detaljerade vyn

Tips på Widgets som kan användas, utöver de som användes i labb F1, listas nedan:

ListView.builder
ListTile
FloatingActionButton
NetworkImage
SingleChildScrollView

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

Den givna datan ska användas för att fylla ut användargränssnittet. Det här innebär att namnet på trilogin, en bild på trilogin, dess beskrivning och en lista av dess filmer ska visas för den valda trilogin i den detaljerade vyn. I den överblickande list-vyn ska trilogins bild och namn visas.
Det ska finnas navigering mellan sidorna.
Det ska finnas en "flytande" knapp längst ner till höger vars funktionalitet tillkommer i en senare laboration.
Båda sidorna ska vara responsiva, dvs. anpassa sig till skärmstorlek, och inte orsaka pixel overflow.
Layouten ska, enligt labbassistenten, vara lik det givna användargränssnittet.
Listan ska vara den vy man kommer till när man öppnar appen.

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

Sidansvarig: Rita Kovordanyi
Senast uppdaterad: 2025-03-02

IDA - Institutionen för datavetenskap