Flutter -- Tutorial Teil 5 Navigator

Im letzten Teil dieser Serie sind wir auf das Stateful und das Stateless Widget eingegangen.

• Flutter -- Tutorial Teil 1 Grundsätzliches
• Flutter -- Tutorial Teil 2 State und Co
• Flutter -- Tutorial Teil 3 Starter Code 
• Flutter -- Tutorial Teil 4 StatefulWidget StatelessWidget
• Flutter -- Tutorial Teil 5 Navigator -- Du bist hier !

Wir erinnern uns: das Stateless Widget ist an sich nicht dazu gedacht Inhalte zu enthalten, auf die wir später direkt zugreifen wollen. Das Stateful Widget unterstützt genau dieses.

Ein Großteil von den Möglichkeiten die Flutter bietet, unterstützt uns bei der Erstellung einer Benutzeroberfläche. Diese ermöglicht dem Benutzer z.b. Buttons zu clicken / drücken, Texteingaben zu machen, etwas abzuspeichern. Dabei bestehen die wenigsten Benutzeroberflächen nur aus einem Bildschirm / View, sondern implementieren meistens mehrere Screens, um den Benutzer durch die App zu navigieren.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import 'package:flutter/material.dart'; void main() => runApp(MeineApp()); class MeineApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Beispiel', theme: ThemeData( primarySwatch: Colors.blue, ), home: MeineHomePage(title: 'Flutter Demo Home Page'), ); }

Im Code oben implementieren wir eine MaterialApp  und setzen mit ThemeData die Farbe blau. Als home: Eintrag der MaterialApp definieren wir MeineHomePage und geben einen titel mit auf den Weg.

Bevor wir hier weiter machen, sollten wir uns bewusst sein das es in Flutter verschiedene Möglichkeiten gibt zwischen Screens zu wechseln.
In diesem Beispiel verwenden wir eine MaterialApp. Diese wurde durch den Import von material.dart zugänglich.
material bietet uns aber auch eine Möglichkeit eine Navigation einzubauen, die nach dem Prinzip eines Stapels funktioniert.
Wenn wir uns verschiedene Bildschirme als Stapel vorstellen, dann ist das jeweils oberste Element auf diesem Stapel der sichtbare Screen.
Wollen wir den Bildschirm darunter anzeigen, müssen wir das oberste Element im Stapel entfernen.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

class MeineHomePage extends StatelessWidget { MeineHomePage({Key key, this.title}) : super(key: key); final String title; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Page'), ), body: new Center( child: RaisedButton( onPressed: () { Navigator.push( context, new MaterialPageRoute( builder: (context) => new ZweiterBildschirm())); }, child: Text('Hier clicken'), ), ), ); } }

Im Code oben implementieren wir nun den ersten Bildschirm. Aus den Möglichkeiten die uns material.dart bietet, verwenden wir Scaffold, AppBar , RaisedButton und, das interessante für diesen Artikel, Navigator.push.
Wir haben also MeineHomePage und "stoßen", wenn der RaisedButton angeclickt wird, das Widget ZweiterBildschirm zuoberst auf den Stapel.
Dies geschieht mit der Funktion Navigator.push(..). Sie nimmt als Parameter einen context und eine neue MaterialPageRoute. MaterialPageRoute baut dann den zweiten Bildschirm auf.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

class ZweiterBildschirm extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Zweiter Bildschirm'), ), body: new Center( child: RaisedButton( onPressed: () { Navigator.pop(context); }, child: Text('hier clicken'), ), ), ); } }

Oben sehen sehen wir jetzt den ZweiterBildschirm. Ansonsten ist im Code nicht viel neues, ausser Navigator.pop(context).
Wenn der Button in diesem, zweiten, Bildschirm geclickt wird, entfernt Navigator.pop(..) das oberste Element des Stapels und bringt so, wieder unseren ersten Bildschirm zum Vorschein.

Dieses Beispiel ist sehr einfach. In einem grösseren Projekt würde man die einzelnen Bildschirme wahrscheinlich in eigene Files auslagern.
Bis Bald!