Flutter 2021 - EdgeInsets (Android Studio)

In diesem Post vertiefe ich ein Thema, das schon im letzten Post eine kleine Rolle gespielt hat. Du erinnerst Dich, wir hatten u. A. einen Blick auf Margin und Padding geworfen.

Den Raum das ein Widget auf dem Bildschirm einnimmt, kann man als Rechteck betrachten. Ein Layout besteht also aus einer Menge von Rechtecken, die auch ineinander verschachtelt sein können. Grob gesprochen (geschrieben) 😀.

Der Abstand zu benachbarten Widgets, der Abstand zu child: Widgets, ist dementsprechend ein wichtiger Punkt beim erstellen eines Layouts in Flutter.

Dabei muss man erwähnen das auch ein Padding(...) Widget existiert. Auf dieses Widget gehe ich in einem anderen Post ein.

Grundlagen

Falls Du den entsprechenden Post auf diesem Blogg nicht gelesen hast, hier noch einmal ein Bild zu Margin und Padding:

 

Im Bild oben ist Content dein child: Widget ! Border und Padding gehören zu dem Eltern Widget. Dem Widget also, welchem Du die Werte für die Parameter margin: und padding: übergibst. Auch der Bereich von Margin im Bild oben, wird vom Eltern Widget definiert und setzt den Abstand zu benachbarten Widgets.

Werfen wir aber noch einen Blick auf das Koordinaten System:

Dieses Koordinaten System spielt in Flutter eine Rolle. Die X Achse geht von Links nach Rechts. Die Y Achse von oben nach unten. Diese Achsen haben in Flutter an gewissen Stellen eine Bedeutung. Dort wo sich die beiden Achsen kreuzen ist der 0 Punkt. Im Container(...) Widget z.B. befindet er sich in der Mitte des Rechtecks.

Es gibt aber auch Situationen, wo Flutter diesen 0 Punkt in die linke, obere Ecke legt ! 

Aber auch die generellen Begriffe, wie top (oben), bottom (Unterseite / unten), left (links) und right (rechts), werden verwendet.

EdgeInsets

Wenn Du die Margin oder Padding Werte festlegen willst, gibt dir Flutter die EdgeInsets Klasse an die Hand. Mit ihr lassen sich die Werte für beide festlegen.

EdgeInsets.all(8.0) : So definierst Du einen Abstand von 8px für alle vier Seiten des Rechtecks. Beachte das ein double Wert erwartet wird. Beispiel:

EdgeInsets.symmetric(vertical:8.0) : Diese Variante bezieht sich auf die Achsen. Neben vertical: kannst Du auch horizontal: verwenden.  Beispiel:

Im Code oben setzt Du einen Wert für beide Achsen. Wäre der Wert identisch könntest Du genau so gut EdgeInsets.all(...) verwenden.

EdgeInsets.only(right:10) : .only lässt Dich eine bis vier Seiten setzen. Beispiel:

Edge.Insets.fromLTRB(20.0,4.0,8.0,16.0) : Während only dir die Wahl lässt wie viele der vier Seiten du setzen möchtest, erwartet .LTRB Angaben für alle vier Seiten. Beachte bitte, das in diesem Fall, die rohen double Werte verwendet werden. Beispiel:

Du hast jetzt alle wesentlichen Varianten von EdgeInsets kennen gelernt. In einem anderen Post werden wir das Padding(...) Widget anschauen. Es ist oft die bessere Variante um ein Padding zu erreichen, als ein Widget in einen Container(...) zu setzen. Bis bald.