Centrer une colonne

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

Une Column occupe toute la hauteur de l’espace qui lui est attribué et place ses enfants en haut. Son paramètre mainAxisAlignment: indique où ils se positionnent le long de cette hauteur, sur le axe principal de la colonne :

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

MainAxisAlignment.start correspond au haut, center au milieu et end au bas. spaceEvenly les répartit avec des espaces égaux. Un Row possède le même paramètre, le long de sa largeur.

Sur la largeur de l’écran, cette colonne n’occupe que la largeur de son enfant le plus large ; elle reste donc à gauche. Cette direction est le sujet de la prochaine leçon.

Défi

Facile

Les trois nombres se trouvent en haut de l’écran. Déplace-les à mi-hauteur avec le mainAxisAlignment: 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: Column(
          children: [
            Text('One', style: TextStyle(fontSize: 32)),
            Text('Two', style: TextStyle(fontSize: 32)),
            Text('Three', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
    );
  }
}