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

Listen in Dart (2021): Part 1 List.filled List.empty und List.add

Bild
  Vor langer Zeit hatte ich in diesem Blogg schon einmal das Thema Listen aufgegriffen. Im ersten Post dazu, anhand eines einfachen Beispiels. Anschliessend war die Iterable Klasse ein Thema, welche mit der List Klasse einen engen Bezug hat. Abschließend wurde das Thema dann noch in einem zweiten Post vertieft. Wie oben geschrieben war das vor langer Zeit und es macht Sinn das Thema noch einmal aufzugreifen und sei es nur um das Wissen dazu aufzufrischen. Alle Code Beispiele wurden mit Dart 2.13, Null safety aktiviert, getestet . 2 Sorten von Listen Dart stellt zwei Arten von Listen zur Verfügung: eine mit fixer Grösse und eine die "wachsen" kann. Im Code oben sehen Sie zwei Versionen, wie Sie eine Liste definieren können. Wichtig dabei ist, das Sie die leere Liste erst dann über den Index ansprechen können, wenn Sie mindestens einen Eintrag hinzugefügt haben !  Im Vergleich zu früheren Dart Versionen hat sich das erstellen einer Liste mit fixer Länge geändert. Aktuell
Mehr anzeigen

Dart und Klassen

Bild
Dart und Klassen -- ein erstes Beispiel Objekte und Klassen sind wesentliche Bestandteile der objektorientierten Programmierung. Ich habe eine kleines Video zu meinen ersten Erkenntnissen in diesem Bereich gemacht: Im Video oben wurde die Klasse mitArbeiter definiert. Anschließend eine Funktion bzw im Klassen/Objekt Kontext eine Methode des selben Namens: mitArbeiter() . Sie übernimmt als Argumente 3 Strings. Was hat es damit auf sich ? Bei der Erstellung einer Klasse können wir Konstruktoren definieren, was an sich eine Funktion ist, die den gleichen Namen wie die Klasse trägt. Sie hat Zugriff auf die Variablen innerhalb der Klasse. Ganz am Anfang der Klasse definieren wir: String nachName; Diese Variable hat nach Erzeugung des neuen Klassenobjekts nmitarbeiter, den Wert NULL, was nichts anderes heißt, als das die Variable leer ist. Ein String den wir übergeben haben, den ersten, ist der Nachname. Mit this.nachName = nachName wird der anfangs leeren Stringva
Mehr anzeigen

Dart Basic: Strings Part 1

Bild
Dart Die Manipulation von Zeichenketten ist eine wiederkehrende Aufgabe in der Programmierung. Natürlich hat auch Dart diverse Möglichkeiten mit Zeichenketten umzugehen. Dieser Serie wird auf einige eingehen. Basis Alles in Dart ist letztendlich ein Objekt. Auch der Datentyp String ist ein Objekt, beziehungsweise, die entsprechenden Variablen die wir erstellen. In der dart:core Library ist die String Klasse implementiert. Die Dokumentation dazu ist, wie bei Dart üblich, hervorragend. Ich kann nur empfehlen, sich eingehend damit zu beschäftigen. Zum testen kann man das DartPad verwenden. Es ist ideal für kleine Programme und erste Schritte in Dart. Eine Zeichenkette einer Variablen zuweisen Einfache Zuweisung von Strings Links sehen wir zwei einfache Zuweisungen. Einmal an die Variable test , diese ist vom Typ String . Das andere Mal an test1 , diese wiederum ist vom Typ var . Beides ist legitim, obwohl ein kleiner Unterschied besteht. Während String test
Mehr anzeigen