Week 2: Ontdek de kracht van Stack and Positioned widgets

• Application Development
• MBO
• Studiejaar 2

Leerdoel

Aan het einde van deze les kan je uitleggen wat Stack en Positioned widgets zijn en hoe je ze kunt gebruiken.

Vertel de leerlingen wat ze zullen leren en welke vaardigheden ze aan het einde van de les zullen hebben.

Wat weet jij al over Stack en Positioned widgets?

Wat zijn Stack widgets?

Een Stack widget is een widget waarmee je andere widgets bovenop elkaar kunt plaatsen en kunt stapelen.

Laat verschillende voorbeelden van Stack widgets zien en leg uit hoe ze werken.

Properties van Stack widgets

De meest voorkomende properties van Stack widgets zijn alignment, fit en overflow.

Leg elke property uit en geef voorbeelden van hoe ze kunnen worden gebruikt.

Code challenge 1 (10 min)

Gebruik een Stack widget om een afbeelding bovenop een tekstvak te plaatsen.

Geef de leerlingen de tijd om deze uitdaging aan te gaan en los het als een groep op.

Wat zijn Positioned widgets?

Een Positioned widget is een widget waarmee je andere widgets op een specifieke positie kunt plaatsen binnen een Stack.

Laat verschillende voorbeelden van Positioned widgets zien en leg uit hoe ze werken.

Properties van Positioned widgets

De meest voorkomende properties van Positioned widgets zijn top, bottom, left en right.

Leg elke property uit en geef voorbeelden van hoe ze kunnen worden gebruikt.

Code challenge 2

Gebruik een Positioned widget om een knop in de rechterbenedenhoek van het scherm te plaatsen.

Geef de leerlingen de tijd om deze uitdaging aan te gaan en los het als een groep op.

Stack en Positioned combineren

Je kunt Stack en Positioned widgets combineren om complexe lay-outs te maken.

Laat voorbeelden zien van complexe lay-outs en leg uit hoe ze zijn gemaakt.

Code challenge 3

Maak een lay-out met een afbeelding bovenop een tekstvak en een knop in de rechterbenedenhoek.

Geef de leerlingen de tijd om deze uitdaging aan te gaan en los het als een groep op.

Veelvoorkomende fouten

Enkele veelvoorkomende fouten bij het gebruik van Stack en Positioned widgets zijn het niet instellen van de juiste afmetingen en het niet juist uitlijnen van widgets.

Leg uit welke fouten vaak worden gemaakt en geef tips over hoe ze kunnen worden vermeden.

Voordelen van Stack en Positioned widgets

Het gebruik van Stack en Positioned widgets kan de ontwikkeling van complexe lay-outs versnellen en de code eenvoudiger maken.

Leg uit waarom het gebruik van deze widgets voordelig kan zijn en geef voorbeelden.

Code challenge 4

Maak een lay-out met meerdere afbeeldingen en tekstvakken die zijn gestapeld en gepositioneerd.

Geef de leerlingen de tijd om deze uitdaging aan te gaan en los het als een groep op.

Wat zijn de meest voorkomende properties van Positioned widgets?

1. Color, background en margin.
2. Top, bottom, left en right.
3. Width, height en padding.
4. Alignment, fit en overflow.

Wat is een Positioned widget?

1. Een widget waarmee je andere widgets kunt verwijderen.
2. Een widget waarmee je andere widgets naast elkaar kunt plaatsen.
3. Een widget waarmee je andere widgets op een specifieke positie kunt plaatsen binnen een Stack.
4. Een widget waarmee je andere widgets onder elkaar kunt plaatsen.

Welke zijn de meest voorkomende properties van Stack widgets?

1. Color, background en margin.
2. Top, bottom en left.
3. Alignment, fit en overflow.
4. Width, height en padding.

Wat is een Stack widget?

1. Een widget waarmee je andere widgets naast elkaar kunt plaatsen.
2. Een widget waarmee je andere widgets bovenop elkaar kunt plaatsen en kunt stapelen.
3. Een widget waarmee je andere widgets onder elkaar kunt plaatsen.
4. Een widget waarmee je andere widgets kunt verwijderen.

Conclusie

Je weet nu wat Stack en Positioned widgets zijn en hoe je ze kunt gebruiken. Je kunt deze widgets combineren om complexe lay-outs te maken en je code eenvoudiger te houden.

Vat de belangrijkste punten van de les samen en laat de leerlingen weten wat ze kunnen verwachten van de volgende les.

Bronnen

Flutter Documentation: https://flutter.dev/docs

Geef enkele bronnen waaruit leerlingen meer informatie kunnen halen over dit onderwerp.

Schrijf 3 dingen op die je deze les hebt geleerd.

De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.

Schrijf 2 dingen op waarover je meer wilt weten.

De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.

Wie vond deze les moeilijk te volgen of snel gaan?

Ik heb de les goed kunnen volgen

Het ging nog net. Ik moet het laten bezinken.

Het ging te snel/moeilijk.

Maak een Stack-widget met ten minste drie elementen
Gebruik de Positioned-widget om elk element op een andere positie te plaatsen. Plak hieronder de code van je oplossing

Maak een Stack-widget met ten minste vier elementen. Gebruik de Positioned-widget om elk element op een andere positie te plaatsen. Gebruik de Padding-widget om de afstand tussen de elementen aan te passen.

Maak dit ontwerp na en plak jouw code hieronder.