Flutter, Dart und mehr !

Was wäre eine Programmiersprache ohne Schleifen und Listen ? Nicht viel, ist hier die wahrscheinlich beste Antwort. Schleifen verkürzen den Code, können ihn aber auch schwerer zu lesen machen. In der Regel aber, sind sie notwendig und effizient. Listen ermöglichen das speichern von Daten. Nehmen wir mal an, wir möchten eine Liste von Namen speichern, um sie im späteren Programm Verlauf zu verwenden. Hier bietet sich eine Liste an, fast wie im wirklichen Leben. Wer den letzten Teil zu dieser Reihe lesen möchte..der ist hier . List Mit dem Schlüsselwort List definieren wir eine Liste, wobei es natürlich auch hier Varianten gibt: List namen; //diese Liste ist jetzt definiert, aber leer. Wir können dieser Liste jetzt Objekte, Variablen Typen zu weisen, so wie wir möchten. Ein Beispiel: List namen =[0,"Hurra", mein Widget]; // wir weisen der Liste eine Zahl, eine Zeichenkette und ein Objekt zu.  List<String>namen; // hier definieren wir eine Liste...

Scrollen in einer App ist Alltag. Sobald man eine Anzahl von Items hat, die man dem Benutzer zugänglich machen möchte, bietet es sich an, diese in Form einer Liste zu präsentieren. Ist die Anzahl so groß, das nicht mehr alles auf dem Bildschirm platz hat, kommt das scrollen zum Zuge. Ein Widget das Flutter in diesem Zusammenhang anbietet ist ListView . Wenn man die Dokumentation liest, wird man aber schon ein bisschen vorgewarnt: Es eignet sich vor allem für eine kleine, am besten im Vorfeld schon bekannte, Anzahl von Items. Der Grund dafür ist einfach. Flutter bereitet alle Items dafür vor, "gesehen" zu werden, sprich auf dem Bildschirm zu sein. D.h. auch die Items, zu denen der Benutzer gar noch nicht gescrollt hat. Für Anwendungsfälle mit vielen oder einer im Vorfeld nicht bekannten Anzahl von Widgets empfiehlt die Flutter Dokumentation den ListView.builder . Das ist aber nicht Thema dieses kleinen Posts. Wer im übrigen auf der Suche nach interessanten Artikeln zu Fl...

Eine Frage die sich beim programmieren eines Layouts in Flutter stellt, ist die nach den Bildschirmdimensionen. Möchte man ein Layout erstellen, das Rücksicht auf das verwendete Gerät nimmt, muss man Vorkehrungen treffen. Eine Möglichkeit dabei ist die Verwendung folgenden Codes: Der Code selbst erklärt sich eigentlich von selbst. Entscheidend dabei ist die Benutzung der Klasse Media Query und der Funktion MediaQueryof() .

Wer in der Programmiersprache Dart und mit dem SDK Flutter arbeitet, wird früher oder später mit dem pubspec.yam l File in Berührung kommen. In ihm werden Abhängigkeiten und Assets aufgeführt. Selbstverständlich kann man, das von "Hand" machen. Einfacher geht es mit dieser Extension für Visual Studio Code. Als erstes installieren wir die Erweiterung. Sie nennt sich Pubspec Assist und ist über die integrierte Suche zu finden. Einmal installiert steht sie über die Befehlspalette von Visual Studio Code zur Verfügung. Dazu einfach das pubspec.yaml File öffnen, in den Text klicken. Anschließend die Befehlspalette öffnen und Pubspec Assist auswählen. Im Textfeld den Suchbegriff eingeben und gegebenenfalls die richtige Library auswählen. Wem das ganze zu theoretisch ist, kann sich die Handhabung auch in diesem wirklich kurzen Video anschauen.

Im ersten Teil dieses Artikels haben wir eine kleine Einführung zum Thema asynchrone Funktionen gemacht. Ebenso ist dort Code enthalten, der als Startpunkt dient, uns das Ganze anhand eines realen Beispiels anzuschauen. Das Hauptaugenmerk legen wir dabei auf die zwei Schlüsselwörter async und await . Um unser Beispiel lauffähig zu machen, müssen wir die notwendigen Librarys importieren. Das sind: import: "Dart.convert"; Diese Library ermöglicht uns die Verarbeitung von Json Daten. Ich werde in diesem Artikel aber nicht weiter darauf eingehen. import: "package:http/http.dart as http"; Diese Package benötigen wir für den Zugriff auf eine Internetadresse. Zu diesem Thema in einem zukünftigen Artikel mehr.  Der Code wurde also ergänzt um die notwendigen Library Importe, wobei weite Teile des Codes gleich bleiben. Die wichtigsten Änderungen sind im folgenden Abschnitt zu finden: Der String zeichenKette wurde mit einem leeren String initialisiert...

