Flutter, Dart und mehr !

TabBar Die Grundlage dieses Beispiels ist wie fast immer eine MaterialApp. Diese ermöglicht uns Zugriff auf eine erweiterte Funktionalität von Flutter. Als "home:" Eintrag kommt bei dieser Variante der DefaultTabController zum Zuge. Ihn benötigen wir für die Konstruktion der Tabs. Wir übergeben ihm eine Länge von 3 (length:3) und tragen als Kind einen  Scaffold   ein.  Unser Scaffold bekommt eine AppBar, diese wiederum ein Menu-Icon und einen Titel. Diesmal verwenden wir bei der AppBar aber den Eintrag "bottom" . Hier wird die eigentliche TabBar eingetragen. Sie besteht aus Tab Widgets, welche wiederum ein Kind haben, in diesem Fall den Text: Tab 1, Tab 2, Tab 3 . Der Scaffold kann auch einen  Verweis auf einen "body" aufnehmen, was wir jetzt nutzen. In einer Widget Liste legen wir Card 's an, die einen zentrierten Text enthalten. Nicht implementiert wurden in diesem Beispiel die onPressed( ) Funktion des Menu Icons. Hier ein kleines Video dazu: ...

Im Zusammenhang mit Widgets in Flutter stellt sich immer wieder die Frage, wie geht man am besten vor. Vor allem dann, wenn man mehrere Widgets der gleichen "Art" hat. Daten werden oft in Listen verwaltet und einige der Layout Widgets basieren auf dem Listen Format. Die Widgets Column(...) und Row(...)   erwarten ihre Kinder als eine Liste von Widgets. Wie man sich also diesbezüglich organisiert und welche Strategie man dabei verfolgt, dürfte ein wichtiger Punkt sein. Hier ein kleiner Beispiel Code, wie es auch funktionieren kann. Dabei behaupte ich nicht es sei die beste Variante... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 List<Widget> meineWidgets(){ List<Color> meineFarben = [Colors.blue,Colors.brown,Colors.green,Colors.yellow]; List<Widget> meineContainer = new List<Widget>.generate( 4 , (index){ return Container( height: 100.00 , width: 100.00 , color: meineFarben[index], ); }); return meineContain...

Short Tip In diesem Post geht es um eine kleine, aber wichtige Tatsache. Sie hat mich einiges an Zeit gekostet und die möchte ich anderen ersparen. Wie man im Bild unten sieht, ist der Abstand zwischen dem phone Icon und dem Personen Icon ziemlich groß. Mein Ziel war es also, dies zu ändern. Die vier Icons in der letzten Zeile habe ich als IconButton's implementiert. So recht wollte mir das aber nicht gelingen. Jetzt gibt es ja die sehr nützliche Möglichkeit mit Toggle Debugg Painting eine weitere Ansicht zu erhalten. Das Resultat war das folgende: Natürlich kam ich jetzt auf die Idee mit  padding: EdgeInsets.all(0.0)  das Padding zu entfernen, was aber zu keiner Verbesserung geführt hat. Hier wieder die Debugg Ansicht: Nach einiger Suche stieß ich dann auf einen Artikel der das Geheimnis lüftete . Der IconButton ist ein Material Design Widgets und reserviert per Definition 48x48 px. Wenn ich das früher gewusst hätte :-). Bis bald !

Wenn man sich mit Flutter beschäftigt, stößt man früher oder später an Grenzen. Dabei meine ich jetzt nicht eine spezifische Problemstellung, sondern vielmehr die Strukturierung und die Organisation des eigenen Codes. Das mag einem geübten, professionellen Programmierer nur ein müdes Lächeln entlocken. Menschen die programmieren lernen, ob jetzt aus beruflichen Gründen, oder aus Spaß an der Sache, eher weniger. In diesem Post schauen wir uns deshalb, die Möglichkeit an ein Custom Widget zu verwenden. Starter Code  Über die letzten Artikel habe ich den Starter Code eigentlich nicht mehr verändert. Er dient als Anker für die Demo Widgets die ich erstelle, um Flutter zu testen: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import 'package:flutter/material.dart' ; import 'package:flutter/rendering.dart' ; import 'package:tutflutter_002/meine_widgets.dart' ; void main() { debugPaintSizeEnabled = false; runApp(MeinDemo()); }...

In Part 1 zum Thema Provider haben wir den Code vorbereitet, auf den wir das "Muster" Provider anwenden möchten. Noch einmal zur Erinnerung: Der Code wurde in Visual Studio Code getestet, sollte aber auch in Android Studio problemlos laufen. Der Beispiel Code wurde dem Video von RetroPortalStudio entnommen. Ich empfehle sich das Video anzuschauen, vorausgesetzt man besitzt genügend Englisch Kenntnisse, um dem Audio Kommentar zu folgen. Als erstes werden wir unser Scaffold Widget in ein neues Widget einbetten. Visual Studio Code unterstützt uns dabei mit "Wrap with new Widget" !  Man klickt dazu auf die kleine Glühbirne und wählt im Drop Down Menu den entsprechenden Eintrag aus.  ChangeNotifierProvider(...)  heisst unser neues Widget und ist durch den Import von provider.dart verfügbar geworden: 1 2 3 4 5 import 'package:flutter/material.dart' ; import 'package:provider/provider.dart' ; import 'wetterinfo.dart' ; ...

Im letzten Teil dieser Serie sind wir auf das Stateful und das Stateless Widget eingegangen. Flutter -- Tutorial Teil 1 Grundsätzliches Flutter -- Tutorial Teil 2 State und Co Flutter -- Tutorial Teil 3 Starter Code   Flutter -- Tutorial Teil 4 StatefulWidget StatelessWidget Flutter -- Tutorial Teil 5 Navigator --  Du bist hier ! Wir erinnern uns: das Stateless Widget ist an sich nicht dazu gedacht Inhalte zu enthalten, auf die wir später direkt zugreifen wollen. Das Stateful Widget unterstützt genau dieses. Ein Großteil von den Möglichkeiten die Flutter bietet, unterstützt uns bei der Erstellung einer Benutzeroberfläche. Diese ermöglicht dem Benutzer z.b. Buttons zu clicken / drücken, Texteingaben zu machen, etwas abzuspeichern. Dabei bestehen die wenigsten Benutzeroberflächen nur aus einem Bildschirm / View, sondern implementieren meistens mehrere Screens, um den Benutzer durch die App zu navigieren. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

New York Jedes Bildschirmbild besteht aus Pixeln, was eigentlich in unserer Zeit schon Kindern klar ist. Für Programmierer von App's hat dieses Thema aber noch einen anderen Hintergrund.  Zwar ähneln sich viele Smartphones in der Größe, aber die tatsächliche Bildschirmauflösung kennt dann doch Unterschiede. In diesem Zusammenhang gibt einige Fachbegriffe, die zum Teil fast das Gleiche meinen. Eine der Kennzeichnungen die sich allgemein durchgesetzt hat ist folgende: dpi - ein englischer Fachbegriff, der für "Dots per Inch" steht. Diese Abkürzung ist schon lange geläufig. Vor allem im Druckbereich eine gängige Masseinheit. ldpi - low density oder low dots per Inch. Entspricht  ungefähr 120 dpi mdpi - medium density oder medium dots per Inch. Entspricht ungefähr 160 dpi hdpi - high density oder dots per Inch. Entspricht ungefähr 240 dpi xhdpi - extra high density oder dots per Inch. Entspricht etwa 320 dpi xxhdpi - extra extra high density oder dots ...

Cards in Flutter sind gedacht für die optische Darstellung einer überschaubaren Anzahl von Informationen. Während ich mir im ersten Teil das grundsätzliche angeschaut habe, waren mir jetzt die abgerundeten Ecken der Designelemente wichtig. Beim erstellen des Codes ist mir aufgefallen, das mir noch einiges nicht ganz klar ist, vor allem im Umgang mit Bildern, sprich Icons. Beim Card Widget erhält man die abgerundeten Ecken über folgenden Code: shape: RoundedRectangleBorder Wobei hier shape eine Eigenschaft der Card Klasse ist. Beim Bild selbst, kann man das gleiche über folgenden Code erreichen: child: ClipRRect (...child:Image.asset(...)..borderRadius:..) Obwohl im Code alle Card Widgets die gleichen Werte besitzen, was Padding etc angeht, werden sie in unterschiedlichen Dimensionen angezeigt. Das ist etwas, was ich noch genauer anschauen muss und will :-)) Vielleicht mache ich das alles, aber auch viel zu kompliziert.. Hier der Code: Das Ergebnis meiner Bemü...

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

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

