Week 1: Installatie & introductie Flutter

Multi-Platform
Multi-Platform programmeren met Flutter
1 / 31
suivant
Slide 1: Diapositive
Application DevelopmentMBOStudiejaar 2

Cette leçon contient 31 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 120 min

Éléments de cette leçon

Multi-Platform
Multi-Platform programmeren met Flutter

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Achtergrond informatie
Wat gaan wij doen tijdens AD (Application Development)?

Slide 2 - Diapositive

Cet élément n'a pas d'instructions

Nieuwe framework
Wij gaan een nieuwe hybride / multi-platform framework ontdekken.

Op de volgende slide is een link naar de website van Flutter. Bekijk de website en beantwoord de vraag erna.

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Slide 4 - Lien

De leerlingen moeten naar de website gaan en zoeken wat je kan met deze framework.
Wat kan je met Flutter?
A
Een mobiele app maken
B
Jesse jaloers maken met een term die hij niet weet
C
Een desktop applicatie ontwikkelen
D
Een website bouwen

Slide 5 - Quiz

Cet élément n'a pas d'instructions

In welk taal wordt Flutter geprogrammeerd?
A
JavaScript
B
ReactNative
C
Kotlin
D
Dart

Slide 6 - Quiz

Cet élément n'a pas d'instructions

Lesdoelen
  1. Jij gaat Flutter installeren via een tool genaamd Chocolatey (Homebrew voor MacOS of Linux).
  2. Aan het einde van de les heb jij jouw omgeving klaargezet voor Flutter.
  3. Aan het einde van de les heb jij je eerste app gemaakt.

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

Disclaimer
  • Dit vak wordt pittig
  • We gaan snel door onderwerpen zoals OOP
  • De focus ligt op geavanceerdere onderwerpen zoals:
  • Design patterns
  • Software architectuur
  • API's en meer...

Slide 8 - Diapositive

Give 'm the speech.
Wat heb je nodig?
Een laptop

Slide 9 - Diapositive

Give 'm the speech.
Waarom Flutter?

Slide 10 - Diapositive

Uitleggen dat Flutter zeer populaire wordt en in Nederland ook steeds vaker ontdekt wordt. In het buitenland is het al zeer populair.

AH, ANWB, Jumbo etc zoeken Flutter devs.
Huisregels
  • Loop voor het einde van de timer binnen
  • Niet eten (drinken mag wel)
  • Mobieltje niet op tafel
  • Toileteren? Geen probleem maar geef het wel aan

Slide 11 - Diapositive

Voor wij beginnen zijn er wel huisregels. Jullie hebben niet eerder van mij les gehad en daarom is het goed dat wij de huisregels doornemen in mijn lessen.

  • Aan het begin van de les zet ik een timer; Als de timer voorbij is begint de les. Kom je daarna binnenlopen dan moet jij je te laat melden.
  • Niet eten in de klas, drinken mag wel.
  • De les duurt 2 uur, je mag na een uur even je mobieltje checken voor een paar minuten. Dit geef ik zelf aan.
  • Als je naar de toilet moet, geef dit dan aan.

Installeren van Flutter
Wij gaan Chocolatey installeren. Dit is een package manager voor Windows.

Voor MacOS of Linux gebruikers gaan wij Homebrew installeren.

Slide 12 - Diapositive

Give 'm the speech.
Installeren van Flutter
Voor Windows gebruik de volgende link:

Voor Mac en Linux gebruik de volgende link:

Slide 13 - Diapositive

Give 'm the speech.
Installeren van Flutter
Volg de instructies van Chocolatey.


Slide 14 - Diapositive

Give 'm the speech.
Installeren van Flutter
Volg de instructies van Homebrew.


Slide 15 - Diapositive

Give 'm the speech.
Installeren van Flutter
Gebruik de volgende commando in Chocolatey:
choco install flutter

Gebruik de volgende commando in Chocolatey:
brew install flutter


Slide 16 - Diapositive

Give 'm the speech.
Installeren van Flutter
Installeer Android Studio (heb je nodig voor emulators)
Run de volgende commando's:

Installeer het via Chocolatey
choco install androidstudio

Installeer het via Homebrew
brew install android-studio


Slide 17 - Diapositive

Give 'm the speech.
Installeren van Flutter
Verifieer de installatie van Flutter met de volgende commando:

flutter doctor -v

Als je daarna een lijst krijgt met checks dan herkent je OS de 'flutter' keyword en dat is een goed teken.

Slide 18 - Diapositive

Give 'm the speech.
Installeren van Flutter
Open Android Studio en ga naar de SDK manager.

Installeer:

Slide 19 - Diapositive

Give 'm the speech.
Installeren van Flutter
Open Android Studio en ga naar de SDK manager.

Installeer:

Slide 20 - Diapositive

Give 'm the speech.
Installeren van Flutter
In Android Studio ga je daarna naar Virtual Device Manager.

Wij moeten een Android Emulator aanmaken.

Slide 21 - Diapositive

Give 'm the speech.
Installeren van Flutter
Nu maken wij een nieuwe emulator aan.

Maak een Pixel 5 aan zonder verder iets aan te passen.

Start de emulator.

Slide 22 - Diapositive

Give 'm the speech.
Installeren van Flutter
Verifieer de installatie van Flutter met de volgende commando:

flutter doctor -v

Nu zullen er meer groene checks zijn.

Slide 23 - Diapositive

Give 'm the speech.
VS code instellen
Start VS Code op en installeer de Flutter extension.

Na de installatie kan je met control (of command) + shift + P een nieuwe Flutter project aanmaken.

Slide 24 - Diapositive

Give 'm the speech.
VS code instellen
Kies waar jij je het mapje 

Slide 25 - Diapositive

Give 'm the speech.
VS code instellen
Geef jouw app een naam.

Let op jouw app naam mag alleen kleine letters bevatten en geen spaties

Slide 26 - Diapositive

Give 'm the speech.
Jouw eerste app
Gefeliciteerd! Je hebt je eerste app gemaakt! 

Je kan deze runnen door naar de main.dart file te gaan en op het pijltje te drukken die boven de main() staan.

Slide 27 - Diapositive

Cet élément n'a pas d'instructions

Extension installeren
Om VS Code klaar te maken voor Flutter development moeten wij eerst een paar extension installeren.

Op de volgende pagina staat een lijst die je moet installeren.

Slide 28 - Diapositive

Cet élément n'a pas d'instructions

Extensions installeren
Om de extensions te installeren moet je de workspace file op Onderwijs Online overkopieren naar de root folder van jouw project.

Slide 29 - Diapositive

Cet élément n'a pas d'instructions

Lesdoelen
  1. Jij gaat Flutter installeren via een tool genaamd Chocolatey (Homebrew voor MacOS).
  2. Aan het einde van de les heb jij jouw omgeving klaargezet voor Flutter.
  3. Aan het einde van de les heb jij je eerste app gemaakt.

Slide 30 - Diapositive

Cet élément n'a pas d'instructions

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 😴

Slide 31 - Sondage

Cet élément n'a pas d'instructions