TDDD80 Projekt: Mobila och sociala applikationer

Laboration F1: Flutter: widgets

Sätta up flutter på LiU Linux

För att köra flutter på ditt liu konto kör följande kommando i en terminal (Obs! Ni behöver bara köra detta en gång.)

> /courses/TDDD80/setup_flutter.sh

# Om du inte har kört VSCode tidigare
> module add prog/vscode
> module initadd prog/vscode

Bekanta dig med Flutter

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

Denna länk ger en bra hands-on introduktion till Flutter: 'Write your first Flutter app, t.o.m. '5. Make the app prettier'. Ni kan hoppa över installationsanvisningar. Ni kan även hoppa över '5 minute crash course', eftersom den bl.a. introducerar begreppet AppState som inte kommer att behövas i denna första labb.

Köra Flutter

För att kunna utveckla Flutter i din favoriteditor, få syntax-stöd, och få dokumentation till hands, behöver du installera plugins/extensions för Flutter och Dart.

Skapa nytt Flutter-projekt

För att skapa ett nytt Flutter projekt, skriv i en terminal:

> flutter create my_new_amazing_project 
> cd my_new_amazing_project 
> code .

Alternativt kan ni starta upp VSCode, och i VSCode öppna Kommandopaletten med F1 eller Ctrl+Shift+P eller Shift+Cmd+P, och börja skriva flutter new i textrutan som dyker upp. Välj sedan Empty Application och ange ett namn på ditt nya projekt.

Plattform att köra på

I denna första Flutter-labb kan ni gärna köra på Chrome som plattform, eftersom denna bör fungera "out-of-the-box". (Dock, se nedan för potentiellt problem, och hur man löser det.)

Potentiella problem

• Om du kör på Chrome som plattform, och får "Waiting for connection from debug service", gör då följande:
  • flutter config --enable-web
  • flutter clean

  Starta sedan om VSCode

• Om du kör på MacOS som plattform kan du råka ut för att nätverksåtkomst förhindras av operativsystemet, vilket i denna labb märks på att bilderna inte visas. Då behöver du sätta en tillåtelse för com.apple.security.network.client i MacOS > Runner > DebugProfile.entitlements i ditt projekt:

  

  Se vidare: SocketException [...] på StackOverflow

Tips

För att snabbt se vilka argument en widget tar, kan man börja med att skriva dess namn, och sedan hovra över namnet. Bilden visar hur man kan hovra över namnet på IconButton för att få se vilka parametrar just denna widget tar.

Själva laborationen

De kommande laborationerna kommer tillsammans att bilda ett litet app-projekt. Varje labb skapar en sorts egen modul, kan även kallas sida. Med varje labb så kommer fler och fler moduler att kopplas ihop och i slutet så kommer ni ha skapat en egen liten app. Tanken är att labb-serien ska vägleda er i hur man kan gå tillväga i projektet.

Syfte

Målet med laboration F1 är att bekanta sig med Flutter (och Dart) få en grundläggande förståelse för hur man kan bygga snygga gränssnitt i Flutter-ramverket.

I laborationen ska ni använda ett flertal givna grundläggande Widget:s för att skapa ett givet användargränssnitt. Ett flertal krav kommer att ställas på gränssnittet för att undvika missförstånd och uppmuntra till bättre utvecklingsprinciper. En sådan princip är att bygga modulära applikationer samt att bygga ett responsivt användargränssnitt.

Genomförande

Följande frågor bör besvaras innan du går vidare till själva laborationen:

1. Vad menas med att en app är responsiv?
2. Varför bör man använda en Scaffold widget?
3. Vad gör mainAxisAlignment och crossAxisAlignment i en Row respektive Column widget?
4. Vad är skillnaden mellan SizedBox och Container?

Alla svar ska referera till källor från flutters dokumentation. Svaren får alltså inte komma ifrån vilken källa som helst. Glöm alltså inte att ha med länk till källan i ditt svar.

Förberedelser

