Flutter -- Beispiel 5 Bildschirmwechsel 2 Drawer

So hier gehts zum zweiten Teil des Beispiels Rund ums Thema Bildschirmwechsel. Wer den ersten Teil noch einmal anschauen möchte, zu dem gehts hier. Wer direkt zum Quellcode möchte..clickt hier. Jetzt geht es um den drawer. Er ist über den Scaffold zugänglich, wie wir hier sehen:

Ein Drawer ist ein seitliches Navigationselement, das wir mit einfachen Mitteln erzeugen können. Hier bietet sich der ListView an:

drawer: Drawer( 

  ListView (

  children: <Widget>[

     DrawerHeader(

                            )

                                ], //<Widget>

                        ), //ListView

                       ),//Drawer

Der DrawerHeader wird dabei als erstes Element in den ListView implementiert. Ihm können wir die üblichen Formatierungen mitgeben, wie Farbe, BoxDecoration. Nach dem DrawHeader tragen wir ListTile Objekte in die Widget Liste von Drawer ein. Diese Einträge fungieren an sich als "Menupunkte", welche man in einer fertigen App anwählen kann. Dementsprechend haben sie auch einen onTap() Eintrag. Im Funktionskörper von onTap haben wir in unserem Beispiel einen einfachen Code, der den Drawer wieder verschwinden lässt: Navigator.pop (context)

Damit das ganze funktioniert, fügen wir dem Code einen "Globalen Schlüssel" hinzu.:

GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

Dies gleich nach " class ... extends StatelessWidget". Den Schlüssel, den wir durch diesen Code erhalten, tragen wir wiederum beim Scaffold ein mit:

key: _scaffoldKey,

Jetzt geht es darum, den Auslöser zu implementieren. In unserem Fall ein IconButton in der AppBar. Die Codestelle sieht so aus:

leading: IconButton(icon: Icon(Icons.menu), onPressed: () {

_scaffoldKey.currentState.openDrawer();

An sich eine ganz einfache Sache.. 😊

Wer noch auf der Suche von guten Artikeln zu Flutter ist..hier habe ich eine kleine Sammlung begonnen!