Flutter 2021 - Code organisieren (Android Studio)

 Im letzten Post habe ich zum ersten Mal in dieser kleinen Serie ein Stateless Widget verwendet. Nicht weil es in dem Beispiel unbedingt notwendig gewesen wäre, sondern um mehr Ordnung herzustellen.

Eine Ordnung im Code zu halten, ist kein Selbstzweck. Ich möchte einen Code den ich geschrieben habe, auch nach Monaten noch verstehen können. Sich eine Struktur anzugewöhnen, wie immer die dann bei Dir auch aussehen mag, erleichtert das enorm

Wo wir stehen geblieben sind:

Im Code oben enthält die main(...) Funktion nur wenig Code. Die Klasse MeineFlutterApp enthält den Code für den Screen (Bildschirm). 

Eine neue Struktur

Nun wird eine Anwendung kaum mit nur einem Screen auskommen. Wenn Du den Code aber genau anschaust, wirst Du feststellen, das sich der eigentliche Bildschirminhalt im Material(...) Widget befindet. Hier kannst Du ansetzen ! Als erstes benötigen wir einen neuen Ordner

Ich nenne ihn mal my_screens (meine Bildschirme) und in diesem erstelle ich ein neues Dart File.

Nach dem Du das neue Dart File generiert hast, öffnet sich dieses rechts im Editor. Wir haben ja festgestellt, das sich der eigentlich Bildschirminhalt im Material(...) Widget befindet.

Nun können wir es nicht einfach in ein anderes File auslagern. Das MeineFlutterApp Widget hat eine build(...) Methode und gibt eine MaterialApp(...) zurück. Das Material(...) Widget hat das nicht !

Du löst das Problem indem Du das Material(...) Widget in ein Stateless Widget einbettest. Der Code von erster_screen.dart ist einfach:

Jetzt kannst Du das Material Widget(...) mit ErsterScreen() aufrufen ! Dazu passt Du den Code in main.dart wie folgt an:

Als erstes beachte bitte den Import von erster_screen.dart. Dein main.dart File muss natürlich mit diesem verknüpft sein, damit Du es verwenden kannst.

Die große Aenderung ist, das wir jetzt body: nicht mehr das Material Widget(...) übergeben, sondern ErsterScreen() .

Du kannst den Code im AVD (Emulator) starten und wirst keine Veränderung zu früher feststellen. Das was sich geändert hat ist die Struktur deiner Anwendung:

Solltest Du Wochen später am Inhalt deines ersten Bildschirms etwas ändern wollen, wirst Du den zugehörigen Code problemlos finden. 

Bis bald !