Flutter 2021 - Kenntnisse ausbauen (Android Studio)

Kenntnisse ausbauen
 Im letzten Post habe ich die ersten Zeilen Code geschrieben, die im AVD(Emulator) lauffähig waren. ein ziemlich hässliches, kleines Beispiel 😀 !

In dieser kleinen Serie hast Du bis jetzt die Ordnerstruktur eine Boiler Projekts kennen gelernt. Du weißt das main.dart die main(...) Funktion enthält, den Einstiegspunkt des Betriebssystems in deine Anwendung, und das Du früher oder später das pubspec.yaml File bearbeiten wirst, um Codebibliotheken dritter einzubinden. Den AVD (Android Virtual Device) zu starten sollte für Dich auch kein Problem mehr sein.


Bevor es weiter geht

In einem der letzten Post's habe ich erwähnt, das Flutter keine Programmiersprache, sondern ein Framework ist. Die Programmiersprache hinter Flutter ist Dart. Eines der Features, von denen Flutter starken Gebrauch macht, ist das der benannten Parameter für Funktionen. Du wirst Flutter Code nur dann richtig lesen können, wenn Du dieses Konzept verstehst. Ich habe dazu einen separaten Post gemacht und empfehle Dir ihn zu lesen, falls Du dich noch nicht damit befasst hast !

Wo wir stehen geblieben sind

Wie bereits erwähnt, unser erster Code war kurz:

Code Beispiel eins

Flutter nutzt das Prinzip der Verschachtelung intensiv.  Was ist damit gemeint ? Kurz: ein Widget kann mit einem anderen Widget verknüpft sein, dieses wiederum mit einem Anderen usw. Das liest sich jetzt im ersten Moment kompliziert, ist aber in der Praxis intuitiver als man denken möchte.

Der Code oben gibt einen Text in der linken, oberen Ecke des AVD's aus. Jetzt möchte ich den Text aber zentriert in der Bildschirmmitte haben. In einem ersten Schritt formatiere ich den Code neu. Du kannst mit der rechten Maustaste in den Editor klicken und solltest dann ein Pop Up Kontext Menu sehen:

Android Studio bietet Dir hier einige Auswahlmöglichkeiten. Auch hier hättest Du die Möglichkeit den Code zu starten etc. Ich wähle hier Reformat with 'dart.format' aus. Bei Auswahl formatiert Android Studio den Code gemäß der Logik von dart.format neu.

In der Regel ist diese Funktion sehr nützlich, da diese Funktion den Code 'lesbarer" macht.

Dies ist aber nur eine Option für Dich, keine Pflicht.




Das Center Widget einfügen

Nach der neuen Formatierung sieht der Code so aus:

Code Beispiel zwei
Die neue Formatierung hat den Code auf mehrere Zeilen verteilt, aber natürlich am Inhalt nichts geändert. Klicke jetzt mit der rechten Maustaste in das Wort Text. Du erhälst wieder das Kontextmenu:

Kontextmenu

Diesmal verwende ich Show Context Actions !

Wrap with Center

Das Menu oben gibt Dir die Möglichkeit das Text Widget in ein anderes Widget einzufügen (wörtlich: wickeln 😀 ). Da ich den Text auf dem Bildschirm zentrieren möchte, wähle ich 'Wrap with Center' .  Anschliessend sieht mein Code so aus:

Code Beispiel drei
Im Code oben siehst Du schon das wichtigste Prinzip von Flutter: die Verkettung ! Das Center(...) Widget hat einen benannten Parameter child: . Ihm übergibst Du das Text(...) Widget !

Im Flutter Sprachgebrauch spricht man daher von Eltern Widgets (das übergeordnete) und Kinder Widgets (das untergeordnete).

Wenn Du jetzt  den AVD startest und den Code ausführst, solltest Du folgendes Ergebnis sehen:

AVD drei


