Aligner les bords gauches

Fait partie de la section Votre première application du Journey Flutter de Coddy. Leçon 23 sur 32.

L’autre direction d’une Column, qui la traverse, est son axe transversal. Par défaut, chaque enfant est centré dans la colonne : une ligne courte et une ligne longue ne commencent donc pas au même endroit.

crossAxisAlignment: modifie cela :

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

Dans une Column, CrossAxisAlignment.start aligne les enfants à gauche, end les aligne à droite et center est la valeur par défaut.

Défi

Facile

Fais commencer les deux lignes au même bord gauche, avec crossAxisAlignment: de la colonne.

Essayez vous-même

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