Centrar una columna

Parte de la sección Tu primera app del Journey de Flutter de Coddy. Lección 22 de 32.

Una Column tiene la misma altura que el espacio que se le asigna y coloca a sus hijos empezando desde arriba. mainAxisAlignment: indica dónde se sitúan a lo largo de esa altura, el eje principal de la columna:

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

MainAxisAlignment.start es la parte superior, center el centro y end la parte inferior. spaceEvenly los distribuye con espacios iguales. Un Row tiene la misma configuración a lo largo de su anchura.

A lo ancho de la pantalla, esta columna solo tiene la anchura de su hijo más ancho, por lo que permanece a la izquierda. Esa dirección se explica en la siguiente lección.

Desafío

Fácil

Los tres números están en la parte superior de la pantalla. Muévelos hasta la mitad usando mainAxisAlignment: de la columna.

Pruébalo tú mismo

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