Flutter: Das Center-Widget im Detail

Flutter Center-Widget – detaillierte Verwendung

Das Center-Widget ist ein einfaches, aber wirkungsvolles Widget, das sein Kind exakt in der Mitte des verfügbaren Bereichs platziert.

Live-Demo: Beispiele zum Center-Widget

Probieren Sie das Center-Widget im interaktiven Beispiel unten in verschiedenen Szenarien aus:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Grundlegende Verwendung

Center nimmt ein einzelnes Kind auf und zentriert es sowohl horizontal als auch vertikal:

Center(
  child: Text('I am centered'),
)

Center innerhalb eines Container

Text relativ zum Container zentrieren:

Container(
  width: 200,
  height: 100,
  color: Colors.blue.shade100,
  child: Center(
    child: Text('In the center of Container'),
  ),
)

In diesem Beispiel sitzt der Text exakt in der Mitte des Containers.

Center innerhalb einer Row

Wenn Sie Center innerhalb einer Row verwenden, zentriert das Center-Widget sein Kind nur innerhalb des ihm zugewiesenen Platzes:

Container(
  width: 300,
  height: 100,
  color: Colors.grey.shade200,
  child: Row(
    children: [
      Container(width: 50, color: Colors.red),
      Center(
        child: Text('Centered in Row'),
      ),
      Container(width: 50, color: Colors.green),
    ],
  ),
)

Wichtiger Hinweis: Innerhalb einer Row nutzt Center ausschließlich den ihm zugewiesenen Platz. Um die gesamte Row zu zentrieren, sollten Sie die Eigenschaft mainAxisAlignment der Row verwenden.

Die Row selbst zentrieren

Um die gesamte Row zu zentrieren, setzen Sie Center außerhalb der Row ein:

Container(
  width: 300,
  height: 100,
  color: Colors.grey.shade200,
  child: Center(
    child: Row(
      mainAxisSize: MainAxisSize.min, // Important: Keep Row compact
      children: [
        Icon(Icons.star),
        SizedBox(width: 8),
        Text('Row centered'),
        SizedBox(width: 8),
        Icon(Icons.star),
      ],
    ),
  ),
)

Center im Vergleich zu mainAxisAlignment

Mit Center

Container(
  height: 200,
  child: Center(
    child: Text('With Center'),
  ),
)

Mit mainAxisAlignment

Container(
  height: 200,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('With Axis'),
    ],
  ),
)

Unterschied: Center zentriert immer horizontal und vertikal. mainAxisAlignment richtet nur entlang der Hauptachse aus.

Wann Center, wann Achsenausrichtung?

Center verwenden:

• Um ein einzelnes Widget vollständig zu zentrieren
• Wenn sowohl horizontale als auch vertikale Zentrierung nötig ist
• Wenn Sie eine einfache und schnelle Lösung möchten

mainAxisAlignment/crossAxisAlignment verwenden:

• Wenn Sie mehrere Widgets ausrichten
• Wenn Sie nur entlang einer Achse ausrichten
• Wenn Sie mehr Kontrolle brauchen (spaceBetween, spaceAround usw.)

Praktische Beispiele

Beispiel 1: Ladeanzeige

Scaffold(
  body: Center(
    child: CircularProgressIndicator(),
  ),
)

Beispiel 2: Leerer Zustand

Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.inbox, size: 64, color: Colors.grey),
      SizedBox(height: 16),
      Text('No content yet'),
    ],
  ),
)

Zusammenfassung

Das Center-Widget:

• Zentriert sein Kind horizontal und vertikal
• Nimmt ein einzelnes Kind auf
• Ist einfach und schnell einzusetzen
• Verhält sich in Container, Row und Column jeweils anders
• Ist einfacher als mainAxisAlignment/crossAxisAlignment, aber weniger flexibel

Im passenden Szenario ist Center eine schnelle und wirkungsvolle Lösung zur Ausrichtung.