Flutter: Platzsteuerung mit mainAxisSize

Flutter mainAxisSize – Platzsteuerung

mainAxisSize bestimmt, wie viel Platz Row- und Column-Widgets entlang der Hauptachse einnehmen. Es zieht eine unsichtbare Grenze und verhindert, dass sich das Widget unbegrenzt ausdehnt.

Was ist mainAxisSize?

Wenn Sie eine Row oder Column erstellen, versucht sie standardmäßig, den gesamten verfügbaren Platz einzunehmen. Dieses Verhalten ändern Sie mit mainAxisSize.

Live-Demo: Beispiele zu mainAxisSize

Sehen Sie den Unterschied zwischen mainAxisSize.max und mainAxisSize.min:

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

Werte von mainAxisSize

MainAxisSize.max (Standard)

Row oder Column nimmt den gesamten verfügbaren Platz entlang der Hauptachse ein:

Row(
  mainAxisSize: MainAxisSize.max, // Default
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Text('Maximum width'),
    Icon(Icons.star),
  ],
)

In diesem Fall nutzt die Row die gesamte verfügbare Breite.

MainAxisSize.min

Row oder Column nimmt nur so viel Platz ein, wie ihre Kinder benötigen:

Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Text('Minimum width'),
    Icon(Icons.star),
  ],
)

In diesem Fall nimmt die Row nur so viel Platz ein wie die enthaltenen Widgets zusammen.

Verwendung mit Column

In einer Column wirkt mainAxisSize auf die vertikale Achse:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('First line'),
    Text('Second line'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
  ],
)

Mit MainAxisSize.min nimmt die Column vertikal nur so viel Platz ein wie ihr Inhalt.

MainAxisSize.max im Vergleich zu MainAxisSize.min

Merkmal	MainAxisSize.max	MainAxisSize.min
Platzbedarf	Gesamter verfügbarer Platz	Nur der nötige Platz
Standard	Ja	Nein
Wirkung von mainAxisAlignment	Verteilt über die volle Breite	Nur innerhalb der Inhaltsbreite
Einsatz	Wenn die volle Breite gewünscht ist	Kompakte Layouts, Dialoge

Wann verwendet man was?

MainAxisSize.max verwenden:

• Wenn Sie die volle Breite bzw. Höhe möchten
• Wenn Sie Elemente über eine große Fläche verteilen wollen
• Wenn das Standardverhalten genügt

MainAxisSize.min verwenden:

• In Dialoginhalten
• In Karten- und Kachellayouts
• In Button-Gruppen
• Wenn sich das Layout eng an den Inhalt anschmiegen soll
• Wenn Sie unnötige Leerräume vermeiden möchten

Zusammenfassung

mainAxisSize ist eine wichtige Eigenschaft, die den Platzbedarf von Row und Column steuert:

• max: Nutzt den gesamten verfügbaren Platz (Standard)
• min: Nutzt nur so viel Platz wie nötig

Richtig eingesetzt erhalten Sie damit kompaktere und professioneller wirkende Layouts.