Center a Column

Part of the Your First App section of Coddy's Flutter journey. Lesson 22 of 32.

A Column is as tall as the space it is given, and starts its children at the top. Its mainAxisAlignment: says where they go along that height, the column's main axis:

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

MainAxisAlignment.start is the top, center the middle and end the bottom. spaceEvenly spreads them out with equal gaps. A Row has the same setting, along its width.

Across the screen this column is only as wide as its widest child, so it stays on the left. That direction is the next lesson.

Challenge

Easy

The three numbers sit at the top of the screen. Move them halfway down, with the column's mainAxisAlignment:.

Try it yourself

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