Week 4, 5 en 6: Containers, Columns & Rows

• Application Development
• MBO
• Studiejaar 2

Week 4: Containers, columns & rows

Week 3: Mi Card app

Lesdoelen

1. Jij gaat je eigen visitekaartje maken voor het solliciteren
2. Jij gebruikt containers in Flutter
3. Jij maakt gebruik van column en row widgets om de layout puzzel op te lossen

Mi Card

Gezien jullie een stage moeten zoeken eind dit jaar, gaan wij een visitekaartje maken 😏

Mi Card (30 min)

Maak jouw visitekaart die je wilt gebruikt voor je sollicitatie. Zorg ervoor dat je dit in Github plaatst.

Mocht je nieuwe iconen willen gebruiken kijk dan op uplabs.

Layout challenge

Aan het einde van deze les moet je het volgende kunnen oplossen.

Container widget

Container widget (vergelijkbaar met een div element in HTML).

Container widget

Wij willen de volgende container maken. Kijk mee met de docent hoe deze te maken en maak kennis met de SafeArea widget.

Container widget

Je code moet er nu als volgt uit zien.

Container widget

Echter nu hebben wij een probleem. Wat nou als wij meer widget willen toevoegen onder elkaar?

Welk widget is daar geschikt voor?

Kijk op flutter.dev (basic widgets)

Echter nu hebben wij een probleem. Wat nou als wij meer widget willen toevoegen onder elkaar?

Welk widget is daar geschikt voor?

Opdracht

In de volgende opdracht willen wij containers onder elkaar plaatsen. Sleep de juiste container naar het juiste doel.

Red container

Green container

Yellow container

Blue container

Purple container

Column()

Scaffold()

Row()

Column widget

De docent laat nu zien hoe je een column moet implementeren om meerdere widgets verticaal te stapelen.

Column widget

Je code moet er nu als volgt uit zien.

Let op, de container widgets heb ik dicht geklapt via de gutter in VSCode.

Row widget

Deze is vrijwel identiek aan de Column widget, alleen werkt deze in de horizontale richting.

Maak je een screenshot van jouw emulator met de layout opdracht opgelost en lever deze hier in.

Applausje voor jezelf

5 min pauze

Neem even een korte pauze.

Dicee app

Dicee app

Tijd voor een nieuw project.

Maak via de cli een nieuw project aan genaamd dicee-app.

Dicee app

Delete alle code en zorg dat je klaar staat om een start te kunnen maken.

Dicee app (15 min)

Probeer deze layout na te maken met de kennis die je tot nu toe hebt opgebouwd. 

De images zijn te downloaden via de pagina van dit vak op onderwijs online.

Om dit te kunnen doen moet je nieuwe widgets gebruiken. De nieuwe widgets zijn de Expanded- en TextButton-widget.

Dicee app (10 min)

De docent laat het nu zien. 

Dicee app

Echter onze body zal stateful moeten zijn want de plaatjes worden dynamisch geladen. 

Laten wij daarom de code extracten naar een stateful widget.

De docent laat het zien. 

Dicee app

Wij moeten nu een functie schrijven waarmee wij de afbeeldingen kunnen veranderen. 

De docent legt het uit. 

Dicee app

Nu moeten de knoppen reageren op het indrukken van de knop. Daarvoor gebruiken wij de setState() {}. 

Met setState(), zoals de naam het zegt, vertellen wij Flutter dat wij nieuwe data hebben die ingeladen kan worden. Data die kan veranderen noemen wij State.

Dicee app

Jouw code zal er zo uitzien. 

Dicee app

De functie changeDiceFace is als volgt. 

Dicee app

De inhoud van de stateful widget zal er als volgt uitzien. 

Lesdoelen

1. Jij gaat je eigen visitekaartje maken voor het solliciteren
2. Jij gebruikt containers in Flutter
3. Jij maakt gebruik van column en row widgets om de layout puzzel op te lossen

Hoe vond je deze les gaan? Vul de poll hieronder in

Ik vond deze les moeilijk te volgen 🥵

Ik kon deze les nog net bijhouden 😮‍💨

Ik vond deze les gemakkelijk 😴