Flutter Set Container Child Widget Alignment Center

In flutter Container widgets are used to create View widgets for Child elements. We can set fixed width and height of container widget. Now by default Container child widget alignment is top left side of parent widget. But we can set its Child widget alignment in 9 different positions. We will apply all of them in today's tutorial one by one. Our main goal is to achieve container child widget alignment in Vertically horizontally center.

Flutter Set Container Child Widget Alignment Center:

1. Apply alignment: Alignment.topLeft property on Container to put the child at the top left side.

Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.topLeft,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),

Screenshot:

2. Setting alignment: Alignment.topCenter.

Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.topCenter,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),

Screenshot:

3. Setting alignment: Alignment.topRight .

Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.topRight,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),

Screenshot:

4. Setting alignment: Alignment.centerLeft .

Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.centerLeft,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        )

Screenshot:

5. Example of alignment: Alignment.center . This sets the position of child widget into Vertically and horizontally center.

Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.center,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),

Screenshot:

6. Set alignment: Alignment.centerRight .

Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.centerRight,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),

Screenshot:

7. Set alignment: Alignment.bottomLeft .

Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.bottomLeft,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),

Screenshot:

8. Set alignment: Alignment.bottomCenter .

Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.bottomCenter,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),

Screenshot:

9. Set alignment: Alignment.bottomRight .

Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.bottomRight,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),

Screenshot:

10. 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: Container(
          width: double.infinity, // Full Screen Width
          height: 300,
          color: Colors.green,
          alignment: Alignment.center,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),
      ),
    ));
  }
}