MAD les 8: Functionaliteiten, tests, prototype

• Mobile Application Design
• MBO
• Studiejaar 2

Mobile Application Design

Terugblik

• Examenuitleg
• Maak jouw tweede ontwerp af.
• Ontwerp jouw app in Balsamiq.
• Beschrijf in jouw portfolio in een nieuw hoofdstuk wat de voordelen en nadelen van jouw eerste en tweede ontwerp zijn.
• Verwerk de feedback van jouw presentatie in jouw portfolio.
• Jij ontwerpt tests over de gebruikersinterface.
• Beschrijf de verbeteringen, aan de hand van de tests, in jouw portfolio.
• Onderbouw jouw prijzen.

Waar staan wij

• Week 2 blok 2
• Week 7 laatste les
• Week 8 examinering
• Week 9 bespreken
• Week 10 herkansing
• Acatec bekijken

Over de examinering

• Jij hebt jouw portfolio ingeleverd op Acatec.
• Jij verschijnt op de examineringsdatum in het betreffende lokaal.
• Jij zit in een klas tegenover twee examinatoren.
• De examinator gaat jou een opdracht geven.
• Jij doorloopt dezelfde stappen als in deze lessen om tot een ontwerp te komen.
• De examinatoren toetsen jou aan dezelfde criteria als beschreven in de leerdoelen op Acatec.

Over de examinering

• 1e dag: Maakt een eerste concept voor de vormgeving van de mobile app.
• 2e dag: Presenteert de vormgeving van het mobile app-concept en verwerkt feedback.
• 3e dag: Maakt een vormgevingsontwerp voor de gebruikersinterface van de app en test dit.
• 4e dag: Vertaalt het definitief app vormgevingsontwerp naar een visueel prototype.
• 5e dag: Vertaalt het definitief app vormgevingsontwerp naar een visueel prototype.

Doelen deze les

• Wij kunnen alleen verder als iedereen zijn of haar portfolio heeft gemaakt!

• Het bouwen van een BMI calculator.
• Aan de hand van de kennis die jij nu op doet, zal jij (grotendeels) jouw app idee kunnen maken.

Presenteer je wireframes

Vandaag presenteren jullie je 1e en 2e ontwerp en je legt uit wat de verschillen zijn.

Nu verder met Flutter

Wij gaan een BMI Calculator maken.

Waarom? Omdat er veel technieken in zitten die ons bekend maken met de taal en framework.

Na het maken van deze app, ben jij in staat om een prototype te maken van jouw app idee.

Nu verder met Flutter

Docent laat nu een video zien

Skeleton maken

Wij gaan eerst skeleton code maken. Dit houd in dat wij het fundament waar uit wij gaan verder bouwen, gaan maken. Laten wij dit samen doen.

Skeleton maken

Docent laat nu zien hoe je de skelet moet maken.

Wij kunnen elke knop en elke pixel precies aanpassen zoals wij willen. Is dat handig om dat voor alles in de app te doen?

1. Ja, ik wil alles kunnen aanpassen
2. Nee, want het is veel werk
3. Ja, want het is niet veel werk
4. Alle antwoorden zijn correct

Thema's

Thema's zijn in het leven geroepen om ons het leven makkelijker te maken.

Consistent door alle pagina's die jij maakt.

Ook Flutter heeft thema's. Laten wij dit samen doorlopen.

Stateful widget vs.

Stateless widget

Stateful vs stateless widgets

State: When things are as they are.

When something in your UI needs to change (color, form, number, etc), use stateful widgets.

When something won't change and is 'static', use stateless widget.

Thema's

Op dit moment geen thema.

Alles heeft de default kleur.

api.flutter.dev

Thema's

Probeer maar eens een dark theme.

class BMICalculator extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData.dark(),

      home: InputPage(),

    );

  }

}

Thema's

Probeer maar eens een dark theme.

class BMICalculator extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData(primaryColor: Colors.red),

      home: InputPage(),

    );

  }

}

}

Thema's

Opdracht: accentColor is een property waarmee je overige elementen kan kleuren. Zoek die in de documentatie van de ThemeClass en hoe je hem moet gebruiken.  Maak de accentColor paars.

Thema's

Hier kan je aan blijven sleutelen totdat jij de gewenste kleuren hebt bereikt voor jou merk/bedrijf.

Thema's

De thema die wij moeten namaken is op de volgende website te vinden.

dribbble.com

www.colorzilla.com

Thema's

De kleuren achterhalen in een design kan je door gebruik te maken van tools op het internet. Een van deze tools heet ColorZilla.

Gebruik deze tool en richt met je muis op de kleur van de achtergrond.

Met deze tool krijg je de ARGB kleuren.

Thema's

Nu je de kleur weet, verander de achtergrond kleur van de app.

Gebruik hiervoor de Color method.

Colors

ARGB is bijvoorbeeld: #0A0E21

Wanneer je de tool gebruikt krijg je RGB combinatie.

Wat mist er in de code die ColorZilla geeft?

1. De R van ARGB
2. De B van ARGB
3. De A van ARGB
4. De G van ARGB

Colors

ARGB is bijvoorbeeld: #0A0E21 <<< dit is de hexadecimale code van RGB.

Maar wat wij missen is de transparantie.

api.flutter.dev

Colors

Maar wat wij missen is de transparantie.

Voeg deze eraan toe om het af te maken.

Gebruik de scaffoldBackgroundColor en stel dezelfde kleur in als bij primaryColor.

Wat valt je nu op in de scaffold body?

1. De kleuren zijn verschillend
2. Er is een app bar met witte tekst
3. De witte tekst in de app bar en niet in de body
4. Ik zie geen verschil

Colors

Echter er is geen specifieke property om aan te passen om de body tekst wit te krijgen

Samenvatting les

Doelen volgende les

Presenteren nieuw ontwerp.

Feedback tijdens het presenteren.

Verder met Flutter:

BMI Calculator maken.