Flutter, Dart und mehr !

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 !

In diesem Post geht es um den ListView in Flutter. Um genau zu sein, um den ListView.separated. Wie der Name schon suggerieren könnte, kann man mit Hilfe dieses Widgets bequem eine Trennung der einzelnen Listen Elemente erreichen. Gehen wir aber gleich zum Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 class ListViewDemo extends StatelessWidget { @override Widget build(BuildContext context) { return ListView.separated( itemCount: 5 , separatorBuilder: (BuildContext context, int index)=> Divider(), itemBuilder: (BuildContext context, int index){ return ListTile( title:Text( "Mein kleines Demo" ) , subtitle: Text( "und das sollte ein Untertitel sein" ), isThreeLine: true, leading: CircleAvatar( child: Icon(Icons.person), ), ); }, ); } } Der Code oben ist lauffähig, vorausgesetzt man in...

Wer mit Flutter programmiert kommt um Style Informationen nicht herum. Diese stehen bekanntlich auch im Zusammenhang mit dem Bereich Theme in Flutter. Die Library die ich in diesem Post vorstellen möchte, ändert bzw ergänzt diesen Ansatz. Inwieweit das eine Verbesserung des Flutter Style und Theme Systems ist, muss jeder Programmierer für sich selbst entscheiden. Die Library wird von  Rein Gundersen Bentdal entwickelt und ist auf GitHub als Quellcode verfügbar. Wie andere Library's auch, muss sie in unser pubspec.yaml File eingebunden werden, damit wir sie benutzen können. Natürlich ist sie auf pub.dev gelistet. Die dort aufgeführten Beispiele sind sehr gut verständlich und leicht zu testen. Division stellt ein Widget zur Verfügung und es heisst, welche Überraschung: Division. Division(style: StyleClass, gesture: GestureClass, child, Widget); StyleClass: Wie man schon vermuten kann, hier werden die Style Informationen definiert. Unten ein ganz einfaches Beispiel...

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()); }...

TextField In den letzten beiden Artikeln haben wir das Thema InputDecoration für TextField's betrachtet. Auch wenn es dazu noch mehr zu schreiben gäbe, kehren wir in diesem Artikel wieder zu TextField zurück. Wie schon an anderer Stelle geschrieben, kann das TextField solo auftreten, oder , was häufiger der Fall sein dürfte, im Kontext einer MaterialApp . Ohne hier ins Detail zu gehen, sollte man im Hinterkopf behalten, das ein TextField außerhalb einer MaterialApp Einschränkungen unterworfen ist. Man sollte sich deshalb vor dem Coden immer fragen, in welchem Kontext soll das TextField stehen. Was passiert mit der Zeichenkette die der Benutzer erfasst und auf was für Situationen, die mit dem TextField direkt in Verbindung stehen, möchte man reagieren. Linien Die meisten Text Felder sind ein Linien Felder. Passwort, Vorname, Strasse etc haben in der Regel auf einer Linie Platz. Es kann aber Situationen geben, wo man sich dafür entscheidet dem Benutzer eine an...

Input Decoration Beispiel Im letzten Teil dieser kleinen Serie haben wir uns hintText und hintStyle angesehen. Ein Text also der den Benutzer darüber informiert, was für eine Eingabe wir im Textfeld erwarten. In der Regel verschwindet er, sobald der Benutzer mit der Eingabe einer Zeichenkette beginnt. Wir haben auch ein Icon eingebunden, das zu Beginn des Textfeldes angezeigt wird.  labelText Der labelText: Eintrag im InputDecoration Widget hat eine ähnliche Bedeutung, wie hintText . Man kann, muss nicht, beide einsetzen. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Container( width: 200.0 , child: TextField( decoration: InputDecoration( labelText: "Benutzername:" , hintText: "Username:" , icon: Icon( Icons . person, ), hintStyle: TextStyle( backgroundC...