Flutter 2021 - Code organisieren (Android Studio)

Code organisieren
 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:

Beispiel eins

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

neuer Ordner

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

neues 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:

Codebeispiel sechs

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

Codebeispiel sieben

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:

Projekt drei

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

Bis bald !

Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Flutter -- Tutorial Teil 5 Navigator

Bild
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 ...
Mehr anzeigen

Dart Basic: Strings Part 2

Bild
Im ersten Teil dieser kleinen Serie zum Thema Dart und Strings haben wir ganz einfach begonnen. Wir wissen, wie wir einer Variablen eine Zeichenkette zuweisen können. Wir wissen auch das in Dart alles ein Objekt ist, so auch jede String Variable . Jetzt wollen wir uns aber tiefer in die Materie stürzen ! Eine Problematik die immer wieder auftauchen kann: Ist eine Zeichenkette in einer anderen vorhanden ? contains() Zur Klarstellung: Wir überprüfen nicht, ob zwei Strings identisch bzw gleich sind. Wir testen ob eine Zeichenkette Teil einer oder identisch mit einer anderen Zeichenkette ist. Wie ist das gemeint ? Beispiel contains() Wenn wir uns links den sehr einfachen Code an. test1.contains(..) liefert als Ergebnis ein false , also falsch. ABBC ist nicht Teil der Zeichenkette die wir in der Variablen test1 gespeichert haben. Das ? leitet eigentlich eine if Konstruktion ein. Die Print Funktion nach dem Fragezeichen wird ausgeführt, wenn cont...
Mehr anzeigen

Flutter und JSON

Bild
Wer sich, und wenn es nur oberflächlich ist, mit programmieren befasst wird auf den Begriff JSON stoßen. Wenn man Großmama Google danach fragt, bekommt man von Großvater Wiki diese Definition angeboten: Die JavaScript Object Notation, kurz JSON , ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen. Ein Datenformat ist ein Standard, den sich jemand ausgedacht hat. Wieso und warum ist interessant, aber sekundär. JSON ist ein Datenaustausch Format und ist aktuell im Web weit verbreitet. Viele Quellen mit denen man interagieren kann, bieten ihre Daten in diesen Format an. In aller kürze (ohne ein Tutorial zu JSON ersetzen zu wollen) hier das wichtigste: Der Inhalt eines JSON Files befindet sich entweder zwischen [..] oder {...} Klammern. [...] = Der Inhalt ist eine Liste. Diese Liste kann ein oder mehrere Objekte enthalten. {...} = Der Inhalt ist ein Objekt aus einem oder mehreren Schlüssel/Wert Paaren. Beispi...
Mehr anzeigen