Eine Spalte zentrieren

Teil des Abschnitts Deine erste App der Flutter-Journey von Coddy. Lektion 22 von 32.

Eine Column ist so hoch wie der ihr zugewiesene Platz und platziert ihre untergeordneten Elemente oben. Ihre Einstellung mainAxisAlignment: legt fest, wo sie entlang dieser Höhe, der Hauptachse der Spalte, platziert werden:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [...],
)

MainAxisAlignment.start bedeutet oben, center die Mitte und end unten. spaceEvenly verteilt sie mit gleichen Abständen. Eine Row hat dieselbe Einstellung entlang ihrer Breite.

Auf dem Bildschirm ist diese Spalte nur so breit wie ihr breitestes untergeordnetes Element und bleibt deshalb links. Um diese Richtung geht es in der nächsten Lektion.

Aufgabe

Einfach

Die drei Zahlen befinden sich oben auf dem Bildschirm. Verschiebe sie auf halbe Höhe nach unten, indem du mainAxisAlignment: der Spalte verwendest.

Probier es selbst

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Text('One', style: TextStyle(fontSize: 32)),
            Text('Two', style: TextStyle(fontSize: 32)),
            Text('Three', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
    );
  }
}