Week 4: Named routes & provider

• Application Development
• MBO
• Studiejaar 2

Kaart Spelletje

Speel dit in een groepje van 4 personen. Jullie krijgen een kaartje overhandigd waarmee je 

Zware materie

Lesdoelen

1. Aan het einde van de les kan jij tussen schermen navigeren door de namen van de schermen te gebruiken in jouw mobiele app. 

Wat heb je nodig?

Beschrijf hier de benodigdheden.

Bijvoorbeeld: Laptop en de nieuwste versie van Flutter

Oude kennis

Oude kennis ophalen -> Welk methodiek ga jij hiervoor gebruiken? -> Memo's, Post-its

Mixins

Zoek in de Google docs wat mixins zijn.

Waar zou jij mixins voor gebruiken in de shop app (behalve provider)?

User zou een mixin kunnen zijn waarna consumer gemaakt kan worden of shopOwner oid.

Navigeren

Op dit moment gebruiken wij Navigator.of(context).push(MaterialRoute ....)

Navigator is het systeem van Flutter dat over het navigeren tussen de schermen gaat. Die heeft vele methods die gebruikt kunnen worden waaronder de push method.

Laten wij dit tekenen.

Navigeren

De Navigator is leeg wanneer je hem voor het eerst gebruikt.

Door push te gebruiken leg je eigenlijk een nieuwe scherm bovenop je oude scherm.

Navigeren

Hierdoor ontstaat een stack zoals je kan zien in de afbeelding.

Door pop te gebruiken haal je de bovenste scherm in je 'stack' weg.

Kunnen jullie een scherm noemen in de shop app waarbij je duidelijk kan zien dat het werkt zoals net uitgelegd?

1. main.dart
2. product_detail_page.dart
3. Provider package
4. products_overview_page.dart

Waaraan zie je dat?

1. De animatie
2. Ik kan dat opvragen in Navigator
3. Aan de data dat geladen wordt
4. Het pijltje in de appBar

Door deze regel code te gebruiken kunnen wij navigeren als wij, bijvoorbeeld op een knop drukken. Wat is hier het nadeel van?

Het is onoverzichtelijk en verstopt tussen de code waardoor je moet gaan zoeken in welk bestand je waarheen kan navigeren.

Dit is niet ideaal.

Named Routes

Er is een andere manier om te navigeren waardoor je een beter overzicht kan krijgen welke schermen er allemaal zijn. Dit kan door schermen namen te geven in de vorm van een String.

Laten wij samen kijken hoe je named routes kan gebruiken.

Pas kennis toe in eigen project

Pas kennis toe in eigen project

Laat de studenten de nieuwe kennis toepassen. 

Interactieve gedeelte van de les

1. Ga naar de YouTube pagina van Flutter
2. Kies een widget waar je meer over wilt weten
3. Pas deze toe in jouw project 

Samenvatting

Nieuwe kennis samenvatten

Hier kan gemeten worden of de student de lesdoelen heeft gehaald. Laat de student hier methodieken als chunking en beacons toepassen.

Wat gebeurt er wanneer widgets uit het zicht gaan van de GridView.builder?

1. De tegel wordt gerecycled
2. De life cycle van de tegel wordt in leven gehouden
3. De life cycle wordt op de achtergrond gehouden
4. De life cycle van de tegel wordt vernietigd

Wat doet dit stukje code?
"Provider.of<Product>(context, listen: false)"

1. Dan luister je niet meer naar Products
2. Dan luister je niet meer naar de veranderingen
3. Dan luister je eenmalig naar de data van Product
4. Dan zet je de Provider uit

Wat doet notifyListeners() ?

Lesdoelen

1. Aan het einde van de les kunnen jullie een blauwdruk maken en overerven in JavaScript.
2. Aan het einde van de les kunnen jullie een diagram in een blauwdruk omzetten.

Herhaal de lesdoelen.

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.

Vooruitblik

Wat gaan wij de volgende les doen?

Geef hier het onderwerp van de volgende les waar de student naar mag uitkijken.