Apps programmeren in Flutter
Informatica

Apps programmeren in Flutter-2

Een reactie plaatsen

Dit is deel 2 van de tutorial het maken van van 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. In het eerste deel gingen we aan het werk in Dartpad en maakten we een widget ‘scherm1’. In dit vervolg maken we meer widgets en creëren we een basisscherm.

Stap 4: Meer widgets maken

Ons doel is om een app te maken waarmee de gebruiker tussen drie schermen kan schakelen. Daarom voegen we eerst twee schermen toe. Dat gaat heel eenvoudig.

  • Kopieer de klasse Scherm1: dat is alle code uit stap 3.
  • Plak deze twee keer onder de andere code, na de laatste accolade. U krijgt nu een foutmelding bij de namen van de nieuwe klassen (omdat u vaker dezelfde naam gebruikt).
  • Verander de namen van de laatste twee klassen in Scherm2 en Scherm 3.
  • Verander de kleuren: color: Colors.red wordt color: Colors.blue bij Scherm2 en color:Colors.green bij Scherm3.

Als het goed is, is de code van de twee nieuwe klassen daarmee als volgt:

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

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

Als u de app start (met ‘run’) ziet u geen verschil: de nieuwe schermen zijn er wel, maar worden niet gebruikt. U kunt ze eventueel testen door ‘Scherm1’ in de runApp-opdracht van de mainfunctie te vervangen door Scherm2 of Scherm3.

Stap 5: Basisscherm maken

Voeg nu nog een klasse toe met de volgende code. Plaats deze na de main-functie en voor de klasse Scherm1:

class MijnEersteApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scherm1(),
);
}
}

Ook deze klasse heeft dus de kenmerken van een zogenaamde stateless widget. De klasse retourneert een ‘MaterialApp’. Dat is een Flutter-element (widget) die u op het scherm kunt plaatsen en waar u gemakkelijk allerlei app-onderdelen aan toe kunt voegen (dit gaan we in de volgende stappen doen). In de MaterialApp moet u aangeven wat het startscherm is met de instelling of parameter ‘home’. Hier maken we Scherm1 het startscherm.

Roep de nieuwe klasse aan in de main-functie. Deze wordt nu:

main(){
runApp(<strong>MijnEersteApp</strong>());
}

Als u de app nu test, verandert er niet veel. Scherm1 is het startscherm van de MaterialApp en verschijnt dus nog steeds op het scherm.

Stap 6: Basisscherm uitbreiden

Pas nu de klasse ‘MijnEersteApp’ als volgt aan:

class MijnEersteApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: <b>DefaultTabController(</b>
<b>    length: 3,</b>
<b>    child: Scaffold(</b>
<b>     appBar:AppBar( title: Text('Mijn eerste app'),),</b>
<b>    ),</b>
<b>   ),</b>
);
}
}

Hiermee vervangt u ‘Scherm1’ door een ‘DefaultTabController’. Een handige widget waarmee u een menustructuur maakt. Hierin geeft u, met length, het aantal pagina’s aan (3). Ook voegt u een ‘Scaffold’ (bouwsteiger) toe. Dat is een widget waarmee u de basis voor een app-scherm maakt. U kunt hierin een menu, bovenbalk en andere schermonderdelen definiëren. Hier voegen we alleen een bovenbalk toe met de parameter ‘appBar’.

Test de app: dankzij de scaffold en de appbar ziet het scherm er nu veel meer uit als een app. Merk wel op dat de gekleurde container verdwenen is. Dat is logisch: main opent nu de klasse ‘MijnEersteApp’, maar Scherm1, Scherm2 en Scherm3 worden niet meer aangeroepen.

In het 3de en laatste deel van deze tutorial maken we een menubalk waarmee de gebruiker tussen de schermen kan navigeren.

Meer weten over het ontwikkelen van apps in Flutter? Daar is een boek voor: Apps ontwikkelen in Flutter. Het boek bespreekt het hele traject, van installatie van de tools tot en met publicatie in de appstores. Maar het grootste deel gaat over het programmeren in Dart en het bouwen van apps. Uiteraard komt maar een heel klein deel van alle mogelijkheden aan bod. Doel is niet om compleet te zijn, maar om je echt een goed beeld van de structuur, de werking en de inzet van Flutter te geven. Je krijgt een solide basis die je met onlinebronnen gemakkelijk kunt uitbreiden. Maar ‘Apps ontwikkelen met Flutter‘ is niet theoretisch. Je leert door te doen, probeert code uit en maakt complete apps.

Geef een reactie

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