Container -- mit BoxDecoration Container in Flutter kann man leicht unterschätzen. Manche vergleichen sie mit dem Div-Tag in Html. Sie gehören aber zu den häufigst gebrauchten Flutter Widgets, wenn es darum geht ein Layout zu programmieren. Hier links sehen wir ein einfaches Rechteck, mit blauer Hintergrundfarbe und einem zentrierten Text. Hier der Code dazu auf GitHub. Mit Verwendung von BoxDecoration können wir den Rand, den Körper des Containers, und gegebenenfalls den Schattenwurf des Containers kontrollieren. Dieser Container kann rechteckig, aber auch rund sein. Wichtig dabei ist auch zu wissen, wie Flutter diesen auf den Bildschirm bringt. Flutter zeichnet dabei in Ebenen. Die erste ebene die gezeichnet wird, ist die Hintergrundfarbe, welche den Container ausfüllt. Sollten wir dabei noch einen Gradienten definiert haben, kommt der als nächstes obendrauf. Beide Arten füllen den Container komplett aus. Sollte der Container noch ein Bild enthalten, wird dieses als näc...

Es wird Zeit für ein neues Flutter Beispiel. Diesmal geht es um den Wechsel von einem Bildschirm zum nächsten. Es mag Apps geben die kommen nur mit einem Bildschirm aus. Sobald aber der Zweck der App umfangreicher wird, benötigt man oft einen weiteren, oder mehrere.Wie meistens, aber besser immer, macht man sich schon zu Beginn, Gedanken über die Struktur des eigenen Codes. In diesem Fall greifen wir zu mehreren Files, was aber nicht zwingend notwendig ist, aber die Übersichtlichkeit steigert. Ebenfalls im Hinterkopf behalten sollte man die Benennung für die Files und die eventuell verwendeten Variablen. Der Code im main File ist simpel. Wir importieren die material.dart package und das File hauptbildschirm. Auf oberster Ebene unseres Widget-Baumes ist ein Stateless Widget, welches ein MaterialApp Widget retourniert. Dieses "Material Widget" bekommt Titel und eine Farbe übergeben. Desweiteren definieren wir den "Homescreen" mit dem home-Eintrag "Hauptbi...