Flutter 2021 - Gerüstebau (Android Studio)

Zuletzt war ich in dieser kleinen Flutter Serie am Punkt, wo Du MaterialApp im Einsatz gesehen hast.

Dir sollte nach den vergangenen Post auch klar sein, was es mit dem Einsatz von benannten Parametern in Flutter auf sich hat.

An sich aber stehen ich und Du noch Anfang der Möglichkeiten, die uns Flutter bietet. Wieso also nicht ein praktisches Hilfsmittel in Anspruch nehmen, das Flutter schon eingebaut hat ?

Es gibt Zeitgenossen, die mögen solche Hilfsmittel nicht. Sie machen lieber alles von Grund auf selbst. Solange man aber noch viel zu lernen hat, ist in meinen Augen nichts dagegen einzuwenden 😀

Scaffold - oder warum ein Gerüst nicht nur im Bau praktisch ist

Mit der Zeit haben sich bei Anwendungen für das Mobile gewisse Normen gebildet. Eine Appbar zum Beispiel, oder das man den Bildschirm scrollen kann, eventuell auch seitlich. Mit der Verwendung des Scaffold Widgets zeigst Du an, das deine Anwendung bereit ist, die bereits vorhandenen Features von Flutter zu nutzen:

Neu übergebe ich dem body: von MaterialApp das Scaffold Widget(...). Das Scaffold Widget repräsentiert den sichtbaren Bereich deiner Anwendung. Sofort kannst Du natürlich ein Feature von Scaffold nutzen, was im Beispiel Code oben, die AppBar ist.

Du siehst, ohne Scaffold könntest Du die AppBar nicht so einfach implementieren ! Es lohnt sich im übrigen immer die Widgets und ihre Parameter genauer anzusehen. In Android Studio mit gepresster Ctrl Taste (Windows) einfach auf den Widget Namen zeigen und dieser verwandelt sich in einen Link. Gleichzeitig erscheint aber ein Pop-Up mit Detail Informationen. Klickst Du den Link an, öffnet sich im Editor der entsprechende Quellcode. Oft reichen aber bereits die Informationen von dem Pop-Up !

Mein Code ist jetzt doch ein wenig angewachsen. Zeit sich Gedanken über die Struktur zu machen ! Dein Code sollte möglichst einfach zu lesen sein, aber auch einfach zu erweitern.

Man unterschätzt diese zwei Punkte gerne. Was nicht selten dazu führt, das man einen Code total neu schreiben muss. Vor allem als Anfänger kann man das zwar nie ausschließen, und schließlich lernt man auch immer dazu 😀

eine Frage der Ordnung

Dir ist ja jetzt bekannt, das Flutter mit Widgets arbeitet und Du kannst mit benannten Parametern etwas anfangen. Es liegt nahe, das ich auch Widgets brauche, um mehr Ordnung in den Code zu bekommen.

Flutter bietet hier zwei Arten von Widgets an um das zu erreichen: StatelessWidget und StatefulWidget.  Ich benötige jetzt das StatelessWidget. Beachte dabei das State im Wort. Auf deutsch ist damit ein Zustand gemeint.

Wenn Du dir ein Widget vorstellst, das Hallo auf den Bildschirm druckt, und immer nur Hallo, dann kannst Du ein StatelessWidget verwenden. Der Code innerhalb wird sich ja nie mehr ändern, da er immer das gleiche macht ! Solltest Du aber ein Widget benötigen, dass einmal Hallo und je nach dem auch Bye Bye druckt, benötigst Du ein StatefulWidget. 

Im StatelessWidget gibt es dementsprechend keinen Zustand (muss ich jetzt Hallo oder Bye Bye drucken), den Flutter überwachen müsste. 

Du kannst nun außerhalb des bisherigen Codes folgendes eingeben:

Deine Dart Kenntnisse helfen Dir sofort zu verstehen, das StatelessWidget eine Klasse ist. Du erweiterst sie mit extends und gibst dieser neuen Klasse einen Namen. In meinem Fall MeineFlutterApp.

Oben siehst Du das Android Studio MeineFlutterApp rot unterstrichen hat, was anzeigt das ein Fehler vorliegt. Jetzt kannst Du in das unterstrichene Wort reinklicken und erhälst links, einen kleinen roten Kreis mit Ausrufezeichen:

Klickst Du wiederum diese kleine Markierung an, erscheint ein Drop Down Menu:

Von den verfügbaren Möglichkeiten benötige ich die erste, also create 1 missing override !

Da ich mit extends die Klasse StatelessWidget erweitere und so eine neue schaffe, benutze ich doch Methoden die im Original schon vorhanden sind. Mit @override weiss Dart, das die original Methoden mit meinen zu überschreiben sind !

Android Studio ergänzt Deinen Code dementsprechend. Freundlicherweise inklusive des Kommentars, das ich build noch implementieren muss, inklusive einer Fehlergenerierung, falls ich das nicht mache 😀

Oben siehst Du das die build Methode ein Widget zurückgibt und als Parameter einen context erwartet. Dazu muss man verstehen, das in Flutter Widgets Eltern und Kinder Widgets haben können. Darum siehst Du auch oft die benannten Parameter child: . Damit Flutter weiss, wo in dieser Struktur das Widget von Dir einzufügen ist, benötigt es den dementsprechenden context.

Ich  entferne jetzt den Kommentar und die Zeile mit throw. Stattdessen kannst Du hier ein return Statement eingeben.

Da die Klasse MeineFlutterApp ein Widget aufbaut, möchte ich es auch an die aufrufende Stelle zurückgeben. Du kannst jetzt den ganzen Code von MaterialApp(...) kopieren und hinter return einfügen !

runApp(...) hat jetzt natürlich keinen Inhalt mehr, was zu einer Fehlermeldung führt. Ich ergänze den Code noch dementsprechend:

Der Ablauf im Code ist ziemlich einfach. runApp(...) generiert eine Instanz meiner MeineFlutterApp Klasse. Die build Methode meiner Klasse retourniert MaterialApp(...), meinen Bildschirm also, an runApp(...) . runApp(...) wiederum zeigt meinen Bildschirm auf dem Mobile an.

Auf dem Bildschirm wirst Du keinen Unterschied zu der Variante ganz oben sehen, wohl aber im Code. void main(...) ist nun sehr klein im Umfang und praktisch der ganze ursprüngliche Code ist Teil einer Klasse.

Die MeineFlutterApp Klasse steht jetzt im main.dart File. Sie könnte sich aber genau so gut in einem anderen befinden und dieses in main.dart eingebunden werden. Im nächsten Post werde ich das Gerüst weiter ausbauen. Bis bald !