Apps ontwikkelen met Flutter

1 Wat is Flutter? 1
1.1 Wat kunt u met Flutter? 2
1.2 Wat is Dart? 3
1.3 Flutter en andere systemen 4
1.4 De toekomst van Flutter 5

2 Uw eerste Flutter-app 7
2.1 Wat hebt u nodig? 8
2.2 De Flutter SDK installeren 9
2.3 Beginnen met Android Studio 12
Android Studio installeren 12
Het welkomscherm en de Flutter-plug-in 13
2.4 Een demo-app maken 14
2.5 Android Studio gebruiken 15
De Project Explorer en de structuur van de app 16
Vensters 17
Flutter-vensters 17
Menu- en knoppenbalken 18
2.6 Testen op een virtueel Android-apparaat 19
2.7 Testen op een echt Android-apparaat 20
2.8 Testen op een virtueel iOS-apparaat 22
iOS-simulator op een Mac 22
iOS-emulator op andere computers 23
Testen met een iOS-simulator of -emulator 23
2.9 Testen op een echt iOS-apparaat 23
Instellingen van het Developers-account 24
De app signeren 24
Een apparaat aansluiten en testen 26
Service protocol 26
2.10 Flutter geschikt maken voor webapps en desktopapps 27
De web- en desktopoptie activeren 27
Web- en desktopapps testen 28

3 Dart begrijpen 31
3.1 DartPad 32
Nieuwe pads 32
Basisregels in Dart 33
3.2 Functies en parameters 34
Parameters 36
Waarden retourneren met return 38
Fat arrows 39
3.3 Variabelen 39
Sterke typering 39
Variabelen zonder type 41
Onveranderlijke variabelen 41
Null 42
3.4 Namen in Dart 43
3.5 Gegevenstypen 44
Integer (int) 44
Getal met dubbele precisie (double) 44
Boolean (bool) 45
Tekst (String) 45
Reeks (List) 46
Map 48
Meer gegevenstypen 48
3.6 Typen omzetten 49
Van String naar getal 49
Afronden op hele getallen 50
Afronden op aantal decimalen 51
3.7 Klassen, constructors en finals 51
Klassen 51
Overerving 54
Functies of variabelen overschrijven 55
Standaardconstructors 56
Initialisatielijsten 58
Finals 59
3.8 Methodes en eigenschappen bij typen en klassen 59
Constructors 61
Properties 62
Methods 63
Static methods 63
3.9 Operatoren 64
Rekenkundige operatoren 64
Wortels en machten: importeren 65
Toewijzingsoperatoren 65
Vergelijkingsoperatoren 66
3.10 Beslissingen nemen 68
Als…dan 68
Korte notatie 70
Switch 70
3.11 Lussen 71
For-lus 71
For…in-lus 73
While 74
3.12 Anonieme instanties en functies 75
Een timer met een callback 75
Stop de tijd 77
Anonieme functies 77
3.13 Recursieve functies 78
Periodic-constructor 79
3.14 Synchroon en asynchroon programmeren 80
Futures 82
Foute futures 83
Asynchrone functies 84
3.15 Fouten maken 85
3.16 Meer Dart 87

4 Flutter-widgets 89
4.1 Wat zijn Flutter-widgets? 90
Alles in Dart 90
Standaardwidgets 90
Widgets, elementen en states 91
Anonieme instanties 92
Dart-bestanden 93
4.2 Widgets in de demo-app 94
main() en MyApp 95
MyHomePage() 96
4.3 Stateless en stateful widgets 98
Stateless widgets 98
Stateful widgets 99
States gebruiken 101
initState() en dispose() 103
4.4 Basiswidgets 104
MaterialApp 104
Scaffold 105
Center-widget met de Flutter Outline 106
Een basisapp maken en bewaren 107
4.5 Rijen, kolommen en containers 109
Rijen of kolommen maken 110
AxisAlignment 112
Absolute grootte 113
Relatieve grootte: Expanded en Flexible 114
Nesting 115
Stapelen 116
Overzicht in de code 118
Scrollen 118
Informatie over widgets 120
4.6 Menubalk 120
Routes maken 121
De controller 121
De stack 122
De knoppenbalk 123
Pictogrammen 124
4.7 Dynamische navigatie 125
Twee routes maken 126
De navigatieknoppen activeren 127
4.8 Afbeeldingen 129
Een afbeelding gebruiken 130
4.9 Geluid 134
Geluidsbestand toevoegen 135
pubspec.yaml aanpassen 135
Een player importeren 135
De player gebruiken 137
4.10 Video’s 139
Plug-in installeren 139
Video laden en starten 140
De beeldverhouding vastzetten 141
De video interactief maken 142
Herhalen 143
De interactiviteit uitbreiden 143
Van stateless naar stateful 144
4.11 Teksten en opmaak 147
Padding en marge 147
Tekststijlen 149
Tekstgrootte 150
Meerdere stijlen in één tekst 151
Standaardstijlen 151
Cupertino 153
Lettertypen toevoegen 153
4.12 Interactie 156
GestureDetector 156
Knoppen 161
4.13 Gegevensinvoer 163
Element verbergen met Checkbox 164
Switch 166
Keuzerondjes maken met Radio 166
Schuifregelaars 167
Keuzelijst 168
Tekstinvoer 169
iOS-elementen 170
4.14 Animatie 172
Zelf een animatie definiëren 172
De status van de animatie 175
Animatie beëindigen 175
Gemakkelijker animeren 176
4.15 Figuren tekenen 178
CustomPaint maken op basis van schermgrootte 178
Painter maken 179
Tekenopdrachten geven 180
Tunnels en bogen 181
Canvasanimatie 182
4.16 Lijsten, eigen widgets en keys 185
Een lijst met kaarten 185
Herhaling voorkomen 186
Eigen widgets maken 187
Eigen widgets gebruiken 188
Dismissible en keys 188
Key 189
4.17 Gegevens doorgeven 190
Inherited widget 191
updateShouldNotify 191
Inherited widget maken 192
Inherited widget gebruiken 193
updateShouldNotify gebruiken 194
Een bibliotheek importeren 194
Reageren op veranderingen met streamcontrollers 196
Een streamcontroller maken 196
Inherited widget opruimen 197
Reageren op de streamcontroller 197
Flexibele controllers 198
4.18 Gegevens bewaren en futures gebruiken 199
shared_preferences importeren 199
Stateful widget met teller 200
Gegevens opslaan 201
Gegevens lezen 202
Gegevens uit een future halen 203
FutureBuilder 203
4.19 Meer widgets 206