Das Prinzip von Eltern-/Kind Widgets sollte jetzt eigentlich klar sein. Natürlich hättest Du das Text Widget auch 'von Hand' in ein Center Widget einbauen können. Android Studio macht es Dir in diesem Fall aber einfacher. Das war es für diesen Post. Bis bald 


Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Flutter -- ohne Dart geht es nicht 2 -- einfache Variablen Typen

Wer sich noch einmal den ersten Teil durchlesen möchte, geht auf diese Seite . Ohne Variablen kann man nicht programmieren. Dar t stellt uns eine Reihe von Variablen Typen zur Verfügung, wobei man immer im Hinterkopf behalten sollte: Alle Variablen Typen in Dart sind auch Objekte! Alle Variablen haben den Startwert NULL .  Beispiel: int jahr = 2018 ;   // int = Variablen Typ für ganze Zahlen z.b.: 1 oder 39 oder 5315 Der Variable mit dem Namen jahr weisen wir den Wert 2018 zu. Wir hätten für die Variable jahr , auch folgende Deklaration verwenden können: var jahr = 2018 ; In dieser Variante wird Dart jahr ebenfalls als int Variable behandeln. Der große Unterschied ist jedoch, das wenn wir im späteren Programmverlauf, dieser Variable ohne Fehlermeldung z.b. einen String zu weisen können. Während dies bei der int Version zu einer Fehlermeldung führen würde . Einer int Variablen können wir aber auch einen hex Wert zuweisen: int seltsame Zahl = 0xEADEBAEE
Mehr anzeigen

Material Design in Flutter Teil 2

Bild
Im ersten Teil des Posts zu diesem Thema, haben wir ein kleines Programm geschrieben, das einige "Material Design Elemente" von Flutter auf den Bildschirm (Emulator) bringt. Im zweiten Teil des Posts gehen wir nun ein wenig mehr auf die Möglichkeiten ein, die Material Design bietet. Farben Wer in seinem Flutter Projekt Farben direkt definieren will, kann diese als ARGB werte festlegen. Hier ein Beispiel: 0xff42f4dc Die obige Zeichenkette beginnt mit 0x und definiert, das die Zeichenkette als Hexadezimal Wert zu verstehen ist. ff , ist der Wert für den Alpha Kanal der Farbe. Dieser legt die Transparenz der Farbe fest. In diesem Beispiel ist der Wert 255 , was nichts anderes heißt, als das die Farbe zu 100% sichtbar ist. Geringere Werte lassen die Hintergrundfarbe durchscheinen bzw mischen "unsere" Farbe mit der Hintergrundfarbe. 42 legt den Rotanteil fest, f4 den Grünanteil, dc , den Blauanteil fest. Kompakt: 0x = es handelt sich um eine Hex
Mehr anzeigen

Dart Final Const

Bild
Der Einsatz von  Final und Const in Dart ist nicht ganz einfach zu verstehen. Beide Schlüsselwörter deklarieren eine Variable, die explizit im Code initialisiert werden muss und im weiteren Verlauf nicht mehr veränderbar ist. Wir können zum Beispiel  deklarieren:  int zahl ; . Die Variable zahl ist nicht initialisiert und wird von Dart mit dem Wert  null belegt. Das sollte man nicht mit 0 verwechseln. null lässt sich am besten mit " undefiniert " übersetzen und ist ein Sprachkonstrukt, welches sich innerhalb von Dart auch benutzen bzw abfragen lässt. Im weiteren Verlauf des Programms können wir der Variable zahl werte zuweisen, sprich den Inhalt von zahl ändern. Bei final und const sieht das anders aus. const Beispiel Code: Die erste Variable wird const int tage deklariert. Jeder Versuch sie im weiteren Programmverlauf zu ändern, wird eine Fehlermeldung hervorrufen. Die zweite Variable entsteht aus einer Berechnung, wobei die erste mit einbezogen
Mehr anzeigen