Flutter les 2: Create I am rich app!

• Mobile Application Design
• MBO
• Studiejaar 2

Mobile Application Design

Terugblik

• Installatie Jetbrains toolbox compleet.
• Installatie Balsamiq compleet.
• Installatie Flutter compleet.

Doelen deze les

1. Installeren Android Studio.
2. Instellen van Android Studio.
3. Maken van je eerste applicatie!

Installeer Android Studio via Toolbox

Open Android Studio

Open Android Studio via de Toolbox.

Ga naar de instellingen in Android Studio.

Flutter plugin installeren

1. Ga naar de plugins tab aan de linkerkant van de instellingen window.
2. In de zoekbalk, zoek naar 'flutter'.
3. Installeer de plugin.
4. Accepteer dat ook de Dart plugin geinstalleerd wordt.
5. Herstart de IDE.

Jouw eerste project

1. Druk op de knop 'Create Flutter project.
2. In het eerste scherm van de wizard, navigeer naar de SDK van jouw flutter directory. Bijvoorbeeld C:/src/flutter/.
3. Ga naar het volgende scherm.
4. Noem het project 'i_am_rich'.
5. Zorg ervoor dat het project in een mapje in OneDrive staat.
6. In het veld organization schrijf je com.mboutrecht.

Instellen van Android Studio

1. Druk op control + , voor Windows gebruikers.
2. Druk op command + , voor Mac gebruikers.

Ga naar Appearance > instellen Darkula theme 🧛🏻‍♂️.

Ga naar Editor > Fonts > instellen font size 18 🔎.

Ga naar Languages & Frameworks > Flutter> instellen format on save 👌🏼.

Android Virtual Devices

Het project is geinitialiseerd met standaard code. Om hiermee te spelen moet je eerst een viruteel apparaat hebben waar je het op kan testen.

Android Virtual Devices

1. Druk op de AVD Manager knop.
2. Maak een nieuwe Pixel 5 virtual device aan.
3. Laat alle instellingen zoals zij zijn.
4. Start de emulator en wacht tot hij is opgestart.
5. Selecteer in welk apparaat jij wilt gebruiken.
6. Druk op run. 

Kijk mee met de docent.

De docent demonstreert nu in de IDE wat je moet doen.

Blanko Material App maken

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(

));

Material Design

Design concept door Google.

Minder werk voor ons door gebruik te maken van dit bibliotheek.

Material Design website

https://www.material.io/

Hello World

void main() => runApp(MaterialApp(home: Text('Hello World')));

Centreren van onze tekst

Centreren

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(

home: Center(child: Text('Hello World')

)));

Code is onduidelijk geworden

Alles staat op 1 code regel.

dart fmt zorgt ervoor dat wij alles kunnen formatten.

Na elk haakje een comma.

Rechterklik in het veld en druk op "Reformat with dart fmt".

Nu hebben wij een indented structure.

Begin van onze app

De starting file is de main.dart.

Flutter zoekt eerst naar main() en kijkt daarna naar wat hij moet doen.

Wij kunnen de 'fat arrow' door curly braces. Hierdoor hebben wij nog betere structuur.

Inklappen en uitklappen van code

Linksboven zie je /.../. Dit is een boodschap van de Flutter team.

Ook in dart wordt // gebruikt voor commentaar/documentatie.

Schrijf boven in de regel boven de main functie.

"The main function is the starting point for all our Flutter apps."

Delete de commentaar boven.

Scaffold Widget

Bedoeld om 'common items' samen te voegen en op het scherm te plaatsen.

Delete de center widget.

In home property plaatsen wij de Scaffold().

Scaffold Widget

Centreren van onze tekst

Centreren van onze tekst

api.flutter.dev

AppBar class

Kijk naar de documentatie

De AppBar class geeft ons veel properties die wij kunnen instellen.

Onderaan de pagina staan nog meer

Titel toevoegen

Debug banner uitleggen

Flutter Inspector > More actions knop > Hide debug banner

Uitleg types

Kijk in de documentatie wat de property title als type verwacht.

Bekijk nu backgroundcolor.

www.materialpalette.com

Verander de achtergrond kleur

Zoek in de documentatie hoe je de achtergrondkleur kan veranderen.

Opdracht: Change the background.

De eerste opdracht die je krijgt is het veranderen van de achtergrond kleur.

Hoe verander je de achtergrondkleur van je AppBar?

1. backgroundColor: Color.naam_van_kleur[tint]
2. backgroundColor: Color.naam_van_kleur
3. Color.colors.groen
4. backgroundColor: Green

Kijk mee met de docent.

De docent demonstreert nu hoe je de kleur kan veranderen.

Spelen

Speel een beetje met jouw app.

Kijk in de documentatie hoe je de body kan toevoegen.

Als je dat hebt gedaan, verander daar de kleur van.

Vooruitblik: App Design

In de komende weken gaan wij ons focussen op het ontwerpen van de app voordat wij gaan coderen.

Het is goed om een visie te hebben wat de app moet worden.

Wij gaan hier onder andere Balsamiq gebruiken.

Extra uitleg images lokaal laden

Maak een map aan genaamd images.

Voeg toe aan Pubspec.yaml naar:

Images alternatief

Gebruik:

Image(image: NetworkImage('http://...'))

Extra uitleg icons

icons maken

Extra uitleg icons in AS

icons rond maken