Wyśrodkuj kolumnę

Część sekcji Twoja pierwsza aplikacja ścieżki Flutter w Coddy. Lekcja 22 z 32.

Column ma taką wysokość, jaką ma przydzielone miejsce, a jego elementy potomne zaczynają się u góry. Wartość mainAxisAlignment: określa, gdzie zostaną rozmieszczone wzdłuż tej wysokości, czyli głównej osi kolumny:

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

MainAxisAlignment.start oznacza górę, center środek, a end dół. spaceEvenly rozmieszcza je równomiernie, z równymi odstępami. Row ma to samo ustawienie wzdłuż swojej szerokości.

W poprzek ekranu ta kolumna ma szerokość równą szerokości swojego najszerszego elementu potomnego, więc pozostaje po lewej stronie. Tego kierunku dotyczy następna lekcja.

Wyzwanie

Łatwy

Trzy liczby znajdują się u góry ekranu. Przesuń je do połowy ekranu za pomocą mainAxisAlignment: kolumny.

Spróbuj swoich sił

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