Flutter: Feine Ausrichtung mit dem Align-Widget

Flutter Align-Widget – feine Ausrichtung

Das Align-Widget lässt sich als fortgeschrittene Variante von Center verstehen. Sie können sein Kind punktgenau an jeder Stelle des übergeordneten Bereichs positionieren.

Was ist Align?

Align richtet ein Widget an einer bestimmten Position innerhalb seines übergeordneten Widgets aus. Während Center nur zentriert, kann Align an jeden beliebigen Punkt ausrichten.

Live-Demo: Beispiele zum Align-Widget

Sie können im interaktiven Beispiel unten verschiedene Alignment-Werte ausprobieren:

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

Grundlegende Verwendung

Container(
  width: 200,
  height: 200,
  color: Colors.blue.shade50,
  child: Align(
    alignment: Alignment.center,
    child: Text('In the center'),
  ),
)

Alignment-Werte

In Flutter vordefinierte Alignment-Konstanten:

Alignment.topLeft       // Top left
Alignment.topCenter     // Top center
Alignment.topRight      // Top right

Alignment.centerLeft    // Center left
Alignment.center        // Exact center
Alignment.centerRight   // Center right

Alignment.bottomLeft    // Bottom left
Alignment.bottomCenter  // Bottom center
Alignment.bottomRight   // Bottom right

Beispiele

An der unteren linken Ecke ausrichten

Container(
  width: 300,
  height: 200,
  color: Colors.grey.shade200,
  child: Align(
    alignment: Alignment.bottomLeft,
    child: Container(
      width: 50,
      height: 50,
      color: Colors.blue,
      child: Center(child: Text('Bottom Left')),
    ),
  ),
)

Der Container wird an der unteren linken Ecke seines übergeordneten Bereichs ausgerichtet.

Eigene Alignment-Werte

Alignment verwendet x- und y-Koordinaten zwischen -1.0 und 1.0:

Align(
  alignment: Alignment(0.0, 0.0), // Exact center (same as Alignment.center)
  child: Text('Center'),
)

Align(
  alignment: Alignment(-1.0, -1.0), // Top left (same as Alignment.topLeft)
  child: Text('Top Left'),
)

Align(
  alignment: Alignment(1.0, 1.0), // Bottom right (same as Alignment.bottomRight)
  child: Text('Bottom Right'),
)

Das Koordinatensystem

• x-Achse: -1.0 (links) → 0.0 (Mitte) → 1.0 (rechts)
• y-Achse: -1.0 (oben) → 0.0 (Mitte) → 1.0 (unten)

Eigene Positionen

// Close to right, in center
Align(
  alignment: Alignment(0.5, 0.0),
  child: Text('Shifted right'),
)

// Close to top left corner, not exactly at corner
Align(
  alignment: Alignment(-0.7, -0.7),
  child: Text('Near top left'),
)

// Close to bottom edge, horizontally centered
Align(
  alignment: Alignment(0.0, 0.8),
  child: Text('Near bottom'),
)

Align, Center und mainAxisAlignment im Vergleich

Center

Center(child: Text('Center'))
// Always centers exactly, no other option

Align

Align(
  alignment: Alignment.topRight,
  child: Text('Top right'),
)
// Can align to any point

mainAxisAlignment (Row/Column)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [Text('Center')],
)
// Only aligns along main axis
// Works with multiple children

Wann verwendet man was?

Align verwenden:

• Wenn Sie an einer bestimmten Ecke oder Kante ausrichten müssen
• Wenn Sie eigene Positionen festlegen wollen
• Wenn Sie die Position innerhalb eines Stack bestimmen
• Wenn Sie mehr Kontrolle brauchen als mit Center

Center verwenden:

• Wenn Sie ausschließlich zentrieren möchten
• Wenn eine einfache und schnelle Lösung genügt

mainAxisAlignment/crossAxisAlignment verwenden:

• Wenn Sie mehrere Widgets ausrichten
• Wenn Sie innerhalb einer Row oder Column arbeiten

Zusammenfassung

Das Align-Widget:

• Richtet sein Kind relativ zum umgebenden Bereich aus
• Ist die fortgeschrittene Variante von Center
• Verwendet ein Koordinatensystem zwischen -1.0 und 1.0
• Bietet 9 vordefinierte Standardpositionen
• Nutzt Alignment(x, y) für eigene Positionen
• Ist zusammen mit Stack besonders nützlich

Align ist unverzichtbar, wenn präzise Positionierung gefragt ist.