Dit is deel 3 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 het tweede deel maakten we meer widgets en creëerden we een basisscherm. In dit derde deel maken we een menubalk en voegen we pagina’s toe.
Stap 7: Een menubalk maken
We voegen een menubalk toe aan Scaffold. Breid de Scaffold widget in de klasse MijnEersteApp uit met de code hieronder. Bespaar u daarbij wat typewerk door gebruik te maken van de keuzelijst die u oproept met ctrl-spatie. Bijvoorbeeld: als de cursor binnen de haakjes van Scaffold staat, kunt u de eerste twee of drie letters van bottomNavigationBar typen. Als u daarna op ctrl-spatie drukt, krijgt u een lijstje met mogelijkheden waarin u de juiste optie kunt selecteren. De lijst bevat alleen opties die in deze widget bruikbaar zijn.
Scaffold(
appBar:AppBar( title: Text('Mijn eerste app'),),
<b>bottomNavigationBar: TabBar(</b>
<b> tabs: [</b>
<b> Tab(text: 'rood'),</b>
<b> Tab(text: 'blauw'),</b>
<b> Tab(text: 'groen'),</b>
<b> ],</b>
<b> ),</b>
),
De bottomNavigationBar bevat een TabBar-widget met daarin een reeks tabs. Reeksen staan in Dart (en dus in Flutter) altijd tussen vierkante haken.
Test de app. U ziet geen navigatiebalk, maar deze is er wel. Als u met de muispijl over het onderste deel van het voorbeeldscherm beweegt, ziet u de knoppen grijs oplichten. We kunnen ze zichtbaar maken door ze een kleur te geven. Dat kan binnen de bottomNavigationBar met de instelling ‘labelColor’:
Scaffold(
appBar:AppBar( title: Text('Mijn eerste app'),),
bottomNavigationBar: TabBar(
<b>labelColor: Colors.blue,</b>
tabs: [
Tab(text: 'rood'),
Tab(text: 'blauw'),
Tab(text: 'groen'),
],
),
),
Stap 8: pagina’s toevoegen
U heeft nu wel een navigatiebalk, maar deze doet nog niets. We kunnen de pagina’s binnen Scaffold toevoegen met de parameter ‘body’. Daarin komt een zogenaamde TabBarView-widget met een lijst pagina’s:
Scaffold(
appBar:AppBar( title: Text('Mijn eerste app'),),
<b> body: TabBarView(</b>
<b> children: [</b>
<b> Scherm1(),</b>
<b> Scherm2(),</b>
<b> Scherm3(),</b>
<b> ],</b>
<b> ),</b>
//rest van de code van Scaffold
),
Daarmee is de navigatie gereed. Test uw app. De volledige code vindt u onderaan dit artikel. Als het niet werkt, kijk dan waar de fout zit. Uiteraard is de navigatie in een verder lege app nog niet zo nuttig, maar u kunt zich vast voorstellen hoe u de pagina’s vult en met deze techniek snel een verzorgde app kunt maken.
Meer doen met Flutter?
Wilt u complete apps maken met Flutter? Begin dan met het boek ‘Apps ontwikkelen met Flutter‘. Deze tutorial is een bewerking van één van de paragrafen uit dit boek (4.6 Menubalk). In het boek bouwt u op vergelijkbare wijze allerlei losse onderdelen, maar ook een complete app. Bovendien behandelt het boek op heldere wijze alle fundamentele concepten die u nodig heeft bij het programmeren van Flutter-apps.
Dit was deel 3 van de tutorial. Deel een vind je HIER, deel 2 HIER. De complete code van de tutorial kun je HIER downloaden.
Mark van Heck is sinds zijn jeugd altijd geïnteresseerd geweest in het leren, proberen en gebruiken van nieuwe creatieve technologie. Hij vervulde verschillende functies in ICT en onderwijs. Sinds 2007 is Mark onafhankelijke professional op beide gebieden. Hij bouwt websites, digitale leeromgevingen, interactieve leermiddelen, interactieve boeken en apps. Daarnaast geeft hij trainingen en schrijft hij inhoud voor digitale en traditionele lesmethodes, lespakketten en ander leermateriaal over ICT en andere onderwerpen. De boeken van Mark vind je hier