Week 3: Mi Card App

• Application Development
• MBO
• Studiejaar 2

Week 3: mi card app

Week 3: Mi Card app

Lesdoelen

1. Jij gaat de I am poor app maken
2. Jij programmeert je eigen visitekaart app

Maak een nieuw project aan

Maak een nieuw project aan genaamd 'I am poor'.

Weet je niet meer hoe je dat moest doen? Kijk dan naar de dia's in de vorige les.

I am poor (30 min)

Deze app moet, net zoals de vorige app een:

- scaffold hebben

- titel hebben

- plaatje hebben die 'arm' representeert

Mocht je een plaatje willen maken dan is canva.com een leuke website om te bezoeken.

I am poor (uitleg)

De docent laat nu zien hoe de I am poor app gemaakt kan worden.

Korte pauze (5 min)

Je mag even je mobiel checken, drinken en naar het toilet.

Mi Card (45-60 min)

Deze app moet, net zoals de vorige app een:

- scaffold hebben

- titel hebben

- plaatje hebben die 'arm' representeert

Mocht je een plaatje willen maken dan is canva.com een leuke website om te bezoeken.

Mi Card

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

docs.flutter.dev

Layout in Flutter

Bekijk de vorige dia. In Flutter kan je elementen opbouwen in een scherm. Dat gebeurd (onder andere) door middels van twee prominente widgets.

In de volgende dia's staan vragen over de layout waar jij het antwoord op kan vinden in de link hiervoor.

Als jij een element in de verticale richting wilt positioneren, welke widget gebruik je dan?

1. VerticalWidget()
2. Row()
3. Box()
4. Column()

Als jij een element in de horizontale richting wilt positioneren, welke widget gebruik je dan?

1. Row()
2. Width()
3. Horizontal()
4. Column()

Bekijk de afbeelding hiernaast. Hoe zou jij de verschillende elementen plaatsen?

Je kan op de afbeelding klikken om te vergroten.

1. Ik heb hier enkel een column voor nodig
2. Een row gebruiken waarin ik een column gebruik. Daarna zet ik ieder element erin
3. Een column maken en daarna een row gebruiken om de elementen aan te maken
4. De body is voldoende om de elementen in te plaatsen

Maak je project schoon

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

Help de docent; Wat moet hij schrijven in het begin om een material app te maken?

Bekijk desnoods je code van de vorige opdracht.

1. 📞 Ik wil een hulplijn gebruiken.
2. Eerst moeten wij de runApp method gebruiken om aan te geven welke widget gebruikt moet worden.
3. Wij moeten beginnen met een scaffold en daar een column in zetten.
4. body: MaterialApp(appbar: Appbar(title: Text('Tekst'),),

Mi Card: het begin

Wij beginnen altijd met het volgende:

- Mocht het niet zo zijn, het importeren van material.dart

- De runApp method gebruiken

- Een material app maken en de home property gebruiken

Mi Card: Avatar

Kijk nu met de docent mee hoe de avatar geïmplementeerd moet worden.

Mi Card: naam (5 min)

Probeer nu de naam te implementeren.

Psst! Pro-tip

Wanneer je de style van jouw tekst wil aanpassen, dan moet je de style property gebruiken in de text widget. Gebruik daarna de TextStyle widget om de font te veranderen. Wil je weten welke properties de TextStyle widget heeft, richt je muis op de TextStyle object en lees de documentatie 🙃

Wat valt je op wanneer jij jouw naam wil programmeren?

De naam heeft een specifieke font

U heeft ons nog niet geleerd hoe de font te veranderen 😠

😱

Voor de naam en functie heb ik speciale fonts gebruikt. Wat moesten wij ook alweer doen wanneer ons project afhankelijk is van externe resources?

1. Ik moet dan weten welke zodat ik die kan downloaden
2. Ik moet de fonts downloaden
3. Ik moet gewoon naar de pubspec file gaan en de fonts toevoegen
4. All the above 🫠

Mi Card: naam

Kijk mee met de docent hoe dit te doen.

Google fonts downloaden kan je hier doen.

Psst! Pro-tip

Als je nu even oplet i.p.v. dit lezen, dan kan je het straks zelf doen voor de functie beschrijving tekst 😎

Mi Card: Text

Voor het maken van de tekst heb ik fonts gebruikt die nog niet geïnstalleerd waren.

Om de fonts te gebruiken moeten wij de style parameter gebruiken. Deze parameter neemt een TextStyle object aan. Bekijk het plaatje hiernaast.

Mi Card: Naam

Voor het maken van de tekst heb ik fonts gebruikt die nog niet geïnstalleerd waren.

Om de fonts te gebruiken moeten wij de style parameter gebruiken. Deze parameter neemt een TextStyle object aan. Bekijk het plaatje hiernaast.

Mi Card: Functie (5 min)

Doe nu hetzelfde voor de volgende tekst waarin jouw functie staat.

Mi Card: Functienaam (5 min)

Doe nu hetzelfde voor de volgende tekst waarin jouw functie staat.

Gebruik hiervoor de Roboto font.

Mi Card: Afstand creëren

We zien nu dat er een afstand is tussen de Divider (streepje) en de andere widgets.

Gebruik hiervoor de SizedBox widget.

Mi Card: Cards & ListTiles

Nu moeten wij de twee kleine kaarten maken met iconen.

Dit is een ListTile widget in een Card widget.

De docent demonstreert dit.

Mi Card: Cards & ListTiles

Na het maken van de cards en list tiles, gaan wij deze stileren. De tekst zit vaak te dicht op de rand of niet in het midden. Dit laat de docent ook zien.

Mi Card: Cards

Na afloop ziet jouw code voor de kaart er zo uit.

Mi Card: Jouw eigen visitekaart (15 min)

Maak nu jouw eigen visitekaart. Pas de widgets aan die wij hebben gebruikt of vervang/voeg toe tot jij het gewenste effect hebt bereikt.

Zet jouw Mi Card op Github en maak de readme netjes met plaatjes zodat een stage bedrijf jou kan vinden.

Lesdoelen

1. Jij gaat de I am poor app maken
2. Jij programmeert je eigen visitekaart app

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 😴