Week 1: Installatie & introductie Flutter

• Application Development
• MBO
• Studiejaar 2

Multi-Platform

Multi-Platform programmeren met Flutter

Achtergrond informatie

Wat gaan wij doen tijdens AD (Application Development)?

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.

flutter.dev

De leerlingen moeten naar de website gaan en zoeken wat je kan met deze framework.

Wat kan je met Flutter?

1. Een mobiele app maken
2. Jesse jaloers maken met een term die hij niet weet
3. Een desktop applicatie ontwikkelen
4. Een website bouwen

In welk taal wordt Flutter geprogrammeerd?

1. JavaScript
2. ReactNative
3. Kotlin
4. Dart

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.

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

Give 'm the speech.

Wat heb je nodig?

Een laptop

Give 'm the speech.

Waarom Flutter?

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

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.

Give 'm the speech.

Installeren van Flutter

Voor Windows gebruik de volgende link:

Website van Chocolatey

Voor Mac en Linux gebruik de volgende link:

Website van Homebrew

Give 'm the speech.

Installeren van Flutter

Volg de instructies van Chocolatey.

Give 'm the speech.

Installeren van Flutter

Volg de instructies van Homebrew.

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

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

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.

Give 'm the speech.

Installeren van Flutter

Open Android Studio en ga naar de SDK manager.

Installeer:

Give 'm the speech.

Installeren van Flutter

Open Android Studio en ga naar de SDK manager.

Installeer:

Give 'm the speech.

Installeren van Flutter

In Android Studio ga je daarna naar Virtual Device Manager.

Wij moeten een Android Emulator aanmaken.

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.

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.

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.

Give 'm the speech.

VS code instellen

Kies waar jij je het mapje 

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

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.

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.

Extensions installeren

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

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.

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 😴