Eine Division für Flutter

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 mit Padding Werten. Wichtig dabei ist die "..padding" Schreibweise:


1
2
 final StyleClass titelBox = StyleClass()
  ..padding(vertical: 5.0,horizontal: 5.0);

Man kann sich schon vorstellen, wir könnten diese Variable titelBox auch an anderer Stelle im Code verwenden. Jetzt wo wir den Style haben, benötigen wir das Division Widget:



1
2
3
4
5
6
7
8
9
 Widget _buildTitle(String title) {
    return Division(
      style: titelBox,
      child: Text(
        title,
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 36.0),
      ),
    );
  }

Im Code oben sehen wir, das uns diese Funktion ein Division Widget retourniert. Bei style: tragen wir unsere StyleClass Variable ein, können aber natürlich trotzdem noch im Text Widget einen Style definieren.

Die Verknüpfung mit unserem View ändert sich im Vergleich zum bekannten Vorgehen nicht:



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Divison Demo"),
      ),
      body: Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              _buildTitle("Division Demo"),
            ],
          ),
        ],
      ),
    );
  }
}

Oben sehen wir, wie das retournierte Division Widget ganz einfach in die Column integriert wird.

Ich gehe hier jetzt nicht auf  gesture: GestureClass ein. Das Prinzip dürfte aber klar sein. Wie oben schon geschrieben, die Beispiele auf der Library Seite bei GitHub sind gut zu verstehen.

Fazit: Eine gelungene Library. Sie kann die Style Definitionen modularer gestalten. Die Frage die sich stellt ist, wie gut sich das Konzept mit dem Theme System von Flutter kombinieren lässt. Ausprobieren ! Bis Bald !

Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Flutter -- Tutorial Teil 5 Navigator

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

Dart Basic: Strings Part 2

Bild
Im ersten Teil dieser kleinen Serie zum Thema Dart und Strings haben wir ganz einfach begonnen. Wir wissen, wie wir einer Variablen eine Zeichenkette zuweisen können. Wir wissen auch das in Dart alles ein Objekt ist, so auch jede String Variable . Jetzt wollen wir uns aber tiefer in die Materie stürzen ! Eine Problematik die immer wieder auftauchen kann: Ist eine Zeichenkette in einer anderen vorhanden ? contains() Zur Klarstellung: Wir überprüfen nicht, ob zwei Strings identisch bzw gleich sind. Wir testen ob eine Zeichenkette Teil einer oder identisch mit einer anderen Zeichenkette ist. Wie ist das gemeint ? Beispiel contains() Wenn wir uns links den sehr einfachen Code an. test1.contains(..) liefert als Ergebnis ein false , also falsch. ABBC ist nicht Teil der Zeichenkette die wir in der Variablen test1 gespeichert haben. Das ? leitet eigentlich eine if Konstruktion ein. Die Print Funktion nach dem Fragezeichen wird ausgeführt, wenn cont...
Mehr anzeigen

Flutter und JSON

Bild
Wer sich, und wenn es nur oberflächlich ist, mit programmieren befasst wird auf den Begriff JSON stoßen. Wenn man Großmama Google danach fragt, bekommt man von Großvater Wiki diese Definition angeboten: Die JavaScript Object Notation, kurz JSON , ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen. Ein Datenformat ist ein Standard, den sich jemand ausgedacht hat. Wieso und warum ist interessant, aber sekundär. JSON ist ein Datenaustausch Format und ist aktuell im Web weit verbreitet. Viele Quellen mit denen man interagieren kann, bieten ihre Daten in diesen Format an. In aller kürze (ohne ein Tutorial zu JSON ersetzen zu wollen) hier das wichtigste: Der Inhalt eines JSON Files befindet sich entweder zwischen [..] oder {...} Klammern. [...] = Der Inhalt ist eine Liste. Diese Liste kann ein oder mehrere Objekte enthalten. {...} = Der Inhalt ist ein Objekt aus einem oder mehreren Schlüssel/Wert Paaren. Beispi...
Mehr anzeigen