Week 2: I am rich app

• Application Development
• MBO
• Studiejaar 2

Multi-Platform

Week 2: I am rich app

Lesdoelen

1. Jij gaat je eerste app in het Flutter framework maken.
2. Jij kan straks in eigen woorden uitleggen wat:
3. ...Hot reload is
4. ...een Scaffold is
5. de pubspec.yaml file is

Project aanmaken met Flutter

Een project aanmaken met Flutter kan op twee manier:

1. Via de command line
2. Via de IDE (in dit geval VS-Code)

Laten wij beide kort verkennen

Project aanmaken (cmd)

Open jouw terminal en schrijf het volgende:

flutter create naam_project

Open je VS Code en open de folder wat zojuist is aangemaakt

Let op! Dit wordt gemaakt in de directory waar jij je nu bevindt in de terminal.

Project aanmaken (IDE)

1. Open VS-Code en druk ctrl + shift + p
2. De command menu van VS Code gaat nu open
3. Type "Flutter: New project" en kies het uit de menu
4. Kies Application
5. Kies de locatie waar jij het project wilt aanmaken op je computer (niet in OneDrive!!)
6. Geef je project een naam (moet in kleine letters en geen spaties)

Flutter template project

Docent gaat nu uitleggen wat Flutter standaard voor ons heeft aangemaakt.

Klik hier als je in paniek schiet van de code

Als je de uitleg snapt dan zal het je helpen maar als je nog niet begrijpt is het helemaal niet erg, wij komen hier later op terug.

Voorbereiding

Delete alle comments en code in de main.dart tot je dit overhoud =>

I am rich app

Geschiedenis van de diamond app

I am rich: Scaffold opzetten

Om gestructureerd een app op te bouwen maken wij gebruikt van een zogenoemde "steiger" (scaffold) in de framework.

Zoals jullie ongetwijfeld weten hebben apps vaak een top, body en bottom op iedere scherm. Dit wordt vergeleken met een scaffold. Zie het plaatje hiernaast.

I am rich: Scaffold opzetten

De docent laat nu zien hoe je een titel aan je pagina kan geven.

I am rich: Scaffold opzetten

Aan het einde van het voorbeeld moet je nu het de volgende code hebben =>

I am rich: de app uitvoeren

Nu gaan wij de code uitvoeren zodat de app gebouwd wordt en dat jij het resultaat van je code kan zien.

Druk op de 'Run' knop bovenaan de in de main.dart file. Zie de foto hiernaast

Hoe lang duurde het bouwen van de app?

1. 1 seconde
2. 5 seconde
3. > 10 seconde
4. > 30 seconde

I am rich: Hot reload

Jouw app draait nu, maar zoals je hebt gemerkt kan het lang duren om een app te bouwen iedere keer als wij een wijziging maken. Het Flutter team wist dat en heeft de hot reload feature ingebouwd zodat het ontwikkelen van een app vele malen sneller gaat. De docent demonstreert dit.

Compile an application

Compile betekent het bouwen van een applicatie. Een onderliggend programma controleert jouw code eerst en zal fouten aangeven. Als er geen fouten zijn gemaakt dan bouwt hij de app.

I am rich: Hot reload toepassing

Laten wij samen de achtergrond van de AppBar veranderen.

I am rich: body

De body neemt het grootste deel van scherm voor eigen rekening. Dit onderdeel is verantwoordelijk voor het presenteren van de informatie, knoppen, kleuren, vormen e.d.

De scaffold heeft een body parameter en hierin kan jij widgets toevoegen. laten wij hier samen naar kijken. De docent gaat nu de body vullen.

I am rich: body

Aan het einde van het voorbeeld moet je nu het de volgende code hebben =>

Wat gaat er nu mis?

1. Broodje kaas 🪤
2. Ik weet niet wat widgets zijn
3. Mijn afbeelding laad niet
4. Mijn compiler is verkeerd afgesteld

I am rich: pubspec.yaml

In de projectfolder zijn veel mapjes en files aangemaakt. Onder andere ook een file genaamd 'pubspec.yaml'.

Deze file is o.a. verantwoordelijk voor de dependencies van het project. De docent laat nu zien hoe je een image dependency moet toevoegen.

Dependencies

De letterlijke vertaling van dependencies is 'afhankelijkheden'. Als er een specifiek lettertype, afbeelding of software library gebruikt moet worden, dan zal dit (in het geval van Flutter) in de pubspec.yaml file aangegeven moeten worden, want het project is hiervan 'afhankelijk'.

I am rich: body

Aan het einde van het voorbeeld moet je nu het de volgende code hebben =>

Waarom zou je een scaffold gebruiken?

1. Het geeft structuur in de app pagina
2. Omdat u dat zei
3. Het maakt het programmeren makkelijker
4. Omdat ik dan 3 elementen kan toevoegen

Waar bestaat een Scaffold uit?

1. Een steiger, body en navigation bar
2. Een hamburger menu en navigation menu
3. Een topbar, body en bottom property
4. Een appbar, body en bottom property

Wat is hot reload?

1. Een refill van mijn hot dog 🌭
2. De compiler bouwt alleen de elementen die zijn veranderd opnieuw
3. Snel een mobile application te bouwen
4. De naam van de Flutter mascotte

Hoe heet de file waar jij je depencies in moet aangeven?

Freestyle

10 min

Je mag ook de uitdagingen maken in de volgende dia's.

Extra uitdaging

Kan jij de achtergrondkleur van de appbar en body veranderen?

Extra extra uitdaging

Maak de I am poor app.

Verander het plaatje en de titel zodat dit de 'I am poor' app wordt.

Lesdoelen

1. Jij gaat je eerste app in het Flutter framework maken.
2. Jij kan straks in eigen woorden uitleggen wat:
3. ...Hot reload is
4. ...een Scaffold is
5. de pubspec.yaml file is

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 😴