Flutter Align Column Widget Children Vertically Horizontally Center

Column widget aligns its children in vertical manner. The default column widget children alignment is top left side. But this alignment is not used my most of developers. Most of us need the Column widget children alignment Vertically top with horizontally center or both vertically and horizontally center. We would discuss both of these requirement in today's tutorial.

Flutter Align Column Widget Children Vertically Horizontally Center:

1. Setup Column widget alignment Vertically Top and horizontally middle. We have to Wrap Column widget inside Center widget. Center widget aligns its child in horizontally center and vertically top position.

Center(
       child: Column(
       children: [
          Container(
            width: 250, // Full Screen Width
            height: 100,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250, // Full Screen Width
            height: 100,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ]))

Screenshot:

2. Setting up Column children alignment Vertically & Horizontally Center. First we have to wrap Column in Center widget which will make Column Alignment itself horizontally center then we have to use mainAxisAlignment: MainAxisAlignment.center property in Column which will make all the children alignment Vertically center.

Center(
        child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 250, // Full Screen Width
            height: 100,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250, // Full Screen Width
            height: 100,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ]))

Screenshot:

Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
          Container(
            width: 250, // Full Screen Width
            height: 100,
            color: Colors.green,
            alignment: Alignment.center,
          ),
          Container(
            width: 250, // Full Screen Width
            height: 100,
            color: Colors.pink,
            alignment: Alignment.center,
          ),
        ])))));
  }
}