5 Een complete app 209
5.1 De app in dit hoofdstuk 210
Functionele eisen 211
Broncode 212
5.2 Fouten opsporen en analyseren 213
Foutmeldingen 213
Een app debuggen 214
5.3 De basisstructuur 216
Een lege app 216
Schermen 217
Knoppenbalk 217
Bibliotheek 219
5.4 Structuur van de quiz 220
5.5 De lay-out voor het vraagscherm 223
Eerste rij: vraagnummer en score 224
Tweede rij: de afbeelding 224
Derde rij: de vraag 226
Antwoordopties 227
Antwoordknoppen 227
5.6 Vragen 230
Afbeeldingen toevoegen 232
5.7 Inhoud in de quiz 232
In quiz.dart 232
In vraag.dart 233
In antwoordKnop.dart 235
Optie: flexibel aantal antwoorden met control-flow 237
5.8 Interactieve antwoordknoppen 239
Interactiviteit detecteren 240
Kleurovergang animeren 240
Optie: meer animaties met dezelfde controller 243
Optie: geluid 244
Antwoord verwerken met een parameterfunctie 246
5.9 Het uitslagscherm 250
De score doorgeven 250
De uitslag 251
Een herstartknop 252
De quiz herstarten met een stream 252
Optie: state van de quiz bewaren 256
5.10 Optie: uitslag versturen 257
Mailserver 257
De mailer importeren 258
De mailknop 259
Het dialoogvenster 260
De mailfunctie 261
Smtp-server 262
Een bericht maken 262
Bericht versturen 263
Variabelen in de mailfunctie 264
De score 265
Het opgegeven e-mailadres 265
Datum en tijd 266
Variabelen in het bericht 266
Het invoerveld valideren 267
De gebruiker informeren 270
Uitslag ombouwen naar stateful 270
Variabele tekst in uitslagscherm 271
Functie in _UitslagState 272
Functie doorgeven aan MailDialoog 273
Status aanpassen vanuit MailDialoog 273
De mailfunctie verder verfijnen 274
5.11 Optie: vragen uit een online bron 276
Online bestanden 276
Vraag- en afbeeldingsbestanden 276
Vragen ophalen 278
Afbeeldingen ophalen 280
Start van de quiz 281
Antwoorden verbergen 283
5.12 Infoscherm en beginscherm 284
Lay-out van het infoscherm 284
Links toevoegen 286
Optie: meertaligheid 287
Welkomscherm 290

6 Een app afronden en publiceren 293
6.1 Pictogram en opstartscherm 294
Pictogram en splashscreen maken 294
Pictogram instellen 295
Splashscreens maken 297
Splashscreen voor Android 297
Android-splashscreens toevoegen 299
Launchscreen voor iOS 300
iOS-launchscreens toevoegen 300
6.2 Controles en instellingen 302
Dart Analysis 302
Pubspec.yaml 302
AndroidManifest.xml 303
build.gradle 304
iOS-instellingen in Xcode 305
Signing and capabillities 306
Testen 306
6.3 Een Android-app signeren en compileren 307
Keystore maken 307
Certificaat in pubspec.yaml opnemen 308
Een appbundle maken 308
6.4 Een app in Google Play Store plaatsen 310
Google Play Console en developersaccount 310
Nieuwe app maken 310
Winkelvermelding 310
App-releases 312
Contentclassificatie 314
App-content 314
Prijzen en distributie 314
App indienen 315
6.5 iOS-certificaten & -identifiers 316
Distributiecertificaat maken 317
Bundle-identifier maken 318
Provisioning profile maken 319
6.6 iOS-app aanmaken en uploaden 319
App aanmaken in App Store Connect 319
iOS-build maken vanuit Android Studio 321
Build valideren en uploaden vanuit Xcode 321
Handmatig signeren 322
6.7 Een iOS-app testen met TestFlight 323
6.8 De app weergeven in de Apple App Store 324
App Store information 325
iOS app 325
Screenshots 325
Beschrijvingen en URL’s 326
Build 327
App Store Icon 327
Copyright 327
Age Rating 327
App Review Information 327
De app indienen 328
6.9 Webapps en desktopapps exporteren 329
App exporteren 329
App distribueren 330

Tot slot 331
Index 333