Flutter: Innenabstände mit Padding steuern

Flutter Padding-Widget – Innenabstände steuern

Padding ist ein grundlegendes Widget, um Innenabstände rund um Widgets zu erzeugen. Wer aus dem Designbereich kommt, kennt das Konzept bereits.

Was ist Padding?

Padding erzeugt Abstand zwischen dem Inhalt eines Widgets und dessen äußerer Begrenzung. Anders als margin entsteht der Abstand innerhalb des Widgets.

Grundlegende Verwendung

Padding(
  padding: EdgeInsets.all(16),
  child: Text('I have 16 pixels of space around me'),
)

Arten von EdgeInsets

Abstandswerte werden in Flutter über die Klasse EdgeInsets festgelegt.

EdgeInsets.all()

Gleicher Abstand an allen Seiten:

Padding(
  padding: EdgeInsets.all(16),
  child: Text('16 pixels from all directions'),
)

EdgeInsets.symmetric()

Symmetrischer Abstand auf horizontaler und vertikaler Achse:

Padding(
  padding: EdgeInsets.symmetric(
    horizontal: 16, // 16 pixels from left and right
    vertical: 8,    // 8 pixels from top and bottom
  ),
  child: Text('Symmetric space'),
)

EdgeInsets.only()

Abstand an bestimmten Seiten:

Padding(
  padding: EdgeInsets.only(
    left: 16,
    top: 8,
    right: 16,
    bottom: 8,
  ),
  child: Text('Custom space'),
)

Sie geben genau die Seiten an, die Sie brauchen:

// Only from left and top
Padding(
  padding: EdgeInsets.only(left: 16, top: 8),
  child: Text('Space from left and top'),
)

EdgeInsets.fromLTRB()

In der Reihenfolge links, oben, rechts, unten:

Padding(
  padding: EdgeInsets.fromLTRB(16, 8, 16, 12),
  // Left: 16, Top: 8, Right: 16, Bottom: 12
  child: Text('In LTRB format'),
)

padding im Container oder das Padding-Widget

Die Eigenschaft padding des Container und das Padding-Widget führen zum selben Ergebnis:

Mit Container

Container(
  padding: EdgeInsets.all(16),
  color: Colors.blue,
  child: Text('Container padding'),
)

Mit dem Padding-Widget

Container(
  color: Colors.blue,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Padding widget'),
  ),
)

Was nehmen?

• Wenn Sie ohnehin einen Container nutzen: die Eigenschaft padding
• Wenn Sie nur Abstand brauchen: das Widget Padding
• Kein Performance-Unterschied, reine Geschmackssache

Standardwerte für Abstände

Empfehlungen nach Material Design:

EdgeInsets.all(4)   // Very narrow
EdgeInsets.all(8)   // Narrow
EdgeInsets.all(12)  // Medium-narrow
EdgeInsets.all(16)  // Standard (most common)
EdgeInsets.all(24)  // Wide
EdgeInsets.all(32)  // Very wide

Für horizontal und vertikal:

EdgeInsets.symmetric(horizontal: 16, vertical: 8)  // List items
EdgeInsets.symmetric(horizontal: 24, vertical: 16) // Cards
EdgeInsets.symmetric(horizontal: 16, vertical: 12) // Buttons

Zusammenfassung

Padding:

• Erzeugt Innenabstände rund um Widgets
• Die Werte werden über EdgeInsets festgelegt
• Bietet die Methoden all(), symmetric(), only() und fromLTRB()
• Erzeugt anders als margin Abstand nach innen
• Leistet dasselbe wie die Eigenschaft padding des Container
• Sollte mit responsiven und einheitlichen Werten verwendet werden

Padding gehört zu den meistgenutzten Widgets jeder Flutter-App und ist die Grundlage für gutes Design.