Centrare una colonna

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

Una Column è alta quanto lo spazio che le viene assegnato e posiziona i suoi elementi figli in alto. La proprietà mainAxisAlignment: indica dove disporli lungo quell'altezza, ovvero sull'asse principale della colonna:

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

MainAxisAlignment.start corrisponde alla parte superiore, center al centro e end alla parte inferiore. spaceEvenly li distribuisce con spazi uguali. Una Row ha la stessa impostazione, lungo la sua larghezza.

In orizzontale, questa colonna è larga solo quanto il suo elemento figlio più largo, quindi rimane a sinistra. Questa direzione è l'argomento della prossima lezione.

Sfida

Facile

I tre numeri si trovano nella parte superiore dello schermo. Spostali a metà schermo con mainAxisAlignment: 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: Column(
          children: [
            Text('One', style: TextStyle(fontSize: 32)),
            Text('Two', style: TextStyle(fontSize: 32)),
            Text('Three', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
    );
  }
}