Apps programmeren in Flutter

Apps programmeren in Flutter in de online-omgeving van Dartpad

Probeer het zonder installatie van software

Het programmeren van professionele apps is natuurlijk geen sinecure. Maar eenvoudige apps maakt u gemakkelijker dan u wellicht denkt. De eerste stappen zijn soms wat intimiderend: voor u één regel code schrijft, moet u een programmeer- en testomgeving downloaden, installeren en leren gebruiken. In deze tutorial slaan we deze stappen helemaal over. In de online-omgeving Dartpad kunt u gratis, snel en gemakkelijk experimenteren met het app-ontwikkelsysteem Flutter en de programmeertaal Dart. Probeer het zelf met behulp van deze drie-delige tutorial. Dit is deel 1.

Als u wilt beginnen met het maken van apps, dan is dit het ideale moment. Niet eerder was het zo gemakkelijk om native apps te maken en te testen voor zowel Android als Apple. Dat is mogelijk dankzij Flutter, het relatief nieuwe ontwikkelplatform van Google. Flutter is laagdrempeliger dan andere systemen, maar biedt toch eindeloze mogelijkheden om professionele apps te bouwen: grote bedrijven vertrouwen erop voor hun essentiële apps.

In het boek ‘Apps ontwikkelen met Flutter‘ leest u hoe u met Flutter begint. Zoals in de meeste programmeerboeken, gaat het eerste deel over de installatie van de onderdelen die u nodig heeft. Deze onderdelen zijn gratis, maar de installatie is wel een drempel voor mensen die eerst eens willen uitproberen wat Flutter nu eigenlijk is en of zij er mee aan de slag willen. Voor deze mensen is er de online-applicatie Dartpad. Daar kunt u met Flutter beginnen zonder iets te installeren. Er zijn beperkingen: als u een echte app van de code wilt maken of als u aanvullende Flutter-modules wilt gebruiken, dan heeft u echt ontwikkelsoftware nodig. Maar Dartpad is ideaal als u gewoon eens wilt proberen wat Flutter is en hoe u hierin onderdelen bouwt met Dart (de programmeertaal van Flutter). Dat gaan we doen in deze tutorial.

Wat gaan we maken?

In deze tutorial maakt u een eenvoudige app met een menubalk. Op de menubalk bevinden zich drie knoppen waarmee u naar drie verschillende pagina’s navigeert. De pagina’s hebben elk een andere kleur, maar zijn verder nog leeg. Bij een echte app zou u hierop informatie of interactieve onderdelen plaatsen. Deze mini-app geeft een beeld van de wijze waarop u in Flutter een gebruikersinterface maakt. Deze tutorial bestaat dus uit drie delen. In dit eerste deel maken we het eerste Flutter-scherm.

Stap 1: Dartpad

Eerst maken we een nieuwe, lege, online Flutteromgeving:

  • Ga in uw webbrowser naar https://dartpad.dev.
  • Klik linksboven op ‘New pad’. U krijgt de vraag of u de huidige inhoud wilt verwijderen (‘Discard changes ….’). Klik op ‘OK’.
  • U kunt nu kiezen tussen Dart (een omgeving waar u alleen de programmeertaal Dart gebruikt) of Flutter (waarin u ook Flutteronderdelen kunt maken). Kies Flutter en klik op ‘Create’.
  • Het scherm is verdeeld in twee delen. Links ziet u de code, rechts de uitvoer. Selecteer alle code en druk op uw toetsenbord op ‘Delete’. Het scherm is nu leeg en u bent klaar om te beginnen.

Stap 2: Een app starten

Voer de volgende regels in. Let even niet op de rode streep en de foutmelding die u krijgt bij ‘Scherm1’:

import 'package:flutter/material.dart';
main(){
runApp(Scherm1());
}

In de eerste regel importeert u het bestand ‘material.dart’. Dit definieert veel Flutter-onderdelen. U heeft het in bijna elke Flutter-app nodig.

In de regels daaronder definieert u een nieuwe functie met de naam ‘main’. Elke Flutter-app heeft een functie met deze naam en dit is altijd het startpunt van de app. Dit is de enige functie die automatisch start. Hier bestaat de functie maar uit één opdracht:

runApp(Scherm1());

De runApp-opdracht plaatst een Flutter-onderdeel, een zogenaamde widget, op het scherm. In dit geval plaatst de opdracht de widget ‘Scherm1’ op het scherm. Omdat deze nog niet bestaat, krijgt u een foutmelding.

Flutter in de online-omgeving van Dartpad

Stap 3: Een widget maken

Plaats nu de volgende regels onder de regels die u al heeft staan:

class Scherm1 extends StatelessWidget {
Widget build(BuildContext context) {
return Container(
color: Colors.red);
}
}

Hiermee maakt u een nieuwe klasse met de naam ‘Scherm1’. De toevoeging ‘extends StatelessWidget’ zorgt ervoor dat de klasse alle kenmerken van een zogenaamde StatelessWidget krijgt. Een van die kenmerken is dat de klasse een build-functie moet bevatten die met code aangeeft wat er op het scherm moet staan. Dat ziet u in de volgende regels: de build functie retourneert een zogenaamde container: een element dat in dit geval het hele scherm in beslag neemt. We kunnen de container een kleur geven met de instelling ‘color’.

Het voert te ver om hier stil te staan bij begrippen als klasse, widget en (build)context . Als u verder gaat met Flutter, komt u die vanzelf tegen. Let hier wel goed op de haakjes. Elk blok dat u met haakjes opent, moet u ook weer afsluiten. Soms zijn dat accolades (bijvoorbeeld om het begin en eind van een klasse of functie aan te geven). Soms gebruikt u gewone haakjes (bijvoorbeeld om alle instellingen die bij een widget horen te omvatten).

Als u nu op de knop ‘Run’ klikt, ziet u het resultaat. De nieuwe widget ‘scherm1’, die alleen uit een rood vlak bestaat, verschijnt op het scherm.

In het tweede deel van deze tutorial gaan we hier twee schermen aan toevoegen. In deel drie maken we een menubalk waarmee de gebruiker tussen de schermen kan navigeren.

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.