Центрирование столбца

Часть раздела Ваше первое приложение путешествия по Flutter на Coddy. Урок 22 из 32.

Column имеет высоту, равную отведённому ей пространству, и располагает дочерние элементы сверху. Свойство mainAxisAlignment: задаёт их расположение по этой высоте — вдоль главной оси столбца:

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

MainAxisAlignment.start — это верх, center — середина, а end — низ. spaceEvenly распределяет их с равными промежутками. У Row есть такая же настройка, задающая расположение вдоль ширины.

По ширине экрана этот столбец занимает лишь столько места, сколько нужно его самому широкому дочернему элементу, поэтому он остаётся слева. Это направление рассматривается в следующем уроке.

Задание

Легко

Три числа находятся в верхней части экрана. Переместите их на середину с помощью mainAxisAlignment: столбца.

Попробуйте сами

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