Centralizar uma coluna

Parte da seção Seu primeiro app do Journey de Flutter da Coddy. Lição 22 de 32.

Uma Column tem a altura do espaço que recebe e inicia seus filhos no topo. Seu mainAxisAlignment: determina onde eles ficam ao longo dessa altura, no eixo principal da coluna:

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

MainAxisAlignment.start corresponde ao topo, center ao meio e end à parte inferior. spaceEvenly distribui os elementos com espaçamentos iguais. Uma Row tem a mesma configuração, ao longo de sua largura.

Na horizontal, essa coluna tem apenas a largura de seu filho mais largo, então fica à esquerda. Essa direção é o assunto da próxima lição.

Desafio

Fácil

Os três números ficam na parte superior da tela. Mova-os para o meio da tela usando mainAxisAlignment: da coluna.

Experimente você mesmo

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