Spacing

Einleitung

Das Spacing-Widget bietet eine saubere, lesbare Moeglichkeit, konsistente Abstaende zwischen UI-Elementen hinzuzufuegen. Anstatt manuell SizedBox-Instanzen in Ihrem gesamten Code zu erstellen, koennen Sie Spacing mit semantischen Voreinstellungen oder benutzerdefinierten Werten verwenden.

// Instead of this:
SizedBox(height: 16),

// Write this:
Spacing.md,

Voreingestellte Groessen

Spacing verfuegt ueber integrierte Voreinstellungen fuer gaengige Abstandswerte. Diese helfen, konsistente Abstaende in Ihrer gesamten App beizubehalten.

Vertikale Abstands-Voreinstellungen

Verwenden Sie diese in Column-Widgets oder ueberall, wo Sie vertikalen Abstand benoetigen:

Column(
  children: [
    Text("Title"),
    Spacing.sm,
    Text("Subtitle"),
    Spacing.lg,
    Text("Body content"),
    Spacing.xl,
    ElevatedButton(
      onPressed: () {},
      child: Text("Action"),
    ),
  ],
)

Horizontale Abstands-Voreinstellungen

Verwenden Sie diese in Row-Widgets oder ueberall, wo Sie horizontalen Abstand benoetigen:

Row(
  children: [
    Icon(Icons.star),
    Spacing.smHorizontal,
    Text("Rating"),
    Spacing.lgHorizontal,
    Text("5.0"),
  ],
)

Benutzerdefinierter Abstand

Wenn die Voreinstellungen nicht Ihren Beduerfnissen entsprechen, erstellen Sie benutzerdefinierte Abstaende:

Vertikaler Abstand

Spacing.vertical(12) // 12 logical pixels of vertical space

Horizontaler Abstand

Spacing.horizontal(20) // 20 logical pixels of horizontal space

Beide Dimensionen

Spacing(width: 10, height: 20) // Custom width and height

Beispiel

Column(
  children: [
    Text("Header"),
    Spacing.vertical(40), // Custom 40px gap
    Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          children: [
            Icon(Icons.info),
            Spacing.horizontal(12), // Custom 12px gap
            Expanded(child: Text("Information text")),
          ],
        ),
      ),
    ),
  ],
)

Verwendung mit Slivers

Bei der Arbeit mit CustomScrollView und Slivers verwenden Sie die asSliver()-Methode:

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text("My App"),
    ),
    Spacing.lg.asSliver(), // Converts to SliverToBoxAdapter
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text("Item $index")),
        childCount: 10,
      ),
    ),
    Spacing.xl.asSliver(),
    SliverToBoxAdapter(
      child: Text("Footer"),
    ),
  ],
)

Die asSliver()-Methode umschliesst das Spacing-Widget in einem SliverToBoxAdapter, wodurch es mit Sliver-basierten Layouts kompatibel wird.

Bedingter Abstand

Verwenden Sie Spacing.zero fuer bedingten Abstand:

Column(
  children: [
    Text("Always visible"),
    showExtraSpace ? Spacing.lg : Spacing.zero,
    Text("Content below"),
  ],
)