Week 1: Container Widget in Flutter
1 / 28
Onderdelen in deze les
Slide 1 - Tekstslide
Deze slide heeft geen instructies
Slide 2 - Tekstslide
Vertel de leerlingen wat ze aan het einde van deze les kunnen.
Slide 3 - Tekstslide
Leg uit wat de Container widget is en waarvoor deze wordt gebruikt.
Slide 4 - Tekstslide
Leg uit wat BoxConstraints is en hoe het kan worden gebruikt om de grootte van de container te bepalen.
Slide 5 - Tekstslide
Leg uit wat Decoration is en hoe het kan worden gebruikt om de achtergrondkleur, rand en schaduw van de container te bepalen.
Slide 6 - Tekstslide
Leg uit wat BorderRadius is en hoe het kan worden gebruikt om de hoeken van de container af te ronden.
Slide 7 - Tekstslide
Laat de leerlingen zien hoe ze de eigenschappen van de Container widget kunnen gebruiken om aangepaste containers te maken.
Slide 8 - Tekstslide
Laat de leerlingen zien hoe de eigenschappen van de Container widget kunnen worden gebruikt in een voorbeeldcode.
Slide 9 - Tekstslide
Laat de leerlingen zien hoe de eigenschappen van de Container widget kunnen worden gebruikt in een voorbeeldcode.
Slide 10 - Tekstslide
Geef de leerlingen de opdracht om zelf een aangepaste container te maken en loop rond om te helpen waar nodig.
Slide 11 - Tekstslide
Laat de leerlingen zien hoe de opdracht kan worden opgelost.
Slide 12 - Tekstslide
Laat de leerlingen zien hoe de opdracht kan worden opgelost.
EdgeInsets.all
Padding
AppBar()
color
constraints
Slide 13 - Sleepvraag
Deze slide heeft geen instructies
child
Padding
AppBar()
color
Text(...)
Slide 14 - Sleepvraag
Deze slide heeft geen instructies
Wat doet de 'padding' eigenschap van de Flutter Container widget?
A
Het veranderen van de grootte van de container.
B
Het toevoegen van ruimte binnen de container.
C
Het toevoegen van een rand om de container.
D
Het centreren van de inhoud van de container.
Slide 15 - Quizvraag
Deze slide heeft geen instructies
Wat is het doel van de 'constraints' eigenschap van de Flutter Container widget?
A
Het toevoegen van ruimte binnen de container.
B
Het centreren van de inhoud van de container.
C
Het veranderen van de achtergrondkleur van de container.
D
Het beperken van de grootte van de container.
Slide 16 - Quizvraag
Deze slide heeft geen instructies
Wat is het doel van de 'decoration' eigenschap van de Flutter Container widget?
A
Het centreren van de inhoud van de container.
B
Het veranderen van de grootte van de container.
C
Het toevoegen van visuele decoratie aan de container, zoals een achtergrondafbeelding of een rand.
D
Het toevoegen van ruimte binnen de container.
Slide 17 - Quizvraag
Deze slide heeft geen instructies
Hoe kun je een afbeelding passend maken in een Container widget?
A
BoxFit.contain
B
BoxFit.fitWidth
C
BoxFit.fill
D
BoxFit.fitHeight
Slide 18 - Quizvraag
Deze slide heeft geen instructies
Welke property kun je gebruiken om een afbeelding af te ronden in een BoxDecoration?
A
borderRadius
B
borderStyle
C
padding
D
boxShadow
Slide 19 - Quizvraag
Deze slide heeft geen instructies
Wat is de juiste manier om een BoxDecoration met een afbeelding aan een Container widget toe te wijzen?
A
BoxDecoration(backgroundImage: AssetImage('assets/image.jpg'))
B
decoration: BoxDecoration(image: DecorationImage(image: AssetImage('assets/image.jpg'), fit: BoxFit.cover))
C
BoxDecoration(image: AssetImage('assets/image.jpg'))
D
BoxDecoration(image: DecorationImage(image: AssetImage('assets/image.jpg')))
Slide 20 - Quizvraag
Deze slide heeft geen instructies
Slide 21 - Tekstslide
Vat de belangrijkste punten van de les kort samen en beantwoord eventuele vragen van de leerlingen.
Schrijf 3 dingen op die je deze les hebt geleerd.
Slide 22 - Open vraag
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.
Slide 23 - Open vraag
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.
Slide 24 - Open vraag
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.
Slide 25 - Poll
Deze slide heeft geen instructies
Maak een Container met een andere achtergrondkleur en voeg er een tekst aan toe. Laat de tekst gecentreerd in de container staan en speel met de verschillende padding waardes om de tekst op een mooie manier te positioneren
Slide 26 - Open vraag
Deze slide heeft geen instructies
Maak een Container met een afbeelding als achtergrond en gebruik de properties om het plaatje alles te laten vullen. Zorg dat er tekst in staat die verticaal staat.
Slide 27 - Open vraag
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background_image.jpg'),
fit: BoxFit.cover,
),
),
child: RotatedBox(
quarterTurns: 3,
child: Text(
'Verticale tekst',
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
),
),
Maak dit ontwerp na en plak je code hieronder die je hebt gebruikt om het op te lossen
Slide 28 - Open vraag
Deze slide heeft geen instructies
