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 !

Kommentare

Beliebte Posts aus diesem Blog

Dart Basic: Strings Part 1

Dart Basic: Parameter in Funktionen

Dart Basic: Listen Part 1