1. Börja med att skapa ett nytt projekt. Detta kan du göra i VSCode genom att öppna Kommandopaletten med F1 eller Ctrl+Shift+P eller Shift+Cmd+P, och börja skriva "flutter new" i textrutan som dyker upp. Välj sedan Empty Application. Välj sedan ett namn på ditt projekt.
2. Appen ska visa upp trilogier och tillhörande filmer. För att hantera sådan information så ska ni skapa en fil, `structure.dart`, med följande innehåll:

       class Movie {
           final String title;
           final String url;
   
           Movie({required this.title, required this.url});
       }
   
       class Trilogy {
           final String title;
           final String description;
           final String url;
           final List movies;
   
           Trilogy({required this.title, required this.description, required this.url, required this.movies});
       }
       

   Klassen 'Movie' representerar en film, som tillhör en 'Trilogy'. Det här är en struktur som kommer bevaras över hela labbserien.

3. För den här labben så behöver vi lite data som ska visualiseras i användargränssnittet ni ska skapa. För att underlätta så har vi förberett sådana testdata som bygger på de två klasser du definierat innan. Skapa en ny fil som heter data.dart, och som innehåller följande:

       import 'package:[ditt projektnamn]/structure.dart';
       
       Trilogy data = Trilogy(
           title: "The Lord of the Rings",
           description: "The Lord of the Rings trilogy is a cinematic masterpiece based on the novels by J.R.R. Tolkien. The trilogy follows the journey of Frodo Baggins and the Fellowship of the Ring as they strive to destroy the One Ring and ensure the downfall of its maker, the Dark Lord Sauron.",
           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/1",
       );
       

4. 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 'detailed_page.dart'. Er komponent ska implementeras i den här filen och ska ta emot ett 'Trilogy' objekt och presentera det i användargränssnittet ni skapar. Ni ska alltså ersätta Text('Hello world') i koden nedan med er egen lösning på labben.

       import 'package:flutter/material.dart';
   
       class DetailedPage extends StatelessWidget {
         const DetailedPage({super.key});
   
       @override
       Widget build(BuildContext context) {
         return const Scaffold(
             body: Center(
               child: Text('Hello World!'),
             ),
           );
         }
       }
       

5. Glöm inte att anropa er DetailedPage i main.dart:

       import 'package:flutter/material.dart';
       import 'package:[ditt projektnamn]/detailed_page.dart';
   
       void main() {
         runApp(const MainApp());
       }
   
       class MainApp extends StatelessWidget {
         const MainApp({super.key});
   
         @override
         Widget build(BuildContext context) {
           return const MaterialApp(
             home: DetailedPage(),
           );
         }
       }
       

Uppgift

Nedan finner ni användargränssnittet som ni ska implementera. Bilderna är tagna med samma data som visats tidigare. Den översta titeln ska visa 'title' fältet i ditt 'Trilogy' objekt. Efter det ska bilden för 'url' fältet visas och därefter 'description' fältet. Sist visas alla 'Movie' objekt som tillhör 'movies' fältet. (Ni får viss frihet i hur ni återger det grafika gränssnittet nedan. T.ex. är vänsterpilen i AppBar-fältet frivillig att ha med. Likaså behöver ni inte avgränsa de tre filmerna med just en svart ram. Och färgerna väljer ni själva.)

Smalt fönster	Stort fönster

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

• Scaffold
• AppBar
• Column
• CircleAvatar
• NetworkImage
• Text
• Wrap
• Card
• Padding
• SizedBox

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

• Modulen ska ta in ett 'Trilogy' objekt som parameter för att ändra sidan. Det räcker med att demonstrera med den data som getts till dig i labben, men om du vill visa gränsnittet med annan data så går det också bra.
• Raden av filmer ska vara responsiv. Det innebär att en film ska hoppa ner om den ej får plats på en och samma rad. Detta visas i bilderna ovan då filmerna anpassar sig til bredden.
• Det ska vara minst 3 st filmer i raden. Det här är för att responsiviteten ska kunna testas.
• Modulens utseende ska, enligt labbassistenten, vara lik det givna användargränssnittet.

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

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