Linke Kanten ausrichten

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

Die andere Richtung einer Column, quer dazu, ist ihre Querachse. Standardmäßig ist jedes untergeordnete Element quer zur Spalte zentriert, sodass eine kurze und eine lange Zeile nicht an derselben Stelle beginnen.

crossAxisAlignment: ändert das:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [...],
)

In einer Column richtet CrossAxisAlignment.start die untergeordneten Elemente links aus, end rechts, und center ist die Standardeinstellung.

Aufgabe

Einfach

Lass beide Zeilen an derselben linken Kante beginnen – mit dem crossAxisAlignment: der Spalte.

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: Center(
          child: Column(
            children: [
              Text('Name', style: TextStyle(fontSize: 24)),
              Text('A much longer line', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
      ),
    );
  }
}