Flutter: Vertically center a widget inside a Container

Last updated on March 25, 2021 A Goodman Loading... Post a comment

This article walks you through 4 techniques to vertically center a child widget inside a Container in Flutter.

Using the alignment property

Set the alignment property to Alignment.center, Alignment.centerRight, or Alignment.centerLeft.

Example

 Container(
        width: double.infinity,
        height: 500,
        color: Colors.amber,
        alignment: Alignment.center,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.red,
        ),
),

Output:

Using a Center widget

The Center widget is used to center its child within itself (both vertical and horizontal).

Example:

Container(
        width: double.infinity,
        height: 500,
        color: Colors.amber,
        child: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.purple,
          ),
        ),
      ),

Output:

Adding a Column with mainAxisAlignment

In Flutter, to vertically center a child widget inside a Container, you can wrap the child widget with Column and add mainAxisAlignment: MainAxisAlignment.center to it.

Example (with full code)

Create a new Flutter project and replace all the default code in ./lib/main.dart file with the following:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,

      title: 'Flutter Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Example'),
        ),
        body: Container(
          height: 600,

          // set the width of this Container to 100% screen width
          width: double.infinity,
          decoration: BoxDecoration(color: Colors.yellow),

          child: Column(
            // Vertically center the widget inside the column
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(color: Colors.purple),
              ),
            ],
          ),
        ));
  }
}

Output:

Using an Align widget

Wrap the child widget with an Align widget and set the alignment argurment to Alignment.center, Alignment.centerLeft, or Alignment.centerRight.

The complete example:

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Container(
        color: Colors.green,
        width: double.infinity,
        height: 500,
        child: Align(
          alignment: Alignment.center,
          child: Container(  
            width: MediaQuery.of(context).size.width * 0.9,
            height: 100,
            color: Colors.amber,
          ),
        ),
      ),
    );
  }
}

Screenshot:

Wrap Up

We’ve gone over some different ways for vertically centering a widget inside a Container. Knowing more than one way to solve a problem can help you gain more insight and flexibility in future situations.

Flutter’s awesome and there’re many things to learn about it. Take a look at the following articles to explore more lovely stuff: Flutter and Firestore Database: CRUD exampleWorking with Time Picker in FlutterWorking with ReorderableListView in FlutterFlutter: Container border examplesWorking with Cupertino Date Picker in Flutter.

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x