IDA - Institutionen för datavetenskap

# Laboration 0 - Layout i flutter Som datavetenskapsstudenter är ni redan bekanta med olika programmeringsparadigm och koncept. För att skapa visuellt tilltalande och användarvänliga mobilappar med Flutter är det dock viktigt att förstå de grundläggande principerna för layoutdesign. Laborationen är uppdelade i några övningsuppgifter där ni tränar på lite olika koncept, och sen avslutas laborationen med en uppgift som ni löser själva. ## Syfte: Denna laborationsövning är utformad för att hjälpa er att öva på att skapa olika layouter i Flutter med hjälp av olika verktyg och tekniker. I slutet av denna laboration kommer ni att kunna: - Förstå de grundläggande koncepten för layoutdesign i Flutter. - Lära er att använda olika layout-widgets (t.ex. Row, Column, Container, etc.). - Tillämpa layouttekniker som padding, marginal, justering och storlek för att skapa visuellt tilltalande layouter. - Experimentera med olika widget-kombinationer för att uppnå önskade layouter. ## 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 du behöver bara köra detta en gång) ```bash /courses/TDDE43/setup_flutter.sh module add prog/vscode module initadd prog/vscode ``` För att skapa ett nytt Flutter projekt Öppna en ny terminal ```bash flutter create my_new_amazing_project cd my_new_amazing_project code . ``` ## Övning 1: Centrerad Container Er uppgift är att skapa en container som tar upp halva skärmens bredd och är centrerad horisontellt. ### Skapa ett nytt Flutter-projekt: - Lägg till en Container-widget som barn till Scaffold. - Använd egenskapen width för att ställa in containerns bredd till 50 % av skärmens bredd. - Använd en Center-widget för att centrera containern horisontellt. - Kör appen och verifiera att containern är centrerad. ### Steg-för-steg-lösning: - Skapa ett nytt Flutter-projekt med kommandot flutter create layout_practice. - Öppna filen main.dart och lägg till följande kod: ```dart import 'package:flutter/material.dart'; void main() { runApp(LayoutPractice()); } class LayoutPractice extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( width: MediaQuery.of(context).size.width * 0.5, color: Colors.blue, ), ), ), ); } } ``` ## Övning 2: Horisontell och vertikal sträckning Er uppgift är att skapa en container som tar upp hela skärmens storlek och har tre barn-widgets inuti sig. - Lägg till tre Container-widgets som barn till huvudcontainern. - Använd egenskapen width för att ställa in varje barncontainerns bredd till 1/3 av förälderns bredd. - Använd egenskapen height för att ställa in varje barncontainerns höjd till 50 % av förälderns höjd. - Kör appen och verifiera att alla tre containrar sträcks horisontellt och vertikalt. ### Steg-för-steg-lösning: - Lägg till en ny Container-widget som barn till huvudcontainern: ```dart body: Center( child: Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height * 0.5, color: Colors.red, child: Row( children: [ Container( width: MediaQuery.of(context).size.width / 3, height: MediaQuery.of(context).size.height * 0.5, color: Colors.blue, ), Container( width: MediaQuery.of(context).size.width / 3, height: MediaQuery.of(context).size.height * 0.5, color: Colors.green, ), Container( width: MediaQuery.of(context).size.width / 3, height: MediaQuery.of(context).size.height * 0.5, color: Colors.yellow, ), ], ), ), ) ``` ## Övning 3: Rutnätslayout Er uppgift är att skapa en rutnätslayout med tre rader och fyra kolumner. - Använd GridView.builder-widget för att skapa rutnätet. - Ställ in antalet rader och kolumner med gridDelegate-egenskapen. - Lägg till en barn-widget för varje cell i rutnätet. - Kör appen och verifiera att rutnätet har korrekt layout. ### Steg-för-steg-lösning: Ersätt Row-widgeten med en GridView.builder: ```dart body: Center( child: Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height * 0.5, color: Colors.red, child: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 4, mainAxisSpacing: 10, ), shrinkWrap: true, itemCount: 12, // antal celler i rutnätet itemBuilder: (context, index) { return Container( color: Colors.blue, width: MediaQuery.of(context).size.width / 4, height: MediaQuery.of(context).size.height * 0.5 / 3, ); }, ), ), ) ``` ## Övning 4: Staplad layout Er uppgift är att skapa en layout med två rader, där den första raden tar upp halva skärmens höjd och innehåller tre widgets. - Använd Column-widget för att stapla de två raderna. - Ställ in mainAxisAlignment-egenskapen till MainAxisAlignment.spaceEvenly för att jämnt fördela widgets i första raden. - Kör appen och verifiera att layouten är korrekt. ### Steg-för-steg-lösning: ```dart body: Center( child: Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height * 0.5, color: Colors.red, child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Row( children: [ Container( width: MediaQuery.of(context).size.width / 3, height: MediaQuery.of(context).size.height * 0.5 / 2, color: Colors.blue, ), Container( width: MediaQuery.of(context).size.width / 3, height: MediaQuery.of(context).size.height * 0.5 / 2, color: Colors.green, ), Container( width: MediaQuery.of(context).size.width / 3, height: MediaQuery.of(context).size.height * 0.5 / 2, color: Colors.yellow, ), ], ), ], ), ), ) ``` ## Övning 5: Flexibel layout Er uppgift är att skapa en layout med två rader, där den första raden tar upp halva skärmens höjd och innehåller tre widgets. - Använd Flexible-widget för att få den andra raden att ta upp det återstående utrymmet. - Kör appen och verifiera att layouten är korrekt. ### Steg-för-steg-lösning: - Lägg till en ny Row-widget som barn till huvudcontainern: ```dart body: Center( child: Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height * 0.5, color: Colors.red, child: Column( children: [ Row( children: [ Flexible( flex: 1, child: Container( width: MediaQuery.of(context).size.width / 3, height: MediaQuery.of(context).size.height * 0.5 / 2, color: Colors.blue, ), ), Flexible( flex: 1, child: Container( width: MediaQuery.of(context).size.width / 3, height: MediaQuery.of(context).size.height * 0.5 / 2, color: Colors.green, ), ), Flexible( flex: 1, child: Container( width: MediaQuery.of(context).size.width / 3, height: MediaQuery.of(context).size.height * 0.5 / 2, color: Colors.yellow, ), ), ], ), ], ), ), ) ``` ## Uppgift: Du ska återskapa följande användargränssnitt i Flutter. (Du ska enbart skapa användargränssnitt, inte någon funktionalitet.)
 ## Redovisning Demonstrera ditt gränssnitt för labbassistenten, assistenten kan be dig förklara delar av koden. Assistenten berättar hur hen vill att du lämnar in din kod. ## Länkar - [Flutter.dev](https://flutter.dev)