Allineare i bordi sinistri

Fa parte della sezione La tua prima app del percorso Flutter di Coddy. Lezione 23 di 32.

L'altra direzione di una Column, trasversalmente, è il suo asse trasversale. Per impostazione predefinita, ogni elemento figlio è centrato trasversalmente nella colonna, quindi una riga corta e una lunga non iniziano nello stesso punto.

crossAxisAlignment: modifica questo comportamento:

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

In una Column, CrossAxisAlignment.start allinea gli elementi figli a sinistra, end a destra e center è l'impostazione predefinita.

Sfida

Facile

Fai iniziare entrambe le righe dallo stesso bordo sinistro, usando crossAxisAlignment: della colonna.

Provalo tu

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)),
            ],
          ),
        ),
      ),
    );
  }
}