Als Quelle für diesen Artikel dienten die offizielle Dartdokumentation und ein YouTube Video von Rapido . Der "normal" Ablauf in einem Programm ist synchron. Damit ist gemeint, das eine Programmanweisung nach der anderen abgearbeitet wird. Die nächste Programmanweisung kann erst dann ausgeführt werden, wenn die aktuelle beendet ist. Manche Programmanweisung können aber durchaus spürbar Zeit in Anspruch nehmen, bevor sie abgeschlossen sind. Hier kann ich manchen Fällen, nicht in allen, das asynchrone Strukturieren der Applikation eine Lösung sein. In Dart, und damit in Flutter, repräsentieren sogenannte Future Objekte , das Resultat solchen asynchronen Programmcodes. Hier ein kleines Beispiel, das die Problematik verdeutlicht: String vorname; String nachname; String ganzername; vorname = holeVorNameAusWeb(); nachname = holeNachNameAusWeb(); ganzername = "${vorname} ${nachname}"; print("$ganzername"); Der Aufruf der Funktion holeVorNameAusW...

Wie schon bekannt sein dürfte ist fast alles in Dart (Flutter) ein Objekt. Jeder Variablen Typ zeigt dementsprechend auf "sein" Objekt. Beim anlegen einer Variable, ohne sie dabei zu initialisieren, erhält die Variable den Wert NULL : int ungeradezahl;  // die Variable hat den Wert NULL int ungeradezahl = 3; // die Variable hat den Wert 3 Der Typ String ist dabei ein besonders häufig gebrauchter Typ. Verständigt sich der Mensch doch gerne, und manche häufig, über Sprache und damit auch Text. String uspresident = "Lincoln";  // man beachte das "grosse" S in String String uspresident = 'Lincoln'; // auch einfache Anführungszeichen sind zulässig Wer grössere Textblöcke verarbeiten will kann auch die Variante mit drei Anführungszeichen benutzen: String grosserText = """ Ein sehr sehr sehr grosser Text........................................"""; String grosserText = ''' Ein sehr sehr sehr grosser T...

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 = 0...

Das gute bei Flutter ist, das es inzwischen reichlich Material im Netz hat um sich weiter zu bilden. Ich habe in einem Post den YouTube Channel whatsupcoders erwähnt, mache es hier aber gerne noch einmal. Dieser Post basiert auf einem Video aus diesem Channel. Wer Lust hat sich die ganze Serie anzusehen..hier der Link zu der Playlist . Wer ohne Umschweife zum Source Code dieses Beispiels gehen möchte, findet ihn hier . GridView Grid kann man mit Gitter übersetzen, und naja View, sollte klar sein. Wir können bei diesem Gitter oder Netz wenn man möchte, festlegen wie viele Spalten es hat. In diesem Beispiel generieren wir dann den Inhalt als Liste aus Bildern. Hier zuerst, damit wir Bilder in unserem Flutter Projekt verwenden können, müssen wir sie zuerst in unsere Directory Struktur einfügen. Dazu legen wir ein neues Verzeichnis an, in welches wir unsere Bilder kopieren, gerne auch mittels Drag und Drop. Das ist aber nur die halbe Miete. Wie wir schon wissen besteht unser...

Ein Flutter Programm zu erstellen, ohne sich näher mit Dart zu beschäftigen, ist nicht wirklich sinnvoll. Wer von Java / Javascript her kommt, kann das versuchen. Besser scheint mir aber, den "kleinen" Umweg zu gehen und sich mindestens rudimentär mit Dart zu beschäftigen. Als erstes ist dabei wichtig, sich vor Augen zu führen, das Dart von Anfang an, als Sprache konzipiert wurde, die die Entwicklung von Webapplikationen erleichtern bzw möglich machen sollte. Sie steht deshalb oft im direkten Vergleich zu Java / Javascript. Es ist deshalb kein Wunder, das mit AngularDart ein Framework entstanden ist, welches genau dieses unterstützt. Bei der Flutter Programmierung ist noch interessant zu wissen, das im Debug Mode, der Code in einer Dart VM (Virtual Machine) läuft. Typed oder Untyped ? Wenn wir folgenden Code schreiben: var frageZeichen = "Antwort"; Hier haben wir frageZeichen , als Variable vom Typ " var " deklariert und weisen ihr den We...

