Week 1: Container Widget in Flutter

• Application Development
• MBO
• Studiejaar 2

Leerdoelen

Aan het einde van deze les kun je de Container widget beschrijven, minimaal 3 eigenschappen benoemen en een aangepaste container maken.

Vertel de leerlingen wat ze aan het einde van deze les kunnen.

Wat is een Container Widget?

Een Container widget is een element in Flutter dat andere widgets kan bevatten en kan worden gebruikt om de lay-out van een scherm te beheren.

Leg uit wat de Container widget is en waarvoor deze wordt gebruikt.

BoxConstraints

BoxConstraints is een eigenschap van de Container widget die de minimale en maximale grootte van de container bepaalt.

Leg uit wat BoxConstraints is en hoe het kan worden gebruikt om de grootte van de container te bepalen.

Decoration

Decoration is een eigenschap van de Container widget die de achtergrondkleur, rand en schaduw van de container bepaalt.

Leg uit wat Decoration is en hoe het kan worden gebruikt om de achtergrondkleur, rand en schaduw van de container te bepalen.

BorderRadius

BorderRadius is een eigenschap van de Container widget die de hoeken van de container afgerond maakt.

Leg uit wat BorderRadius is en hoe het kan worden gebruikt om de hoeken van de container af te ronden.

Eigenschappen gebruiken

Met de eigenschappen van de Container widget kun je aangepaste containers maken door de grootte, achtergrondkleur, rand en afgeronde hoeken aan te passen.

Laat de leerlingen zien hoe ze de eigenschappen van de Container widget kunnen gebruiken om aangepaste containers te maken.

Voorbeeldcode

Hier is een voorbeeldcode van een aangepaste container met een rode achtergrondkleur, een zwarte rand en afgeronde hoeken:

Laat de leerlingen zien hoe de eigenschappen van de Container widget kunnen worden gebruikt in een voorbeeldcode.

Voorbeeldcode

Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(10),
),
)

Laat de leerlingen zien hoe de eigenschappen van de Container widget kunnen worden gebruikt in een voorbeeldcode.

Oefenen (10 min)

Probeer nu zelf een aangepaste container te maken met behulp van de eigenschappen van de Container widget. De Container moet:

• Groen gevuld zijn
• Afgeronde hoeken hebben van 10.0
• Een blauwe rand

Geef de leerlingen de opdracht om zelf een aangepaste container te maken en loop rond om te helpen waar nodig.

Oplossing

Hier is een voorbeeldoplossing voor de opdracht:

Laat de leerlingen zien hoe de opdracht kan worden opgelost.

Oplossing

Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.green),
borderRadius: BorderRadius.circular(20),
),
)

Laat de leerlingen zien hoe de opdracht kan worden opgelost.

EdgeInsets.all

Padding

AppBar()

color

constraints

child

Padding

AppBar()

color

Text(...)

Wat doet de 'padding' eigenschap van de Flutter Container widget?

1. Het veranderen van de grootte van de container.
2. Het toevoegen van ruimte binnen de container.
3. Het toevoegen van een rand om de container.
4. Het centreren van de inhoud van de container.

Wat is het doel van de 'constraints' eigenschap van de Flutter Container widget?

1. Het toevoegen van ruimte binnen de container.
2. Het centreren van de inhoud van de container.
3. Het veranderen van de achtergrondkleur van de container.
4. Het beperken van de grootte van de container.

Wat is het doel van de 'decoration' eigenschap van de Flutter Container widget?

1. Het centreren van de inhoud van de container.
2. Het veranderen van de grootte van de container.
3. Het toevoegen van visuele decoratie aan de container, zoals een achtergrondafbeelding of een rand.
4. Het toevoegen van ruimte binnen de container.

Hoe kun je een afbeelding passend maken in een Container widget?

1. BoxFit.contain
2. BoxFit.fitWidth
3. BoxFit.fill
4. BoxFit.fitHeight

Welke property kun je gebruiken om een afbeelding af te ronden in een BoxDecoration?

1. borderRadius
2. borderStyle
3. padding
4. boxShadow

Wat is de juiste manier om een BoxDecoration met een afbeelding aan een Container widget toe te wijzen?

1. BoxDecoration(backgroundImage: AssetImage('assets/image.jpg'))
2. decoration: BoxDecoration(image: DecorationImage(image: AssetImage('assets/image.jpg'), fit: BoxFit.cover))
3. BoxDecoration(image: AssetImage('assets/image.jpg'))
4. BoxDecoration(image: DecorationImage(image: AssetImage('assets/image.jpg')))

Samenvatting

Je weet nu wat de Container widget is, hoe het werkt en hoe je aangepaste containers kunt maken met behulp van de eigenschappen van de Container widget.

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.

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 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

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.

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