Flutter lernen - aller Anfang ist leicht (2021)


Das Beste an Flutter ist der einfache Einstieg. Wer es sich aktuell zum Ziel gemacht hat, in die Entwicklung von Apps einzusteigen, findet wenig Frameworks, die es einem so einfach machen wie Flutter. Die Vorteile von Flutter: hervorragende Dokumentation auf der Entwicklerseite von Google, ein inzwischen ausgebautes Ecosystem (Librarys, Integration in IDE's etc.) und eine steigende Akzeptanz in der Business Welt.

Wie alles hat auch Flutter zwei Seiten. Nicht für jede Problemstellung ist Flutter die richtige Wahl. Flutter zu lernen, oder mehr über Flutter zu lernen, ist sicher keine Zeitverschwendung. Schliesslich wird Flutter von Google aktiv weiter entwickelt. Das ist fast eine Garantie dafür, das Flutter auch mittel- bis langfristig relevant bleiben wird. Aber legen wir los:

Alle ist ein Widget

Der Begriff Widget ist gar nicht so einfach ins deutsche zu übersetzen. Vor Flutter hat man sich darunter mehrheitlich kleine Programme vorgestellt, die einer bereits bestehenden Umgebung lauffähig sind.  Es gibt Widgets für Websites, für Betriebssysteme und so weiter.
In Flutter finde ich, ist der beste Ansatz, ein Widget als ein Objekt zu betrachten. Der Umgang mit Flutter wird Ihnen leichter fallen, wenn Sie die Prinzipien der objektorientierten Programmierung schon kennen. 

Ein Widget kann ein Eltern Widget haben und dementsprechend auch Kinder Widgets. Widgets können Eigenschaften an ihre Kinder vererben. Die Kinder wiederum können Eigenschaften überschreiben.

Flutter und Dart

Flutter liegt die Programmiersprache Dart zu Grunde. Sie werden zwar in anderen Artikeln lesen, das eine Grundkenntnis von Dart reicht, um Flutter zu lernen. Das stimmt aber nur bedingt. Spätestens beim Studium von  grösseren und komplexeren Flutter Code Beispielen, werden Sie ohne genügende Dart Kenntnisse an Grenzen stoßen. 

Entwicklungsumgebung

Ich arbeite auf einem Windows System und mit Visual Studio Code. Natürlich können Sie auch mit einem Mac entwickeln. Was Windows und Visual Studio Code angeht, habe ich schon einen kleinen Artikel zur aktuelle Situation gepostet. Diesen finden Sie hier.

Boilerplate Code

Wenn Sie in Visual Studio Code ein Flutter Projekt anlegen, wird Ihnen nicht nur eine Ordnerstruktur generiert. Sie erhalten auch ein kleines, vorgefertigtes Projekt für Ihre ersten Schritte mit Flutter:

Flutter Boilerplate Code

Dieser Code oben wird eine Counter App generieren. Das heisst, Sie können einen Button clicken und ein Zähler wird auf dem Bildschirm hochgezählt.

Wenn Sie den Code überfliegen stoßen Sie auf wiederkehrende Elemente: extends, Elemente mit Widget im Namen, context. Wir werden das eingehender in einem der nächsten Posts beleuchten.

Dieser Boiler Plate Code wird die Grundlage für die nächsten Posts zum diesem Thema stellen. Bis bald 

Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

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 Basic: Listen Part 1

Bild
In diesem Post wenden wir uns einem Basiselement fast jeder Programmiersprache zu, der Liste. Als Laie könnte man meinen, okay ein einfaches Thema, aber wen man genau hinschaut, ist es vielfältiger, als man denken möchte. Eine Liste kann nicht wachsen ? Es gibt Situationen, da wissen wir im Vorfeld schon, wie groß eine Liste sein wird.  Die Liste deiner Freunde zum Beispiel oder eine Liste deiner Familie. Der Anfang ist einfach. Wir haben eine Variable, meineKleineListe , diese ist vom Typ List<String> . Ihr weisen wir anschließend mit new List(5)  ein neues Listen Objekt zu . Unsere Variable meineKleineListe kann nun als Liste angesprochen werden und hat genau...wir sind verwundert..Platz für 5 Einträge. Kommen wir aber noch kurz zum Titel dieses Abschnitts, von wegen wachsen. Da wir mit new List(5 ) explizit festgelegt haben, das die Liste 5 Einträge haben soll, wird sich unsere Entwicklungsumgebung mit einem Fehler zu Worte melden, sollten wir versuchen ei...
Mehr anzeigen

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