So hier gehts zum zweiten Teil des Beispiels Rund ums Thema Bildschirmwechsel. Wer den ersten Teil noch einmal anschauen möchte, zu dem gehts hier . Wer direkt zum Quellcode möchte.. clickt hier . Jetzt geht es um den drawer . Er ist über den Scaffold zugänglich, wie wir hier sehen: Ein Drawer ist ein seitliches Navigationselement, das wir mit einfachen Mitteln erzeugen können. Hier bietet sich der ListView an: drawer: Drawer(    ListView (   children: <Widget>[       DrawerHeader (                             )                                 ], //<Widget>                         ), //ListView                        ) ,//Drawer Der DrawerHeader wir...

Inherited Widgets sind, neben Stateless und Stateful Widgets, eine weiteres Kernelement von Flutter. Das besondere an diesem Widget ist seine Fähigkeit, gezielt Widgets neu aufzubauen. Wenn man zum Beispiel solch ein Inherited Widget als Root-Element seiner App einsetzt, haben die nachfolgenden Widgets Zugriff, auf die durch den Programmierer als veränderbar definierte Daten. In diesem Beispielcode wird jedem Widget folgender Eintrag mitgegeben: final MeinInheritedWidgetState state = MeinInheritedWidget.of(context); Mit diesem Code "regestriert" sich das Widget beim InheritedWidget State Objekt und wird, wenn sich Daten verändern, neu aufgebaut. Das ist zugegebener Massen eine sehr simplifiziert Erklärung. Wer mehr und vor allem genauer über dieses Widget bescheid wissen will, wir nicht darum herumkommen, sich eingehend mit den Docs und den verfügbaren Quellen im Netz auseinander zu setzen. Ein Artikel den ich hier empfehlen kann ist zum Beispiel: der von Didier Boelens ...

Die Basis von allem sind die Widgets Wer nicht gaaanz neu bei Flutter ist, kennt die Aussage, das alles bei Flutter ein Widget ist. Obwohl das sicher nicht zu hundert Prozent richtig ist, trifft es oft zu. Diese Widgets sind in Baumstrukturen organisiert, sind also miteinander verbunden. Man spricht deshalb auch in diesem Zusammenhang oft von "Eltern-Kind" Beziehungen. Wenn man den Baum als Sinnbild heranzieht, dann einen der auf dem Kopf steht. Die oberste Stelle ist immer unsere main Funktion.Sie ist der Startpunkt unserer Software. Die nächste Stufe ist dann " MeineApp " oder welchen Namen das erste Widget auch hat, welches wir programmieren. Es folgt vielleicht ein Scaffold , eine AppBar und vieles andere mehr. Ob man nun ein Eltern Widget betrachtet, oder ein Kind Widget, ist dabei immer relativ zu verstehen. Wer die ersten Schritte in Flutter unternimmt, stösst früher oder später auf den Begriff Context. In Flutter ist ein Context, immer eine Referen...

Wenn man Code eines anderen Autors in Visual Studio Code lädt, kann es vorkommen, das man die Kommentare löschen möchte. Dieser kleine Tipp hilft dabei: Wenn man in den Text clickt und anschliessend Ctrl-F drückt, geht dieses kleine Dialogfeld oben rechts auf. Hier in diesem Beispiel mit der Vorgabe "console" im Textfeld. Diese Vorgabe überschreibt man mit "//.*" und aktiviert weiter Rechts die Schaltfläche ".*" Jetzt muss man das Bedienelement mit dem kleinen Pfeil links erweitern. Mit der kleinen Schaltfläche, hier unter der 47, kann man dann alle Kommentare löschen. Praktisch.

Beim ersten Beispiel von BoxDecoration, habe ich das ganze mit einem StatelessWidget umgesetzt. Nun etwas ähnliches in einem Stateful Widget. Wir fügen dem Beispiel ein Icon hinzu, welches man anclicken kann. Bei jedem anclicken, wird die BoxDecoration leicht geändert. Die BoxDecoration ist in diesem Beispiel in einer eigenen Funktion : Dieser Funktion werden zwei double Werte übergeben, die dann beim setzen des Offsets für den Schatten zur Anwendung kommen. Wir definieren als erstes einen Rand und setzen mit BorderStyle sein Erscheinungsbild, in diesem Fall "solid". Die Farbe, die abgerundeten Ecken und die Definition eines Schattens folgen danach. Da sich diese Funktion rein um die BoxDecoration kümmert, kann sie im Hauptprogramm immer wieder eingesetzt werden, was auch heißt bei Bedarf zentral geändert werden. Sollte man zwei oder drei Varianten benötigen, dann schreibt man einfach die entsprechenden Funktionen. Dieses Prinzip lässt sich aber, je nach Struktur des ...

Text und TextStyle Ich habe mein letztes kleines Beispiel genommen, um ein wenig mit Text und TextStyle zu spielen. Wenn man sich die veränderbaren Eigenschaften von Text genauer anschaut, hat man doch eine Reihe von Gestaltungsmöglichkeiten: Colors.black sollte dabei fast selbsterklärend sein. Black ist dabei eine "eingebaute" Farbe. Mit fontSize lässt sich die Schriftgröße einstellen, mit fontWeigh t z.b., ob der Text fett gedruckt werden soll. TextDecoration.underline unterstreicht den Text und der folgende Wert legt eine "solid" Linie fest. Shadow.lerpList ist für den Schattenwurf verantwortlich, wobei ich nicht wirklich gute Beispiele dazu gefunden habe. Man übergibt zwei Listen mit "Shadow" Objekten. Diese werden dann interpoliert. Das betrifft den  letzten Wert der übergeben wird, hier 0.8. Bei einem Wert von 0.0, würden eigentlich die Eigenschaften von "schatten" umgesetzt, bei 1.0, der von Schatten zwei. Aber wie gesagt.....