Flutter 2021 - Code ausbauen (Android Studio)

Willkommen zurück ! Wo sind wir stehen geblieben ? Ach ja, bei dem Center und Text Widget ! 

Für den Begriff Widget gibt es nicht den einten, allgemein gültigen Begriff in Deutsch. Wenn ich mich auf einen deutschen Begriff festlegen müsste, würde ich Element nehmen. Die Stärke von Flutter, sind genau diese Widget's (Elemente). 

Bisher

Hier noch einmal der letzte Code:

void main(...){...} : main ist der Einstiegspunkt in deine Anwendung. Jede App muss eine main Funktion besitzen.
runApp(...): runApp ist eine Flutter Funktion. Der Inhalt von ihr wird auf dem Mobile dargestellt.

Diese beiden haben eine Sonderstellung. Jede Flutter Anwendung braucht sie, aber es handelt sich bei ihnen nicht um Widgets, im Sinne von Flutter.

Center(...) und Text(...) sind Flutter Widgets. An sich wird ein Widget aufgerufen, wie eine Funktion in Dart. Mit der Besonderheit, das in der Regel benannte Parameter übergeben werden. Einer dieser benannten Parameter kann wiederum ein anderes Widget sein usw. Ich denke Dir sollte das Prinzip jetzt klar sein. Falls, nein, ruhig einen Kommentar schreiben.

Code ausbauen

Jetzt kann ich aber dieses einfache Beispiel ausbauen. Was liegt da näher, als die Vorzüge von Flutter einmal direkt einzubauen ! Du erinnerst Dich noch, wir haben material.dart importiert und damit die Funktionalität von Flutter. Es gibt ein verwandt klingendes Widget, das Du jetzt einmal testen kannst: MaterialApp(...).

Bevor ich den Code anpasse noch eine Klarstellung. In einem der vergangen Post's dieser Serie habe ich Material Design schon einmal erwähnt. Es handelt sich dabei um eine Designphilosophie von Google. Damit ist primär die Gestaltung von Bedienelementen in der Anwendung gemeint. Das klingt jetzt einfach, ist aber in Wahrheit ein großes Themengebiet. Solltest Du dich dafür interessieren, empfehle ich einem ersten Schritt den Besuch von material.io.

Nun aber zum Code:

War im ersten Beispiel der Inhalt von runApp(...) das Center(...) Widget, ist es in diesem Beispiel das MaterialApp(...) Widget. 

Das Beispiel verwendet von MaterialApp(...) die folgenden, benannten Parameter:

title: Der Titel der Anwendung. Hier kann direkt eine Zeichenkette übergeben werden.

home: Hier könnte man schreiben, das dieser Parameter das 'Home Widget' definiert.

MaterialApp(...) selbst hat noch keine visuellen Auswirkungen. Der title: Eintrag ist bei maximierter Anwendung auf dem Mobile nicht sichtbar. home: wiederum erhält von Dir das Widget, welches auf dem Bildschirm dargestellt wird.

Als Parameter übergibst Du hier das Material(...) Widget. Es bietet Dir zum Beispiel u. A. Zugriff auf die Hintergrundfarbe.

Das Center(...) Widget ist neu ein Kind des Material Widgets. Es selbst hat als Kind das Text(...) Widget.

Wenn Du den Code oben in deinem AVD (Android Virtual Device) ausführen lässt, sollte das in etwa so aussehen:

Wenn man das vergleicht mit dem ersten Code Beispiel ist ein Veränderung da, die Farbe blau ! Jetzt ist aber die Schrift doch ein bisschen klein. Das lässt sich aber durch eine kleine Aenderung im Code ändern:

Diese erfolgt im Text(...) Widget. Neu übergebe ich den benannten Parameter style: an die Funktion. Im Beispiel oben ist dieser Parameter ein TextStyle(...) Widget. Von allen möglichen benannten Parametern, die ich diesem Widget übergeben könnte, verwende ich color: und fontSize: . Die Farbe setze ich auf weiss und die Fontgrösse auf 40.00. 

Ist Dir dabei schon aufgefallen, das die benannten Parameter mit einem Kleinbuchstaben beginnen, während die Werte oder Widgets aber mit einem Großbuchstaben starten ? 😀

Das Ergebnis der Aenderung sollte so aussehen:

Das war alles für diesen Post. Bis bald !